html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "liga" 1;
}

.text-balance {
  text-wrap: balance;
}

/* Header states */
#site-header {
  color: #FBF7F0;
}
/* Startseite: Foto laeuft bis oben, oben dunkler Verlauf + leichter Schatten (Variante B) */
#site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.75rem 0;
  background: linear-gradient(to bottom, rgba(30, 22, 17, 0.78), rgba(30, 22, 17, 0.38) 55%, rgba(30, 22, 17, 0));
  pointer-events: none;
  z-index: -1;
  transition: opacity 400ms ease;
}
#site-header.is-scrolled::before { opacity: 0; }
#site-header:not(.is-scrolled) {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  font-weight: 500;
}
#site-header:not(.is-scrolled) .nav-link { opacity: 1; }
#site-header.is-scrolled {
  background: #FBF7F0;
  color: #2B211B;
  box-shadow: 0 1px 0 #E4D5C0;
}
#site-header.is-scrolled .nav-link {
  color: #2B211B;
}
#site-header .nav-link {
  color: inherit;
  opacity: 0.85;
  transition: opacity 200ms ease;
}
#site-header .nav-link:hover {
  opacity: 1;
}
#site-header #lang-toggle {
  color: inherit;
}

/* Hero scroll indicator */
.scroll-line {
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FBF7F0;
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { top: -100%; }
  50% { top: 0%; }
  100% { top: 100%; }
}

.icon-mark {
  color: #BD5B2C;
}

/* Reveal animation initial state (JS/GSAP controls the animation itself;
   this is only a no-JS / pre-hydration fallback so content is not invisible) */
.reveal {
  opacity: 1;
}
.js-ready .reveal {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .scroll-line::after {
    animation: none;
  }
}

/* ---------- Google-Rezensionen (gleitendes Karussell, 3 pro Ansicht) ---------- */
.review-viewport { overflow: hidden; padding: 0.5rem 0.25rem 1.25rem; margin: -0.5rem -0.25rem -1.25rem; }
.review-track { --n: 3; --gap: 1.5rem; display: flex; gap: var(--gap); will-change: transform; transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1); }
.review-track.no-anim { transition: none; }
@media (max-width: 1023px) { .review-track { --n: 2; --gap: 1.25rem; } }
@media (max-width: 639px) { .review-track { --n: 1; --gap: 1rem; } }
.review-card {
  flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; cursor: pointer; background: #fff; border: 1px solid #E4D5C0; border-radius: 2px;
  padding: 1.75rem; min-height: 21rem; transition: border-color 200ms ease, box-shadow 200ms ease;
}
@media (min-width: 768px) { .review-card { padding: 2rem; } }
.review-card:hover, .review-card:focus-visible { border-color: rgba(189, 91, 44, 0.45); box-shadow: 0 6px 24px rgba(43, 33, 27, 0.08); outline: none; }
.review-card .review-text { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.review-stars { color: #B8862A; letter-spacing: 0.15em; line-height: 1; }
.review-nav { width: 2.75rem; height: 2.75rem; border: 1px solid rgba(189, 91, 44, 0.4); border-radius: 9999px; background: transparent; color: #2B211B; font-size: 1.1rem; cursor: pointer; transition: background 200ms ease; }
.review-nav:hover { background: #fff; }

dialog#review-dialog {
  border: 1px solid #E4D5C0; border-radius: 2px; padding: 0;
  max-width: min(36rem, calc(100vw - 2rem)); width: 100%; max-height: calc(100vh - 3rem);
  background: #fff; color: #2B211B;
}
dialog#review-dialog::backdrop { background: rgba(43, 33, 27, 0.55); }
@media (prefers-reduced-motion: reduce) { .review-track { transition: none; } }