/* ═══════════════════════════════════════
   GENERISCHES SKELETT — Layout/Verhalten/Struktur, für JEDE Wohnung
   gleich. Farben/Fonts/Bilder kommen ausschließlich über CSS Custom
   Properties von der pro-Wohnung geladenen apartments/<slug>/<slug>.css
   (siehe fewo_portal/doc/spec.md, "Struktur") - dieses File referenziert
   nur var(--...), definiert selbst keine Marken-Werte. Token-Namen sind
   noch ElbeTräumerei-spezifisch benannt (--roof/--timber/--garden statt
   generisch --accent/--primary/--success) - funktional egal, eine neue
   Wohnungs-CSS muss nur dieselben Namen mit eigenen Werten befüllen.
═══════════════════════════════════════ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
html {
  overflow-x: hidden;
}
body {
  font-family: var(--ff-body);
  color: var(--ink);
  background: var(--wall);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button {
  font-family: inherit;
}
:focus-visible {
  outline: 2.5px solid var(--roof);
  outline-offset: 3px;
}
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px;
}
#about,
#gallery,
#details,
#booking,
#reviews {
  scroll-margin-top: 90px;
}


/* ═══════════════════════════════════════
   TYPOGRAPHY UTILITIES
═══════════════════════════════════════ */
.eyebrow {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--roof);
  margin-bottom: 12px;
  display: inline-block;
}
.section-title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  font-weight: 600;
  color: var(--timber);
  line-height: 1.14;
  letter-spacing: -0.01em;
}
.section-head {
  margin-bottom: 44px;
}
.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════
   NICHT GEFUNDEN (unbekannter/nicht mehr existenter Slug, siehe
   showApartmentNotFound() in js/functions.js) - bewusst OHNE var(--...)-
   Markenfarben (die per-Wohnung-CSS lädt in genau diesem Fall selbst nicht,
   siehe apartment.html), deshalb feste, neutrale Werte statt der sonst
   üblichen Wohnungs-Palette.
═══════════════════════════════════════ */
.not-found-state {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #faf8f5;
  color: #2b2926;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  text-align: center;
}
.not-found-state[hidden] {
  display: none;
}
.not-found-state__card {
  max-width: 420px;
}
.not-found-state__card h1 {
  font-size: 1.6rem;
  margin: 0 0 12px;
}
.not-found-state__card p {
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.7;
  margin: 0 0 28px;
}
.not-found-state__card a {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  background: #2b2926;
  color: #faf8f5;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: opacity 0.2s;
}
.not-found-state__card a:hover {
  opacity: 0.8;
}

/* Blendet die übrige (kaputt aussehende, weil ohne Marken-CSS gerenderte)
   Seite komplett aus, sobald showApartmentNotFound() das gesetzt hat. */
