/* =========================================================================
   Gästehaus Eltz — components.css
   Multipager-Bausteine. Eltz-Designsprache (style.css) + Meridian-Mechanik
   (Navbar, Breadcrumb, Cards), durchgängig auf --eltz-*-Tokens umgefärbt.
   Wird zusätzlich zu style.css geladen.
   ========================================================================= */

/* ---------- Solid navigation (Unterseiten ohne Vollbild-Hero) ----------- */
.nav--solid {
  position: fixed;
  background: rgba(246, 241, 232, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  color: var(--eltz-stone);
  border-bottom: 1px solid var(--eltz-line);
  padding-block: 14px;
}
.nav--solid .nav__brand em { color: var(--eltz-green-deep); }
.nav--solid .nav__cta:hover {
  background: var(--eltz-green-deep);
  color: var(--eltz-bone);
  border-color: var(--eltz-green-deep);
}

/* aktiver Menüpunkt */
.nav__links a.is-active { opacity: 1; }
.nav__links a.is-active::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 3px;
  background: currentColor;
  opacity: .65;
}

/* breitere Navi erst ab 1024px ausklappen (6 Menüpunkte + CTA) */
@media (min-width: 900px) and (max-width: 1023px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
}
@media (min-width: 1024px) {
  .nav__links { gap: 22px; }
}

/* ---------- Page-Hero (kompakter Seitenkopf für Unterseiten) ------------ */
.page-hero {
  position: relative;
  min-height: clamp(320px, 44vw, 500px);
  display: flex;
  align-items: flex-end;
  padding: clamp(104px, 13vh, 150px) 0 clamp(40px, 6vw, 72px);
  color: var(--eltz-bone);
  background: var(--eltz-stone);
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,29,23,0.55) 0%, rgba(31,29,23,0.25) 38%, rgba(31,29,23,0.30) 60%, rgba(31,29,23,0.72) 100%);
}
.page-hero .container { position: relative; z-index: 1; width: 100%; }
.page-hero__eyebrow { color: var(--eltz-bone); opacity: .85; }
.page-hero__eyebrow::before { background: var(--eltz-bone); }
.page-hero h1 {
  font-size: clamp(38px, 5.4vw, 84px);
  max-width: 18ch;
  margin: 18px 0 0;
  line-height: 0.95;
  text-shadow: 0 2px 24px rgba(0,0,0,0.25);
}
.page-hero h1 em { font-style: italic; color: var(--eltz-sage-soft); }
.page-hero__lead {
  margin: 22px 0 0;
  max-width: 60ch;
  font-family: var(--ff-serif);
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.35;
  color: var(--eltz-bone);
  opacity: .94;
}

/* Plain-Variante ohne Bild (Impressum, Datenschutz, FAQ) */
.page-hero--plain {
  background: var(--eltz-bone-warm);
  color: var(--eltz-stone);
  border-bottom: 1px solid var(--eltz-line);
  min-height: 0;
}
.page-hero--plain::after { display: none; }
.page-hero--plain .page-hero__eyebrow { color: var(--eltz-green-deep); opacity: 1; }
.page-hero--plain .page-hero__eyebrow::before { background: var(--eltz-green); }
.page-hero--plain h1 { color: var(--eltz-stone); text-shadow: none; }
.page-hero--plain h1 em { color: var(--eltz-green-deep); }
.page-hero--plain .page-hero__lead { color: var(--eltz-stone-soft); }
.page-hero--plain .breadcrumb__link { color: var(--eltz-stone-soft); }
.page-hero--plain .breadcrumb__current { color: var(--eltz-stone); }
.page-hero--plain .breadcrumb li + li::before { color: var(--eltz-stone-soft); }

/* ---------- Breadcrumb (Meridian-Pattern, eltz-styled) ------------------ */
.breadcrumb { margin: 0 0 4px; }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before {
  content: "/";
  margin: 0 10px;
  color: var(--eltz-bone);
  opacity: .5;
  user-select: none;
}
.breadcrumb__link {
  color: var(--eltz-bone);
  opacity: .75;
  transition: opacity .2s var(--ease);
}
.breadcrumb__link:hover { opacity: 1; }
.breadcrumb__current { color: var(--eltz-bone); opacity: 1; }

/* ---------- Section-Intro (zentrierter Abschnittskopf) ------------------ */
.section-intro {
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  text-align: center;
}
.section-intro .eyebrow { justify-content: center; }
.section-intro h2 { margin: 18px 0 24px; }
.section-intro h2 em { font-style: italic; color: var(--eltz-green-deep); }
.section-intro .lead { margin: 0 auto; color: var(--eltz-stone-soft); }
.section-intro p { margin-inline: auto; }

/* ---------- Teaser-Cards (Startseite → Säulenseiten) -------------------- */
.teaser-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) { .teaser-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .teaser-grid { grid-template-columns: repeat(3, 1fr); } }