body.wohnung-not-found > *:not(.not-found-state) {
  display: none !important;
}

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ff-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}
.btn--primary {
  background: var(--roof);
  color: var(--paper);
  border-color: var(--roof);
}
.btn--primary:hover {
  background: var(--roof-deep);
  border-color: var(--roof-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.btn--outline {
  background: transparent;
  color: var(--timber);
  border-color: var(--timber);
}
.btn--outline:hover {
  background: var(--timber);
  color: var(--wall);
}
.btn--small {
  padding: 10px 20px;
  font-size: 0.72rem;
}
.btn--book {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}
.btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none !important;
}

/* ═══════════════════════════════════════
   NAV
═══════════════════════════════════════ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 40px;
  transition:
    background 0.35s ease,
    padding 0.35s ease,
    box-shadow 0.35s ease;
}
.site-nav.scrolled {
  background: rgba(29, 27, 22, 0.92);
  backdrop-filter: blur(10px);
  padding: 14px 40px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.nav__logo {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 500;
  color: var(--wall);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.nav__logo em {
  font-style: normal;
  color: var(--river);
}
.nav__links {
  display: flex;
  gap: 34px;
  list-style: none;
}
.nav__link {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wall);
  text-decoration: none;
  opacity: 0.85;
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  transition:
    opacity 0.2s,
    border-color 0.2s;
}
.nav__link:hover {
  opacity: 1;
  border-color: var(--river);
}
/* Sprachumschaltung (siehe fewo_server/doc/spec.md, "Mehrsprachigkeit") -
   zurückhaltende Flaggen-Buttons statt eines auffälligen Dropdowns, fügen
   sich neben den übrigen Nav-Links ein. */
.nav__lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lang-switch-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
  padding: 4px 7px;
  cursor: pointer;
  opacity: 0.5;
  transition:
    opacity 0.2s,
    border-color 0.2s;
}
.lang-switch-btn:hover {
  opacity: 0.85;
}
.lang-switch-btn.active {
  opacity: 1;
  border-color: var(--river);
}
.nav__toggle {
  display: none;
  background: none;
  border: none;
  color: var(--wall);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: center 50%;
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(20, 18, 13, 0.86) 0%,
      rgba(20, 18, 13, 0.5) 34%,
      rgba(20, 18, 13, 0.08) 62%,
      rgba(20, 18, 13, 0.28) 100%
    );
}
.hero__content {
  position: relative;
  width: 100%;
  padding-bottom: 76px;
  padding-top: 140px;
}
.hero__text {
  max-width: 640px;
}
.hero__overline {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--river);
  margin-bottom: 18px;
  opacity: 0;
  animation: rise 0.8s 0.15s ease forwards;
}
.hero__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 1.06;
  color: var(--wall);
  letter-spacing: -0.01em;
  margin-bottom: 26px;
}
.hero__title span {
  display: inline-block;
  opacity: 0;
  animation: rise 0.8s ease forwards;
}
.hero__title .l1 {
  animation-delay: 0.3s;
}
.hero__title .l2 {
  animation-delay: 0.45s;
}
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--river);
}
.hero__sub {
  font-size: 1.06rem;
  line-height: 1.65;
  color: rgba(245, 238, 224, 0.86);
  max-width: 480px;
  margin-bottom: 34px;
  opacity: 0;
  animation: rise 0.8s 0.6s ease forwards;
}
.hero__text > .btn {
  opacity: 0;
  animation: rise 0.8s 0.75s ease forwards;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__overline,
  .hero__title span,
  .hero__sub,
  .hero__text > .btn {
    animation: none;
    opacity: 1;
  }
}

/* ═══════════════════════════════════════
   FEATURES STRIP
═══════════════════════════════════════ */
.features-wrapper {
  position: relative;
  background: var(--timber);
  padding: 8px 0;
}
.features-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
}
.features-scroll::-webkit-scrollbar {
  display: none;
}
.features {
  display: flex;
  gap: 1px;
  padding: 0 28px;
  width: max-content;
  min-width: 100%;
}
.feature {
  flex: 0 0 auto;
  padding: 22px 26px;
  min-width: 132px;
  border-right: 1px solid rgba(245, 238, 224, 0.1);
  transition: background 0.2s;
}
.feature:hover {
  background: rgba(245, 238, 224, 0.05);
}
.feature__icon {
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.feature__label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--river);
  margin-bottom: 4px;
}
.feature__value {
  font-family: var(--ff-display);
  font-size: 1.02rem;
  color: var(--wall);
}
.features-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.25s;
}
.features-fade--left {
  left: 0;
  background: linear-gradient(
    to right,
    var(--timber),
    transparent
  );
}
.features-fade--right {
  right: 0;
  opacity: 1;
  background: linear-gradient(to left, var(--timber), transparent);
}

/* ═══════════════════════════════════════
   ABOUT
═══════════════════════════════════════ */
.about {
  padding: 108px 0 96px;
  position: relative;
  overflow: hidden;
}
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--about-decor-image, none);
  background-size: 560px;
  background-position: top right;
  background-repeat: no-repeat;
  opacity: 0.28;
  mix-blend-mode: multiply;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    ellipse 62% 75% at 84% 22%,
    black 0%,
    transparent 68%
  );
  mask-image: radial-gradient(
    ellipse 62% 75% at 84% 22%,
    black 0%,
    transparent 68%
  );
}
.about .container {
  position: relative;
  z-index: 1;
}
.about__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 68px;
  align-items: center;
}
.about__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
}
.about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.about__img--main {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 11;
}
.about__img--sub {
  aspect-ratio: 1 / 1;
}
.about__text p {
  margin-bottom: 16px;
  color: var(--ink-soft);
}
.amenities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin-top: 28px;
}
.amenity {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink);
}
.amenity__dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.6px solid var(--roof);
  background: transparent;
}