.teaser {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--eltz-bone-warm);
  color: inherit;
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.teaser:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -20px rgba(31,29,23,0.22); }
.teaser__media { aspect-ratio: 3 / 2; overflow: hidden; }
.teaser__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.teaser:hover .teaser__media img { transform: scale(1.05); }
.teaser__body { padding: 28px 28px 32px; display: grid; gap: 12px; align-content: start; }
.teaser__eyebrow {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--eltz-green-deep);
}
.teaser__title { font-family: var(--ff-serif); font-size: 27px; line-height: 1.15; margin: 0; }
.teaser__text { font-size: 15px; line-height: 1.55; color: var(--eltz-stone-soft); margin: 0; }
.teaser__cta {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--eltz-stone);
  border-bottom: 1px solid var(--eltz-green);
  padding-bottom: 4px;
  justify-self: start;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.teaser:hover .teaser__cta { color: var(--eltz-green-deep); border-color: var(--eltz-stone); }

/* ---------- CTA-Band (Abschluss jeder Inhaltsseite) --------------------- */
.cta-band {
  background: var(--eltz-stone);
  color: var(--eltz-bone);
  text-align: center;
}
.cta-band .eyebrow { color: var(--eltz-sage); justify-content: center; }
.cta-band .eyebrow::before { background: var(--eltz-sage); }
.cta-band h2 { color: var(--eltz-bone); margin: 18px auto 20px; max-width: 20ch; }
.cta-band h2 em { font-style: italic; color: var(--eltz-sage-soft); }
.cta-band p {
  margin: 0 auto 36px;
  max-width: 56ch;
  color: rgba(246, 241, 232, 0.82);
  font-family: var(--ff-serif);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.4;
}
.cta-band__btn {
  background: var(--eltz-bone);
  color: var(--eltz-stone);
  border-color: var(--eltz-bone);
}
.cta-band__btn:hover { background: var(--eltz-green-deep); color: var(--eltz-bone); border-color: var(--eltz-green-deep); }

/* ---------- Related-Links (kontextuelle interne Verlinkung, SEO) -------- */
.related {
  background: var(--eltz-bone-warm);
  border-top: 1px solid var(--eltz-line);
}
.related__head { margin-bottom: 28px; }
.related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 700px) { .related__grid { grid-template-columns: 1fr 1fr; gap: 0 48px; } }
.related__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--eltz-line);
  transition: padding-left .3s var(--ease);
}
.related__link:hover { padding-left: 8px; }
.related__link strong {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--eltz-stone);
}
.related__link span { color: var(--eltz-stone-soft); font-size: 14px; }
.related__link .arrow { color: var(--eltz-green-deep); font-size: 20px; }

/* ---------- Prosa-Block (Impressum, Datenschutz) ------------------------ */
.prose { max-width: 760px; margin-inline: auto; }
.prose h2 { font-size: clamp(28px, 3vw, 40px); margin: 48px 0 18px; }
.prose h3 { font-size: clamp(20px, 2vw, 26px); margin: 32px 0 12px; }
.prose p, .prose ul { color: var(--eltz-stone-soft); }
.prose ul { padding-left: 20px; margin: 0 0 1.1em; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--eltz-green-deep); border-bottom: 1px solid var(--eltz-line); }
.prose a:hover { border-color: var(--eltz-green-deep); }
.prose strong { color: var(--eltz-stone); }

/* ---------- Inhalts-Sektion (generischer Abschnitt auf Unterseiten) ----- */
.content { background: var(--eltz-bone); }
.content--warm { background: var(--eltz-bone-warm); }
.content--sage { background: var(--eltz-sage-soft); }

/* ---------- Anfrage / Smoobu-Einbettung --------------------------------- */
.smoobu-embed {
  background: #fff;
  padding: 60px 0;
}
.smoobu-embed iframe { display: block; margin: 0 auto; }

/* ---------- Zirbe (Schlafkultur · Wellness-Story) ----------------------- */
.zirbe { background: var(--eltz-sage-soft); }
.zirbe__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 34px 64px -34px rgba(31, 29, 23, 0.5);
}
.zirbe--wide .zirbe__media { aspect-ratio: 3 / 2; }
.zirbe__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.zirbe__media:hover img { transform: scale(1.04); }
.zirbe__text .chapter-num { color: var(--eltz-green-deep); }
.zirbe__text h2 { margin: 14px 0 24px; }
.zirbe__text h2 em { font-style: italic; color: var(--eltz-green-deep); }
.zirbe__text .lead { margin-bottom: 22px; color: var(--eltz-stone); }
.zirbe__text p { color: var(--eltz-stone-soft); }
.zirbe__meta {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--eltz-line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.zirbe__meta span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--eltz-stone-soft);
}
.zirbe__meta strong {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--eltz-green-deep);
}
@media (max-width: 560px) { .zirbe__meta { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; } }
.zirbe__note {
  margin-top: 22px;
  max-width: 56ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--eltz-stone-soft);
}
.zirbe__note a {
  color: var(--eltz-green-deep);
  border-bottom: 1px solid var(--eltz-line);
}
.zirbe__note a:hover { border-color: var(--eltz-green-deep); }