/* ═══════════════════════════════════════
   GALLERY
═══════════════════════════════════════ */
.gallery {
  padding: 90px 0 100px;
  background: var(--wall-deep);
}
.gallery__scroll-area {
  position: relative;
  margin-top: 8px;
}
.gallery__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 6px 0 14px;
  cursor: grab;
}
.gallery__track::-webkit-scrollbar {
  display: none;
}
.gallery__item {
  position: relative;
  flex: 0 0 auto;
  width: 320px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  scroll-snap-align: start;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery__item:hover img {
  transform: scale(1.06);
}
.gallery__item-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 16px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--wall);
  background: linear-gradient(
    to top,
    rgba(20, 18, 13, 0.78),
    transparent
  );
}
.gallery__nav-arrows {
  position: absolute;
  top: -66px;
  right: 0;
  display: flex;
  gap: 10px;
}
.gallery__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--timber);
  background: transparent;
  color: var(--timber);
  cursor: pointer;
  font-size: 0.85rem;
  transition:
    background 0.2s,
    color 0.2s;
}
.gallery__arrow:hover {
  background: var(--timber);
  color: var(--wall);
}
.gallery__fade {
  position: absolute;
  top: 0;
  bottom: 14px;
  width: 70px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.25s;
}
.gallery__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--wall-deep), transparent);
}
.gallery__fade--right {
  right: 0;
  opacity: 1;
  background: linear-gradient(to left, var(--wall-deep), transparent);
}

/* ═══════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 13, 10, 0.94);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0.3s;
}
.lightbox.open {
  opacity: 1;
  visibility: visible;
}
.lightbox__img-wrap {
  max-width: min(92vw, 1100px);
  max-height: 84vh;
  text-align: center;
}
.lightbox__img-wrap img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--radius-sm);
  margin: 0 auto;
}
.lightbox__caption {
  display: block;
  margin-top: 14px;
  color: var(--wall);
  font-size: 0.92rem;
  opacity: 0.85;
}
.lightbox__close {
  position: absolute;
  top: 26px;
  right: 30px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 238, 224, 0.4);
  background: transparent;
  color: var(--wall);
  font-size: 1.1rem;
  cursor: pointer;
}
.lightbox__close:hover {
  background: rgba(245, 238, 224, 0.12);
}
.lightbox__counter {
  position: absolute;
  top: 36px;
  left: 30px;
  color: var(--wall);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 238, 224, 0.4);
  background: transparent;
  color: var(--wall);
  font-size: 1.1rem;
  cursor: pointer;
}
.lightbox__arrow:hover {
  background: rgba(245, 238, 224, 0.12);
}
.lightbox__arrow--prev {
  left: 24px;
}
.lightbox__arrow--next {
  right: 24px;
}

/* ═══════════════════════════════════════
   DETAILS TABS
═══════════════════════════════════════ */
.details {
  padding: 100px 0;
}
.details__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 30px;
  border-bottom: 1.5px solid var(--line);
  margin-bottom: 40px;
}
.details__tab {
  background: none;
  border: none;
  font-family: var(--ff-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 12px 2px;
  margin-bottom: -1.5px;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.details__tab:hover {
  color: var(--timber);
}
.details__tab--active {
  color: var(--roof);
  border-bottom-color: var(--roof);
}
.details__panels {
  max-width: 720px;
}
.details__panel {
  display: none;
}
.details__panel--active {
  display: block;
  animation: fade-in 0.35s ease;
}
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.details__panel h3 {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--timber);
  margin-bottom: 14px;
}
.details__panel p {
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.details__panel ul {
  list-style: none;
}
.details__panel li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  color: var(--ink-soft);
}
.details__panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.6px solid var(--roof);
}
.details__panel li strong {
  color: var(--ink);
}
.details__panel a {
  color: var(--garden);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Strukturierte Preistabelle (Saisonpreise/Extrakosten) im Tab "Preise &
   Konditionen" - vor dem Freitext-Feld detailPreise, siehe
   fewo_server/doc/spec.md, "Saisonpreise". */
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 22px;
  font-size: 0.86rem;
}
.price-table caption {
  text-align: left;
  font-weight: 700;
  color: var(--timber);
  margin-bottom: 8px;
  font-size: 0.92rem;
}
.price-table th,
.price-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
.price-table th {
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ═══════════════════════════════════════
   BOOKING
═══════════════════════════════════════ */
.booking {
  padding: 100px 0;
  background: var(--timber);
  position: relative;
}
.booking .eyebrow {
  color: var(--river);
}
.booking .section-title {
  color: var(--wall);
}
.booking__layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
  align-items: start;
}
.calendar-card,
.booking-form-card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
}
/* position:relative nur wegen booking-form-card__success unten (Overlay-
   Anker) - die Karte selbst layoutet sich dadurch nicht anders. */
.booking-form-card {
  position: relative;
}
/* Erfolgs-Overlay nach dem Absenden der Buchungsanfrage (siehe
   submitBookingRequest() in js/functions.js) - legt sich über das komplette
   Formular, damit die Rückmeldung nicht übersehen werden kann (anders als
   der vorherige, leicht überlesbare Text unten im Formular). Fehler bleiben
   bewusst im normalen .booking__status-Fluss (siehe dort) - der Gast soll
   seine Eingabe weiterhin sehen/korrigieren können, nur ein echter Erfolg
   blendet das Formular komplett ab. */
.booking-form-card__success {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px;
  text-align: center;
  background: var(--paper);
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.3s;
}
.booking-form-card__success.visible {
  display: flex;
  opacity: 1;
}
.booking-form-card__success-text {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--garden-deep);
}
.booking-form-card__success-hint {
  font-size: 0.82rem;
  color: var(--iron);
  opacity: 0.7;
}
.calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.calendar__month-label {
  font-family: var(--ff-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--timber);
}
.calendar__nav {
  display: flex;
  gap: 8px;
}
.calendar__nav button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--timber);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.calendar__nav button:hover {
  background: var(--wall-deep);
  border-color: var(--roof);
}
.calendar__hint {
  font-size: 0.86rem;
  color: var(--ink-soft);
  background: var(--wall);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 14px 0 18px;
  line-height: 1.55;
}
.calendar__hint strong {
  color: var(--roof-deep);
}
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar__dow {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 6px;
}
.calendar__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  position: relative;
}
.calendar__day--empty {
  visibility: hidden;
}
.calendar__day--past {
  color: rgba(33, 43, 33, 0.28);
}
.calendar__day--free {
  color: var(--ink);
}
.calendar__day--booked {
  background: repeating-linear-gradient(
    135deg,
    var(--wall-deep),
    var(--wall-deep) 4px,
    var(--calendar-booked-stripe) 4px,
    var(--calendar-booked-stripe) 8px
  );
  color: rgba(33, 43, 33, 0.35);
}
.calendar__day--dimmed {
  opacity: 0.32;
}
.calendar__day--clickable {
  cursor: pointer;
  font-weight: 700;
  background: rgba(68, 90, 56, 0.1);
  color: var(--garden-deep);
  transition:
    background 0.15s,
    transform 0.15s;
}
.calendar__day--clickable:hover {
  background: var(--garden);
  color: var(--paper);
  transform: scale(1.08);
}
/* Tage, die zwar als NEUE Anreise klickbar wären (Auswahl neu starten,
   siehe onDayClick()/buildGrid() in js/functions.js), aber gerade nicht der
   erwartete nächste Schritt sind (Abreise wählen läuft, oder Auswahl ist
   schon komplett) - bewusst blasser als .calendar__day--clickable, damit
   der Blick eindeutig bei den eigentlich gültigen Abreisetagen bleibt statt
   zwischen zwei gleich stark hervorgehobenen Tag-Gruppen zu springen. */
.calendar__day--clickable-muted {
  font-weight: 400;
  background: rgba(68, 90, 56, 0.05);
  color: var(--ink-soft);
}
.calendar__day--clickable-muted:hover {
  background: rgba(68, 90, 56, 0.18);
  color: var(--garden-deep);
  transform: none;
}
.calendar__day--selected {
  background: transparent;
  color: var(--roof-deep);
  font-weight: 700;
}
.calendar__day--arrival-marker,
.calendar__day--departure-marker {
  color: var(--paper);
  background: var(--roof);
}
.calendar__day--arrival-marker::after,
.calendar__day--departure-marker::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.6px solid var(--roof);
  border-radius: 50%;
}
.calendar__day--range {
  background: rgba(163, 73, 37, 0.14);
  color: var(--roof-deep);
  border-radius: 0;
}
.calendar__day--hover-preview {
  background: rgba(163, 73, 37, 0.08);
  border-radius: 0;
}
.calendar__day--hover-end {
  background: rgba(163, 73, 37, 0.2);
  color: var(--roof-deep);
}
.calendar__legend {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.legend-dot--free {
  background: rgba(68, 90, 56, 0.35);
}
.legend-dot--booked {
  background: var(--calendar-booked-stripe);
}
.legend-dot--selected {
  background: var(--roof);
}

.booking-form-card h3 {
  font-family: var(--ff-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--timber);
  margin-bottom: 6px;
}
.price-line {
  color: var(--ink-soft);
  margin-bottom: 18px;
  font-size: 0.94rem;
}
.price-line strong {
  color: var(--roof-deep);
  font-family: var(--ff-display);
  font-size: 1.2rem;
}
/* Wohnungsspezifische Buchungshinweise (apt.bookingHints, siehe
   renderApartmentContent() in js/functions.js) - eigener, per Wohnung
   konfigurierbarer Freitext (Vorlaufzeit, An-/Abreisetage, Mindestaufenthalt
   etc.), bewusst optisch abgesetzt vom statischen .booking__hint darunter
   (Kalender-Bedienhinweis, gilt für jede Wohnung gleich). :empty blendet
   die Box komplett aus, solange keine Wohnung das Feld befüllt hat. */
.booking__hints:empty {
  display: none;
}
.booking__hints {
  font-size: 0.82rem;
  color: var(--ink);
  background: var(--wall);
  border-left: 3px solid var(--roof);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 14px;
  margin-bottom: 16px;
  line-height: 1.55;
}
.booking__hints p:last-child {
  margin-bottom: 0;
}
.booking__hint {
  font-size: 0.8rem;
  color: var(--ink-soft);
  background: var(--wall);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 20px;
  line-height: 1.55;
}
.form-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.form-date-field {
  position: relative;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  font-family: var(--ff-body);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--wall);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--roof);
  outline: none;
}
.form-group textarea {
  min-height: 84px;
  resize: vertical;
}
.date-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
}
.date-clear.visible {
  opacity: 1;
  visibility: visible;
}
.date-clear:hover {
  color: var(--roof);
}
.booking__summary {
  display: none;
  background: var(--wall);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.booking__summary.visible {
  display: block;
}
.booking__summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.86rem;
  color: var(--ink-soft);
  padding: 5px 0;
}
.booking__summary-row--total {
  border-top: 1.5px solid var(--line);
  margin-top: 6px;
  padding-top: 10px;
  font-weight: 700;
  color: var(--timber);
}
.booking__summary-row--total span:last-child {
  color: var(--roof-deep);
  font-family: var(--ff-display);
  font-size: 1.1rem;
}
/* Extrakosten pro Nacht (z.B. Hund) - vom Gast per Checkbox zubuchbar, siehe
   fewo_server/doc/spec.md, "Saisonpreise". */
.booking__extras-per-night:empty {
  display: none;
}
.booking__extras-per-night {
  margin-bottom: 14px;
}
.booking__extra-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
  cursor: pointer;
}
.booking__extra-checkbox input {
  width: auto;
}
/* Gästetaxe-Hinweis: reiner Info-Text, keine Online-Berechnung. */
.booking__guest-tax-note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.booking__guest-tax-note:empty {
  display: none;
  margin: 0;
}
.booking__status {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  line-height: 1.5;
}
.booking__status--success {
  background: rgba(68, 90, 56, 0.12);
  color: var(--garden-deep);
}
.booking__status--error {
  background: rgba(163, 73, 37, 0.12);
  color: var(--roof-deep);
}

/* ═══════════════════════════════════════
   REVIEWS
═══════════════════════════════════════ */
.reviews {
  padding: 100px 0;
}
.reviews__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.reviews__header p {
  color: var(--ink-soft);
  max-width: 520px;
  margin-top: 10px;
  font-size: 0.8rem;
}
/* Echter Bewertungsschnitt oder reviewFallback der Wohnung (siehe
   updateRatingSummary() in js/functions.js) - leer/unsichtbar, solange
   weder echte Bewertungen noch ein Fallback-Text hinterlegt sind. */
.reviews__rating-summary {
  margin-top: 10px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  display: none;
}
.reviews__rating-summary:empty {
  display: none;
}
.reviews__rating-stars {
  color: var(--river-deep);
  letter-spacing: 1px;
  margin-right: 6px;
}
/* externalReviewUrl (Airbnb-Profil o.ä.) - unsichtbar, solange die Wohnung
   keinen Link hinterlegt hat. */
#externalReviewLink {
  display: none;
}
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.review-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 26px;
  cursor: pointer;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.review-card__stars {
  color: var(--river-deep);
  letter-spacing: 2px;
  margin-bottom: 12px;
  font-size: 0.95rem;
}
.review-card__text {
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.6;
  margin-bottom: 16px;
}
.review-card__author {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--timber);
}
.review-card__date {
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.review-card__more {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--roof);
}

/* ═══════════════════════════════════════
   NEWS (siehe fewo_buchung/doc/spec.md, "News") - unaufdringliche, fixe
   Box unten mittig zeigt nur den neuesten Eintrag als Teaser; Klick öffnet
   das Overlay mit allen Einträgen (.news-card darin).
═══════════════════════════════════════ */
.news-bar {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 55;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  max-width: min(340px, calc(100vw - 100px));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(29, 27, 22, 0.16);
  padding: 14px 16px;
  cursor: pointer;
}
.news-bar__content {
  min-width: 0;
}
.news-bar__eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--roof);
  margin-bottom: 4px;
}
.news-bar__title {
  display: block;
  font-family: var(--ff-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--timber);
  margin-bottom: 3px;
}
.news-bar__excerpt {
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.news-bar__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 0.85rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px;
}
.news-bar__close:hover {
  color: var(--ink);
}

.news-card {
  background: var(--wall);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px;
}
.news-card + .news-card {
  margin-top: 16px;
}
.news-card__date {
  font-size: 0.74rem;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.news-card__title {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--timber);
  margin-bottom: 8px;
}
.news-card__text {
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ═══════════════════════════════════════
   OVERLAYS (review detail / review form)
═══════════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 13, 10, 0.7);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0.3s;
}
.overlay.open {
  opacity: 1;
  visibility: visible;
}
.overlay__card {
  background: var(--paper);
  border-radius: var(--radius);
  max-width: 560px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lift);
}
.overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1.5px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--paper);
}
.overlay__header h3 {
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--timber);
}
.overlay__close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.overlay__close:hover {
  border-color: var(--roof);
  color: var(--roof);
}
.overlay__body {
  padding: 26px;
}
.review-detail__stars {
  color: var(--river-deep);
  letter-spacing: 2px;
  font-size: 1.1rem;
  margin-bottom: 14px;
}
.review-detail__text {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 16px;
}
.review-detail__meta {
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.review-detail__ratings {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rating-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rating-row__label {
  flex: 0 0 130px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.rating-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.rating-bar__track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--wall-deep);
  overflow: hidden;
}
.rating-bar__fill {
  height: 100%;
  background: var(--garden);
  border-radius: 3px;
  transition: width 0.6s ease;
}
.rating-bar__val {
  font-size: 0.76rem;
  color: var(--ink-soft);
  width: 30px;
  text-align: right;
}

.review-form .form-group {
  margin-bottom: 14px;
}
.star-input {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 18px;
}
.star-input input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.star-input label {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--line);
  cursor: pointer;
  transition: color 0.15s;
}
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label {
  color: var(--river-deep);
}
.rating-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 16px;
  margin-bottom: 18px;
}
.rating-field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.rating-field select {
  width: 100%;
  font-family: var(--ff-body);
  font-size: 0.88rem;
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--wall);
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.footer {
  background: var(--iron);
  color: rgba(245, 238, 224, 0.72);
  padding: 52px 0 40px;
  text-align: center;
  position: relative;
}
.footer .ring-divider {
  margin-bottom: 28px;
}
.footer__links {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.footer__links a {
  text-decoration: none;
  font-size: 0.8rem;
  color: rgba(245, 238, 224, 0.72);
  transition: color 0.2s;
}
.footer__links a:hover {
  color: var(--river);
}
.footer p {
  font-size: 0.78rem;
  opacity: 0.55;
}

/* ═══════════════════════════════════════
   CHAT WIDGET
═══════════════════════════════════════ */
/* Gemeinsamer Container für Bewertungs-Badge/WhatsApp/Chat (siehe
   apartment.html) - EIN fixierter Flex-Container statt jedes Element
   einzeln mit eigenem bottom/right zu positionieren (frühere Lösung mit
   fixen Pixel-Offsets pro Button wurde mit einem dritten optionalen
   Element - dem Bewertungs-Badge - unhaltbar: jede Kombination aus
   sichtbaren/ausgeblendeten Buttons hätte eigene Offsets gebraucht).
   DOM-Reihenfolge (rating, whatsapp, chat) bestimmt die Anordnung in BEIDEN
   Richtungen gleich: row (Desktop) legt sie links-nach-rechts an, chat
   bleibt als letztes Kind immer in der fixierten Ecke; column (Mobile,
   siehe Media-Query unten) legt sie oben-nach-unten an, chat landet dabei
   automatisch unten (= wieder nächste an der Ecke). Ausgeblendete Kinder
   (display:none, z.B. WhatsApp deaktiviert) nehmen keinen Platz/Gap ein -
   die übrigen rücken automatisch zusammen. */
.fab-stack {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 60;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 16px;
}
/* Bewertungs-Badge (echter Schnitt aus reviewsData oder reviewFallback,
   siehe updateRatingSummary()/renderRatingFab() in js/functions.js) -
   dezentes Gold (--river, dieselbe Farbe wie schon der Chat-Badge unten)
   statt eines kräftigen Sterngelbs. display:none per Default, .visible
   blendet ihn nur ein, wenn ein Wert (echt oder Fallback) da ist -
   zusätzlich blendet initRatingFabScrollGuard() ihn aus, sobald die
   Bewertungs-Sektion selbst im Viewport sichtbar ist (kein Sinn, auf sich
   selbst zu verweisen). */
.rating-fab {
  position: relative;
  width: 58px;
  height: 58px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--river);
  color: var(--paper);
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: transform 0.2s;
}
.rating-fab.visible {
  display: flex;
}
/* Ausgeblendet, sobald die Bewertungs-Sektion selbst im Viewport ist (siehe
   initRatingFabScrollGuard() in js/functions.js) - kein Sinn, auf sich
   selbst zu verweisen. Überschreibt .visible, unabhängig davon ob ein Wert
   vorhanden ist. */
.rating-fab.at-reviews {
  display: none;
}
.rating-fab:hover {
  transform: scale(1.06);
}
.rating-fab__value {
  position: absolute;
  bottom: -4px;
  right: -6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--river-deep);
  font-size: 0.68rem;
  font-weight: 800;
  border: 2px solid var(--wall);
}
/* WhatsApp-Button (apt.whatsappEnabled, siehe renderApartmentContent() in
   js/functions.js) - Palette-Farbe (--garden) statt WhatsApp-Markengrün,
   zurückhaltender im Wohnungs-Design. display:none per Default, .visible
   blendet ihn nur ein, wenn die Wohnung WhatsApp aktiviert UND eine Nummer
   hinterlegt hat. */
.whatsapp-fab {
  position: relative;
  width: 58px;
  height: 58px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--garden);
  color: #fff;
  box-shadow: var(--shadow-lift);
  transition: transform 0.2s;
}
.whatsapp-fab.visible {
  display: flex;
}
.whatsapp-fab:hover {
  transform: scale(1.06);
}
.chat-fab {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: var(--roof);
  color: var(--paper);
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: transform 0.2s;
}
.chat-fab:hover {
  transform: scale(1.06);
}
.chat-fab .badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--river);
  color: var(--iron);
  font-size: 0.68rem;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--wall);
}
.chat-fab .badge.visible {
  display: flex;
}
.chat-panel {
  position: fixed;
  bottom: 96px;
  right: 26px;
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 40px);
  max-height: min(520px, 70vh);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.25s,
    transform 0.25s,
    visibility 0.25s;
}
.chat-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--timber);
  color: var(--wall);
  padding: 16px 18px;
}
.chat__header-title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.02rem;
}
.chat__header-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--river);
  margin-top: 2px;
}
/* Statuspunkt statt wiederholter Systemnachrichten im Chatverlauf (siehe
   setChatConnectionState() in js/functions.js) - Text daneben wird ersetzt,
   nicht angehängt, damit das Fenster bei wiederholten (fehlgeschlagenen)
   Verbindungsversuchen nicht "zappelt". Bewusst feste Signalfarben statt
   Palette-Variablen - Ampel-artige Statusfarben sollen unabhängig vom
   Farbschema sofort erkennbar bleiben. */
.chat-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #9a958c; /* grau: offline/aufgegeben */
}
.chat-status-dot--connecting {
  background: #e0a030; /* orange: Verbindungsversuch läuft */
}
.chat-status-dot--online {
  background: #4caf6e; /* grün: verbunden */
}
.chat__header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat__header-action {
  background: none;
  border: none;
  color: var(--wall);
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.8;
}
.chat__header-action:hover {
  opacity: 1;
}
.chat__close {
  background: none;
  border: none;
  color: var(--wall);
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.8;
}
.chat__close:hover {
  opacity: 1;
}
.chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-msg {
  max-width: 84%;
  padding: 10px 13px;
  border-radius: 12px;
  font-size: 0.86rem;
  line-height: 1.45;
}
.chat-msg--bot {
  align-self: flex-start;
  background: var(--wall-deep);
  color: var(--ink);
  border-bottom-left-radius: 3px;
}
.chat-msg--user {
  align-self: flex-end;
  background: var(--roof);
  color: var(--paper);
  border-bottom-right-radius: 3px;
}
.chat-msg--system {
  align-self: center;
  background: none;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-style: italic;
}
.chat__input-row {
  display: flex;
  gap: 8px;
  padding: 14px;
  border-top: 1.5px solid var(--line);
}
.chat__input {
  flex: 1;
  font-family: var(--ff-body);
  font-size: 0.88rem;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--wall);
}
.chat__input:focus {
  outline: none;
  border-color: var(--roof);
}
.chat__send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--roof);
  color: var(--paper);
  cursor: pointer;
  font-size: 1rem;
  flex: 0 0 auto;
}
.chat__send:hover {
  background: var(--roof-deep);
}

/* Web3Forms-Fallback, sichtbar wenn .chat-panel--ws-down gesetzt ist (siehe
   setChatConnectionState() in js/functions.js) - ersetzt die normale
   Eingabezeile, solange der Chat nicht erreichbar ist. */
.chat__fallback {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-top: 1.5px solid var(--line);
}
.chat-panel--ws-down .chat__input-row {
  display: none;
}
.chat-panel--ws-down .chat__fallback {
  display: flex;
}

/* "Konversation per Mail schicken" (siehe toggleTranscriptForm() in
   js/functions.js) - eigener, manuell umschaltbarer Bereich, unabhängig vom
   WS-Verbindungsstatus, daher eigene Klasse statt .chat-panel--ws-down. */
.chat__transcript {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-bottom: 1.5px solid var(--line);
}
.chat-panel--show-transcript .chat__transcript {
  display: flex;
}
.chat__fallback-hint {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0 0 2px;
}
.chat__fallback-message {
  resize: vertical;
  min-height: 60px;
}
.chat__send-fallback {
  font-family: var(--ff-body);
  font-size: 0.85rem;
  padding: 9px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--roof);
  color: var(--paper);
  cursor: pointer;
}
.chat__send-fallback:hover {
  background: var(--roof-deep);
}
.chat__send-fallback:disabled {
  opacity: 0.6;
  cursor: default;
}
.chat__fallback-result {
  font-size: 0.78rem;
  margin: 0;
  min-height: 1em;
}
.chat__fallback-result--success {
  color: var(--garden-deep);
}
.chat__fallback-result--error {
  color: var(--roof-deep);
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 980px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .booking__layout {
    grid-template-columns: 1fr;
  }
  .reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px) {
  .site-nav {
    padding: 18px 20px;
  }
  .site-nav.scrolled {
    padding: 12px 20px;
  }
  .nav__toggle {
    display: block;
  }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(29, 27, 22, 0.97);
    backdrop-filter: blur(10px);
    padding: 4px 20px 16px;
  }
  .nav__links.open {
    display: flex;
  }
  .nav__link {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid rgba(245, 238, 224, 0.12);
  }
  .nav__lang-switch {
    padding: 14px 0;
  }
  .hero__content {
    padding-top: 110px;
    padding-bottom: 48px;
  }
  .container {
    padding: 0 20px;
  }
  .about,
  .details,
  .booking,
  .reviews {
    padding: 68px 0;
  }
  .news-bar {
    left: 12px;
    right: 88px;
    bottom: 16px;
    max-width: none;
    padding: 10px 14px;
    align-items: center;
  }
  .news-bar__eyebrow {
    display: none;
  }
  .news-bar__title {
    font-size: 0.82rem;
    margin-bottom: 2px;
  }
  .news-bar__excerpt {
    font-size: 0.76rem;
    -webkit-line-clamp: 1;
  }
  .about__images {
    grid-template-columns: 1fr 1fr;
  }
  .amenities {
    grid-template-columns: 1fr;
  }
  .reviews__grid {
    grid-template-columns: 1fr;
  }
  .reviews__header {
    align-items: flex-start;
  }
  .form-dates {
    grid-template-columns: 1fr;
  }
  .rating-grid {
    grid-template-columns: 1fr 1fr;
  }
  .chat-panel {
    right: 16px;
    bottom: 86px;
    width: calc(100vw - 32px);
  }
  /* Gestapelt statt nebeneinander (siehe .fab-stack oben) - chat bleibt als
     letztes DOM-Kind unten/an der Ecke (bottom/right hier identisch zum
     bisherigen chat-fab-Wert), .chat-panel oben bleibt dadurch weiterhin
     korrekt genau über dem Chat-Button positioniert, unabhängig davon wie
     viele weitere Buttons gerade darüber gestapelt sind. */
  .fab-stack {
    right: 16px;
    bottom: 16px;
    flex-direction: column;
    gap: 10px;
  }
  .calendar__day {
    font-size: 0.76rem;
  }
}