/* =====================================================
   MEIER DESIGN APARTMENT — Editorial Stylesheet
   Alternative Layout im Stil von danielblue.com
   ===================================================== */

/* ---------- Self-hosted fonts ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-v18-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-v18-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caveat-handwriting-fresh.woff2') format('woff2');
}
/* Allura (TypeSETit / Robert Leuschke) — elegante moderne Kalligrafie.
   SIL Open Font License (frei für kommerzielle Nutzung), self-hosted
   für DSGVO-Konformität. Latin-Subset von der Google Fonts API. */
@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/allura-v23-latin-regular.woff2') format('woff2');
}

/* ---------- Variablen ---------- */
:root {
  --ed-bg: #ece7dc;            /* Parchment (warmes Off-White) */
  --ed-bg-dark: #05040b;       /* Obsidian (tiefes Schwarz) */
  --ed-fg: #05040b;
  --ed-fg-light: #ece7dc;
  --ed-muted: #675f54;         /* dunkler als früher (#756c5f, 4,2:1) für WCAG-AA-Kontrast auf --ed-bg, jetzt 5,1:1 */
  --ed-muted-dark: rgba(236, 231, 220, 0.55);
  --ed-line: rgba(5, 4, 11, 0.12);
  --ed-line-dark: rgba(236, 231, 220, 0.18);
  --ed-accent: #80664e;        /* Chestnut-Akzent dezent */

  --ed-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --ed-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x:hidden auch auf html, damit die fixed Off-Canvas-Navigation
   (relativ zum Viewport) keinen horizontalen Scroll auf Mobile erzeugt.
   Sicher: Header ist fixed, es gibt keine position:sticky-Elemente. */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Platz für den fixierten Header bei #-Sprüngen/Reload, damit die
     Zielüberschrift nicht darunter verschwindet. */
  scroll-padding-top: 7rem;
}
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--ed-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ed-fg);
  background: var(--ed-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
em { font-family: var(--ed-serif); font-style: italic; font-weight: 400; }
ol, ul, dl { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

/* ---------- HEADER ---------- */
.ed-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.6rem 2.4rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 3rem;
  transition: padding 0.4s ease, background 0.4s ease;
  background: transparent;
}
.ed-header.is-scrolled {
  background: rgba(236, 231, 220, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.9rem 2.4rem;
  border-bottom: 1px solid var(--ed-line);
}
.ed-brand img {
  height: 56px;
  width: auto;
  transition: height 0.4s ease, filter 0.4s ease;
  filter: invert(1);  /* helles Logo auf dunklem Hero */
}
.ed-header.is-scrolled .ed-brand img {
  height: 40px;
  filter: none;
}
.ed-nav ol {
  display: flex;
  gap: 2.4rem;
  justify-content: center;
}
.ed-nav a {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ed-fg-light);
  transition: opacity 0.3s ease, color 0.4s ease;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}
.ed-nav a span {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 0.85rem;
  opacity: 0.7;
}
.ed-header.is-scrolled .ed-nav a { color: var(--ed-fg); }
.ed-nav a:hover { opacity: 0.6; }
.ed-contact {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  color: var(--ed-fg-light);
  text-align: right;
  line-height: 1.2;
}
.ed-contact span {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ed-contact em {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1rem;
}
.ed-header.is-scrolled .ed-contact { color: var(--ed-fg); }

/* ---------- HERO ---------- */
.ed-hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  color: var(--ed-fg-light);
}
.ed-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ed-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62) contrast(1.05);
  animation: edHeroZoom 18s ease-out infinite alternate;
}
@keyframes edHeroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .ed-hero-media img { animation: none; }
}
.ed-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 4, 11,0.45) 0%, rgba(5, 4, 11,0.15) 35%, rgba(5, 4, 11,0.55) 100%);
  pointer-events: none;
  z-index: 2;
}
/* Hero-Slideshow: mehrere Hintergrundbilder im sanften Crossfade.
   Erstes Bild ist im HTML mit .is-active markiert und bleibt auch
   ohne JS sichtbar; die übrigen blenden per JS langsam über. */
.ed-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  will-change: opacity;
  z-index: 1;
}
.ed-hero-slide.is-active {
  opacity: 1;
}
/* Bild füllt den Slide vollständig (height:100% der img braucht eine
   definierte Höhe des picture-Elements). Helligkeit/Zoom/object-fit
   erbt die img bereits von .ed-hero-media img. */
.ed-hero-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .ed-hero-slide { transition: none; }
}
.ed-hero-meta {
  position: absolute;
  top: 50%;
  right: 3.2rem;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 2;
  text-align: right;
}
.ed-meta-row {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236, 231, 220, 0.85);
}
.ed-meta-row em {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  color: var(--ed-fg-light);
}
.ed-hero-title {
  position: absolute;
  bottom: 8rem;
  left: 3.2rem;
  margin: 0;
  z-index: 2;
  font-family: var(--ed-sans);
  font-size: clamp(3.5rem, 9vw, 9rem);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--ed-fg-light);
  max-width: 12ch;
}
.ed-hero-title em {
  font-family: var(--ed-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.05em;
  letter-spacing: -0.01em;
}
/* ---------- SECTION BASE ---------- */
.ed-section {
  padding: 9rem 3.2rem;
  border-top: 1px solid var(--ed-line);
}
.ed-section--inverted {
  background: var(--ed-bg-dark);
  color: var(--ed-fg-light);
  border-color: var(--ed-line-dark);
}
.ed-section-head {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-bottom: 5rem;
  max-width: 1100px;
}
.ed-label {
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ed-muted);
}
.ed-section--inverted .ed-label { color: var(--ed-muted-dark); }
.ed-h2 {
  margin: 0;
  font-family: var(--ed-sans);
  font-size: clamp(3rem, 7vw, 6.4rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
/* Auf kleinen Phones etwas kompakter, damit lange H2 (z. B. „Das Meier
   Design Apartment in Friedrichsruhe") nicht so dominant/hoch werden. */
@media (max-width: 520px) {
  .ed-h2 { font-size: clamp(2.3rem, 9vw, 3rem); }
}
.ed-h2 em {
  font-family: var(--ed-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.04em;
}
/* Tagline-Variante: kleinerer Subtitle in einer Zeile (z. B. Lage-H2) */
.ed-h2 em.ed-h2-tagline {
  font-size: 0.42em;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .ed-h2 em.ed-h2-tagline {
    font-size: 0.55em;
    white-space: normal;   /* darf auf Mobile umbrechen, wenn nötig */
  }
}

/* ---------- GRID (zwei Spalten) ---------- */
.ed-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 5rem;
  align-items: start;
}
.ed-grid--reverse {
  grid-template-columns: 1fr 1.15fr;
}
/* Verhindert den CSS-Grid-„Blowout": Grid-Items haben standardmäßig
   min-width:auto und schrumpfen nicht unter ihren Inhalt (z. B. ein Bild).
   Ohne dies bleibt die 1fr-Spalte auf Mobile breiter als der Viewport und
   der Inhalt wird durch overflow-x:hidden rechts abgeschnitten. */
.ed-grid > *,
.ed-grid--reverse > * {
  min-width: 0;
}
.ed-figure {
  margin: 0;
  position: relative;
}
.ed-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.ed-figure--lg img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.ed-figure--portrait img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.ed-figure figcaption {
  margin-top: 1rem;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--ed-muted);
}
.ed-section--inverted .ed-figure figcaption { color: var(--ed-muted-dark); }
.ed-figure figcaption em {
  font-style: italic;
  font-family: var(--ed-serif);
  font-size: 1rem;
  margin-right: 0.4rem;
}

/* ---------- TEXT-Säule ---------- */
.ed-text {
  padding-top: 1rem;
}
.ed-lead {
  font-family: var(--ed-sans);
  font-size: 1.15rem;
  line-height: 1.55;
  margin: 0 0 2rem;
  max-width: 48ch;
}
.ed-text p {
  margin: 0 0 1.4rem;
  max-width: 50ch;
}
.ed-coords {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ed-muted);
  margin-top: 2rem;
}

/* ---------- SPEC-Liste (definition list) ---------- */
.ed-spec {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 3rem;
  row-gap: 0;
  margin-top: 2rem;
}
.ed-spec > div {
  display: flex;
  justify-content: space-between;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--ed-line);
  gap: 1.5rem;
}
.ed-spec dt {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ed-muted);
  font-weight: 500;
}
.ed-spec dd {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1.05rem;
  text-align: right;
  margin: 0;
}

/* ---------- Thumbs unter Hauptbild ---------- */
.ed-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  margin-top: 5rem;
  padding-top: 5rem;
  border-top: 1px solid var(--ed-line);
}
.ed-thumbs figure { margin: 0; }
.ed-thumbs img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
.ed-thumbs figcaption {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ed-muted);
}
.ed-thumbs figcaption em {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 0.95rem;
  margin-right: 0.4rem;
}

/* ---------- Quote (Gastgeber) ---------- */
.ed-quote {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--ed-fg-light);
  margin: 0 0 1rem;
  max-width: 24ch;
  position: relative;
  padding-left: 0;
}
.ed-quote-attr {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ed-muted-dark);
  margin: 0 0 2.5rem;
}
.ed-section--inverted .ed-text p { color: var(--ed-fg-light); opacity: 0.78; }
.ed-perks li {
  display: flex;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--ed-line-dark);
  font-size: 0.95rem;
  color: var(--ed-fg-light);
}
.ed-perks li span {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ed-muted-dark);
}

/* ---------- Distanz-Tabelle ---------- */
.ed-distances {
  width: 100%;
  margin-top: 6rem;
  border-collapse: collapse;
}
.ed-distances tr {
  border-bottom: 1px solid var(--ed-line);
}
.ed-distances th,
.ed-distances td {
  padding: 1.2rem 0;
  text-align: left;
  font-weight: 400;
}
.ed-distances th {
  font-size: 1.1rem;
  width: 50%;
}
.ed-distances td:nth-child(2) {
  font-size: 0.95rem;
  width: 25%;
  color: var(--ed-fg);
}
.ed-distances td:nth-child(3) {
  width: 25%;
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ed-muted);
  text-align: right;
}

/* ---------- Places (04 Umgebung) ---------- */
/* Wrapper, der Places-Liste + Source-Paragraph in einem gemeinsamen
   2-Spalten-Grid hält: Source rutscht so in die leere Zelle neben VII. */
.ed-places-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.ed-places-wrap > .ed-places {
  display: contents;   /* Kinder (li) werden direkte Grid-Items des Wrappers */
}
.ed-places {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  counter-reset: place;
}
.ed-places li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2rem;
  padding: 2.4rem 0;
  border-bottom: 1px solid var(--ed-line-dark);
  align-items: start;
}
.ed-places li:nth-child(odd) { border-right: 1px solid var(--ed-line-dark); padding-right: 3rem; }
.ed-places li:nth-child(even) { padding-left: 3rem; }
.ed-place-no {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 2.2rem;
  color: var(--ed-muted-dark);
  line-height: 1;
}
.ed-places h3 {
  margin: 0 0 0.6rem;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ed-fg-light);
}
.ed-places p {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  color: var(--ed-muted-dark);
  line-height: 1.55;
  max-width: 36ch;
}
.ed-places em {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ed-muted-dark);
  letter-spacing: 0.04em;
}

/* Quellen-Hinweis als Grid-Item in der rechten Spalte, vertikal
   bündig mit dem letzten Place-Item (VII) — bekommt EXAKT die gleiche
   visuelle Anatomie wie ein <li> (Numeral-Slot links, Content rechts,
   gleiche Paddings, gleiche Bottom-Linie). */
.ed-places-source {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2rem;
  align-items: start;
  /* Zelle füllt die volle Reihenhöhe → Border-Bottom landet auf
     derselben Y-Linie wie das Place-Item links daneben (VII). */
  align-self: stretch;
  padding: 2.4rem 0 2.4rem 3rem;
  border-bottom: 1px solid var(--ed-line-dark);
  margin: 0;
  max-width: none;
}
.ed-places-source .ed-place-no {
  /* erbt Schriftart/Größe von der globalen .ed-place-no-Regel */
}
.ed-places-source h3 {
  margin: 0 0 0.6rem;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ed-fg-light);
}
.ed-places-source p {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  color: var(--ed-muted-dark);
  line-height: 1.55;
  max-width: 36ch;
}
.ed-places-source em {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ed-muted-dark);
  letter-spacing: 0.04em;
}
.ed-places-source a {
  color: var(--ed-fg-light);
  border-bottom: 1px solid var(--ed-line-dark);
  padding-bottom: 1px;
  transition: border-color 0.3s ease;
}
.ed-places-source a:hover { border-bottom-color: var(--ed-fg-light); }

/* ---------- CTA Section (05 Buchen) ---------- */
.ed-section--cta {
  padding: 12rem 3.2rem;
  background: var(--ed-bg);
  text-align: center;
}
.ed-cta-inner {
  max-width: 920px;
  margin: 0 auto;
}
.ed-h2-xl {
  margin: 1.6rem 0 2rem;
  font-family: var(--ed-sans);
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.ed-h2-xl em {
  font-family: var(--ed-serif);
  font-style: italic;
  font-weight: 400;
}
.ed-cta-text {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.5;
  margin: 0 auto 3rem;
  max-width: 32ch;
  color: var(--ed-fg);
}
.ed-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.ed-btn {
  display: inline-block;
  padding: 1.1rem 2.2rem;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 0;
  transition: all 0.3s ease;
  border: 1px solid var(--ed-fg);
}
.ed-btn--primary {
  background: var(--ed-fg);
  color: var(--ed-fg-light);
}
.ed-btn--primary:hover {
  background: var(--ed-accent);
  border-color: var(--ed-accent);
}
.ed-btn--ghost {
  background: transparent;
  color: var(--ed-fg);
}
.ed-btn--ghost:hover {
  background: var(--ed-fg);
  color: var(--ed-fg-light);
}
.ed-cta-note {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ed-muted);
  margin: 0;
}
.ed-cta-note a { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- FOOTER ---------- */
.ed-footer {
  background: var(--ed-bg-dark);
  color: var(--ed-fg-light);
  /* Großzügiges Bottom-Padding, damit die Footer-Schlusszeile NICHT von
     den fixierten Floating-CTAs (WhatsApp links, „Direkt buchen" rechts)
     überdeckt wird. Floats sitzen bei bottom: 1.8rem und sind ~3.5rem hoch
     → Footer-Bottom muss > 5rem über dem Seitenende stehen. */
  padding: 6rem 3.2rem 6.5rem;
}
.ed-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--ed-line-dark);
}
.ed-footer-brand img {
  height: 80px;
  width: auto;
  filter: invert(1);
  margin-bottom: 1.6rem;
}
.ed-footer-brand p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ed-muted-dark);
  margin: 0 0 1rem;
}
.ed-coords-small {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 0.95rem !important;
  color: var(--ed-muted-dark) !important;
}
.ed-footer-col h4 {
  margin: 0 0 1.4rem;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ed-fg-light);
}
.ed-footer-col li { margin-bottom: 0.7rem; }
.ed-footer-col a {
  font-size: 0.95rem;
  color: var(--ed-muted-dark);
  transition: color 0.3s ease;
}
.ed-footer-col a:hover { color: var(--ed-fg-light); }
.ed-footer-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--ed-muted-dark);
  letter-spacing: 0.02em;
}
.ed-footer-bottom a {
  color: var(--ed-fg-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-credit {
  font-size: 0.8rem;
  opacity: 0.6;
  margin-top: 0.5rem;
  color: var(--ed-fg-light);
  letter-spacing: 0.04em;
}
.footer-credit sup { font-size: 0.7em; }
.footer-credit a {
  color: var(--ed-fg-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .ed-header { padding: 1.2rem 1.6rem; gap: 1.5rem; }
  .ed-header.is-scrolled { padding: 0.8rem 1.6rem; }
  .ed-section { padding: 6rem 1.6rem; }
  .ed-section--cta { padding: 8rem 1.6rem; }
  .ed-hero-title { left: 1.6rem; bottom: 6rem; }
  .ed-hero-meta { right: 1.6rem; }
  .ed-grid, .ed-grid--reverse {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .ed-thumbs { grid-template-columns: repeat(2, 1fr); }
  .ed-places-wrap { grid-template-columns: 1fr; }
  .ed-places { grid-template-columns: 1fr; }
  .ed-places li:nth-child(odd) { border-right: none; padding-right: 0; }
  .ed-places li:nth-child(even) { padding-left: 0; }
  /* Source-Block auf Mobile: gleiche Optik wie li-Items in 1-Spalten-Modus
     (kein Even-Padding-Left, ansonsten identisches Grid-Layout). */
  .ed-places-source {
    padding-left: 0;
  }
  .ed-footer-grid { grid-template-columns: 1fr 1fr; }
  .ed-spec { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .ed-nav { display: none; }
  .ed-header { grid-template-columns: auto 1fr; }
  .ed-brand img { height: 44px; }

  /* Hero auf Mobile: volle Viewport-Höhe, klare Drei-Block-Struktur */
  .ed-hero { min-height: 100svh; min-height: 100vh; }

  /* Meta oben rechts (unter Header) */
  .ed-hero-meta {
    top: 6rem;
    bottom: auto;
    right: 1.4rem;
    transform: none;
    gap: 0.25rem;
    max-width: calc(100% - 2.8rem);
  }
  .ed-meta-row {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }
  .ed-meta-row em { font-size: 0.85rem; letter-spacing: 0; }

  /* Titel mittig vertikal, kleinere Schrift, kein 12ch-Limit */
  .ed-hero-title {
    font-size: clamp(2.3rem, 11vw, 3.6rem);
    line-height: 0.98;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    left: 1.4rem;
    right: 1.4rem;
    max-width: none;
  }

  /* Stärkerer Abdunkel-Verlauf auf Mobil: die Headline sitzt hier mittig über
     teils hellen Fotos — so bleiben Titel, „am Golfplatz" und die Ortszeile
     zuverlässig lesbar. */
  .ed-hero-media::after {
    background: linear-gradient(180deg,
      rgba(5, 4, 11, 0.42) 0%,
      rgba(5, 4, 11, 0.40) 45%,
      rgba(5, 4, 11, 0.62) 78%,
      rgba(5, 4, 11, 0.78) 100%);
  }

  .ed-section-head { margin-bottom: 3rem; }
  .ed-thumbs { grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 3rem; margin-top: 3rem; }
  .ed-footer { padding: 5rem 1.6rem 5rem; }
  .ed-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .ed-footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
  }
  .ed-distances th { font-size: 0.95rem; }
  .ed-distances td:nth-child(3) { display: none; }
  /* Spec-Note auf Mobile wieder umbruchfähig — höhere Spezifität (#apartment),
     damit die spätere Basisregel `.ed-spec-note{white-space:nowrap}` nicht gewinnt */
  #apartment .ed-spec-note { white-space: normal; overflow-wrap: break-word; word-break: normal; }
}

/* =====================================================
   HERO CTAs
   ===================================================== */
.ed-hero-ctas {
  position: absolute;
  bottom: 3rem;
  right: 3.2rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  /* stretch statt flex-end: beide Buttons gleich breit (Breite des
     längeren Texts „Verfügbarkeit prüfen"), nicht mehr am eigenen
     Inhalt geschrumpft. */
  align-items: stretch;
  gap: 0.8rem;
}
.ed-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.6rem;
  border: 1px solid rgba(236, 231, 220, 0.5);
  color: var(--ed-fg-light);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  background: transparent;
}
.ed-hero-cta:hover {
  background: var(--ed-fg-light);
  color: var(--ed-fg);
  border-color: var(--ed-fg-light);
}
.ed-hero-cta--primary {
  background: var(--ed-fg-light);
  color: var(--ed-fg);
  border-color: var(--ed-fg-light);
}
.ed-hero-cta--primary:hover {
  background: var(--ed-accent);
  border-color: var(--ed-accent);
  color: var(--ed-fg-light);
}
/* Dritter Hero-Button: WhatsApp, nur auf Mobile (max-width: 720px). */
.ed-hero-cta--mobileonly { display: none; }
.ed-hero-cta span {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.ed-hero-cta em {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1;
}

/* =====================================================
   06 KONTAKT — Sektion + Formular
   ===================================================== */
.ed-grid--contact {
  grid-template-columns: 1fr 1.2fr;
  gap: 6rem;
}
.ed-contact-info .ed-lead em {
  font-family: var(--ed-serif);
  font-style: italic;
}
.ed-contact-list {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
}
.ed-contact-list > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ed-line-dark);
}
.ed-contact-list dt {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ed-muted-dark);
  font-weight: 500;
}
.ed-contact-list dd {
  margin: 0;
  font-size: 1rem;
  color: var(--ed-fg-light);
}
.ed-contact-list dd a {
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.ed-contact-list dd a:hover { border-bottom-color: var(--ed-fg-light); }
.ed-contact-list dd em {
  font-family: var(--ed-serif);
  font-style: italic;
}

/* ---------- Formular ---------- */
.ed-form-wrap {
  position: relative;
}
.ed-form {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.ed-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.ed-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ed-field > span {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ed-muted-dark);
  font-weight: 500;
}
.ed-field input,
.ed-field select,
.ed-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ed-line-dark);
  color: var(--ed-fg-light);
  font: inherit;
  font-size: 1rem;
  padding: 0.8rem 0;
  outline: none;
  border-radius: 0;
  transition: border-color 0.3s ease;
  width: 100%;
}
.ed-field textarea {
  resize: vertical;
  font-family: inherit;
}
.ed-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f5f1ea' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 12px;
  padding-right: 1.6rem;
}
.ed-field select option { background: var(--ed-bg-dark); color: var(--ed-fg-light); }
.ed-field input:focus,
.ed-field select:focus,
.ed-field textarea:focus {
  border-bottom-color: var(--ed-fg-light);
}
.ed-field input::placeholder,
.ed-field textarea::placeholder {
  color: var(--ed-muted-dark);
}
/* Date-Input Kalender-Icon hellschalten */
.ed-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

/* Honeypot */
.ed-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Checkbox — das ganze Label ist die Tappfläche (min. 44px hoch), das
   Häkchen selbst bleibt ein normal großes Kästchen (1.15rem). */
.ed-checkbox {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 44px;
  padding: 0.5rem 0;
  font-size: 0.85rem;
  color: var(--ed-muted-dark);
  line-height: 1.55;
  margin-top: 0.5rem;
  cursor: pointer;
}
.ed-checkbox input {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  accent-color: var(--ed-accent);
}
.ed-checkbox a {
  color: var(--ed-fg-light);
  border-bottom: 1px solid var(--ed-line-dark);
}
.ed-form-note {
  font-size: 0.85rem;
  color: var(--ed-muted-dark);
  line-height: 1.55;
  margin: -0.6rem 0 0;
}
.ed-form-note a {
  color: var(--ed-fg-light);
  border-bottom: 1px solid var(--ed-line-dark);
}

/* Vollbreite Button */
.ed-btn--full {
  width: 100%;
  margin-top: 1rem;
}

/* Buttons im Dark-Bereich (invertiert) */
.ed-section--inverted .ed-btn--primary {
  background: var(--ed-fg-light);
  color: var(--ed-fg);
  border-color: var(--ed-fg-light);
}
.ed-section--inverted .ed-btn--primary:hover {
  background: var(--ed-accent);
  border-color: var(--ed-accent);
  color: var(--ed-fg-light);
}

/* Erfolgs-/Fehler-Meldung */
.ed-form-feedback {
  padding: 2.4rem;
  border: 1px solid var(--ed-line-dark);
  text-align: center;
}
.ed-form-feedback h3 {
  font-family: var(--ed-sans);
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--ed-fg-light);
  letter-spacing: -0.01em;
}
.ed-form-feedback p {
  font-size: 0.95rem;
  color: var(--ed-muted-dark);
  margin: 0.4rem 0;
  line-height: 1.55;
}
.ed-form-feedback--success { border-color: var(--ed-accent); }
.ed-form-feedback-links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 1.4rem !important;
}
.ed-form-feedback a {
  color: var(--ed-fg-light);
  border-bottom: 1px solid var(--ed-line-dark);
}

/* =====================================================
   FLOATING CTAs
   ===================================================== */
.ed-float-cta {
  position: fixed;
  bottom: calc(1.8rem + env(safe-area-inset-bottom, 0px));
  right: 1.8rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.6rem;
  background: var(--ed-fg);
  color: var(--ed-fg-light);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--ed-fg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease, color 0.3s ease;
}
/* Über #buchen und #kontakt ausgeblendet (JS setzt .is-hidden-over-content).
   !important nötig: .is-visible (gleiche Spezifität, aber u. a. auch in der
   Mobile-Media-Query weiter unten definiert) würde sonst je nach Quellreihen-
   folge gewinnen, obwohl beide Klassen gleichzeitig auf dem Element stehen. */
.ed-float-cta.is-hidden-over-content,
.ed-float-whatsapp.is-hidden-over-content {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(20px) !important;
}
.ed-float-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.ed-float-cta:hover {
  background: var(--ed-accent);
  border-color: var(--ed-accent);
}
.ed-float-cta em {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
}

/* Floating WhatsApp */
.ed-float-whatsapp {
  position: fixed;
  bottom: calc(1.8rem + env(safe-area-inset-bottom, 0px));
  left: 1.8rem;
  z-index: 90;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ed-fg);
  color: var(--ed-fg-light);
  border: 1px solid var(--ed-fg);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ed-float-whatsapp:hover {
  background: var(--ed-accent);
  border-color: var(--ed-accent);
  transform: translateY(-2px);
}

/* Responsive für neue Komponenten */
@media (max-width: 1080px) {
  .ed-grid--contact { grid-template-columns: 1fr; gap: 3rem; }
  .ed-hero-ctas { right: 1.6rem; bottom: 2rem; }
}
@media (max-width: 720px) {
  /* Hero auf Mobile als vertikaler Stapel (Titel + Fakten, dann CTAs) am
     unteren Rand — verhindert das Überlappen der absolut positionierten
     Blöcke auf schmalen Screens. Der Bild-Hintergrund bleibt absolut. */
  .ed-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 1.4rem 1.6rem;
  }
  .ed-hero-ctas {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .ed-hero-cta {
    padding: 0.95rem 1.2rem;
    justify-content: space-between;
  }
  .ed-hero-cta span { font-size: 0.8rem; }
  /* Auf Mobile zusätzlich zum 360°-Rundgang den WhatsApp-Button zeigen */
  .ed-hero-cta--mobileonly { display: inline-flex; }
  .ed-form-row { grid-template-columns: 1fr; gap: 1.6rem; }
  .ed-contact-list > div { grid-template-columns: 1fr; gap: 0.3rem; }
  .ed-float-cta {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    right: 1rem;
    padding: 0.85rem 1.2rem;
    font-size: 0.76rem;
  }
  .ed-float-whatsapp {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    left: 1rem;
    width: 46px;
    height: 46px;
    /* Auf Mobile im Hero ausgeblendet, damit der Button die Hero-CTAs nicht
       überlappt. Wird per JS (.is-visible) ab ~halber Bildschirmhöhe eingeblendet
       — analog zum „Direkt buchen"-Button. Desktop bleibt unverändert sichtbar. */
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease, border-color 0.3s ease;
  }
  .ed-float-whatsapp.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* =====================================================
   MOBILE NAV (Wort-Toggle „Menü / Schließen")
   ===================================================== */
.ed-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--ed-fg-light);
  font-family: var(--ed-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0;
  min-height: 44px;
  line-height: 44px;
  cursor: pointer;
}
.ed-header.is-scrolled .ed-nav-toggle { color: var(--ed-fg); }
.ed-nav-toggle.is-open { color: var(--ed-fg-light); }

.ed-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--ed-bg-dark);
  color: var(--ed-fg-light);
  padding: 7rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
}
.ed-mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}
.ed-mobile-nav ol {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ed-mobile-nav li { border-bottom: 1px solid var(--ed-line-dark); }
.ed-mobile-nav a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.4rem 0;
  font-family: var(--ed-sans);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ed-fg-light);
  transition: opacity 0.3s ease;
}
.ed-mobile-nav a:hover { opacity: 0.65; }
.ed-mobile-nav a span {
  font-family: var(--ed-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  color: var(--ed-muted-dark);
  min-width: 2ch;
}
.ed-mobile-nav-foot {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ed-line-dark);
  font-size: 0.85rem;
  color: var(--ed-muted-dark);
}
.ed-mobile-nav-foot a {
  color: var(--ed-fg-light);
  text-decoration: none;
}
.ed-mobile-nav-foot em {
  font-family: var(--ed-serif);
  font-style: italic;
  color: var(--ed-muted-dark);
  margin-right: 0.5rem;
}

/* =====================================================
   ASYMMETRISCHE EDITORIAL-GALERIE (Sektion 01)
   ===================================================== */
.ed-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.6rem;
  margin-top: 5rem;
  padding-top: 5rem;
  border-top: 1px solid var(--ed-line);
}
.ed-gallery-item {
  display: block;
  position: relative;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.ed-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.ed-gallery-item:hover img { transform: scale(1.03); }
.ed-gallery-item picture {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.ed-gallery-item--col4 { grid-column: span 4; }
.ed-gallery-item--col6 { grid-column: span 6; }
.ed-gallery-item--col8 { grid-column: span 8; }

/* Großes Bild über 2 Reihen — flankierende col4-Items rutschen daneben
   in den freien Slot. Nur Desktop (Mobile stapelt sowieso vertikal). */
@media (min-width: 1081px) {
  .ed-gallery-item--rowspan2 { grid-row: span 2; }
  .ed-gallery-item--rowspan2 picture {
    aspect-ratio: auto;   /* überschreibt das globale 4/3 */
    height: 100%;
  }
  .ed-gallery-item--rowspan2 picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.ed-gallery-item figcaption {
  display: block;
  margin-top: 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ed-muted);
}
.ed-gallery-item figcaption em {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1rem;
  margin-right: 0.4rem;
}

/* Tablet: sauberes 2-Spalten-Raster; große Bilder über die volle Breite. */
@media (max-width: 860px) {
  .ed-gallery { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .ed-gallery-item--col4,
  .ed-gallery-item--col6 { grid-column: span 1; }
  .ed-gallery-item--col8,
  .ed-gallery-item--rowspan2 { grid-column: span 2; }
}
/* Phone: einspaltig. */
@media (max-width: 520px) {
  .ed-gallery { grid-template-columns: 1fr; gap: 1.2rem; }
  .ed-gallery-item--col4,
  .ed-gallery-item--col6,
  .ed-gallery-item--col8,
  .ed-gallery-item--rowspan2 { grid-column: span 1; }
}

/* =====================================================
   FAQ-AKKORDEON (Sektion 06) — editorial, kein +/−
   ===================================================== */
.ed-faq {
  max-width: 900px;
  margin: 0 auto;
}
.ed-faq-item {
  border-top: 1px solid var(--ed-line);
}
.ed-faq-item:last-of-type { border-bottom: 1px solid var(--ed-line); }
.ed-faq-item summary {
  display: grid;
  grid-template-columns: 4ch 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.8rem 0;
  cursor: pointer;
  list-style: none;
  transition: padding 0.3s ease;
}
.ed-faq-item summary::-webkit-details-marker { display: none; }
.ed-faq-item summary:hover .ed-faq-q { opacity: 0.6; }
.ed-faq-num {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ed-muted);
}
.ed-faq-q {
  font-family: var(--ed-serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ed-fg);
  transition: opacity 0.3s ease;
}
.ed-faq-mark {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--ed-muted);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
}
.ed-faq-item[open] .ed-faq-mark {
  transform: rotate(90deg);
  color: var(--ed-fg);
}
.ed-faq-a {
  padding: 0 0 2rem calc(4ch + 1.5rem);
  max-width: 60ch;
}
.ed-faq-a p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ed-muted);
}
.ed-faq-a a {
  color: var(--ed-fg);
  border-bottom: 1px solid var(--ed-line);
  padding-bottom: 1px;
  transition: border-color 0.3s ease;
}
.ed-faq-a a:hover { border-bottom-color: var(--ed-fg); }

@media (max-width: 720px) {
  .ed-faq-item summary {
    grid-template-columns: 3ch 1fr auto;
    gap: 1rem;
    padding: 1.4rem 0;
  }
  .ed-faq-q { font-size: 1.2rem; }
  .ed-faq-a { padding-left: calc(3ch + 1rem); }
}

/* =====================================================
   BUCHUNGS-WIDGET (Smoobu in Sektion 05)
   ===================================================== */
.ed-booking-wrap {
  max-width: 1080px;
  margin: 5rem auto 0;
  padding-top: 4rem;
  border-top: 1px solid var(--ed-line);
}
.ed-booking-rule {
  text-align: center;
  margin-bottom: 3rem;
}
.ed-booking-rule-label {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ed-muted);
  font-weight: 500;
}
.ed-booking-rule-label em {
  font-family: var(--ed-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  margin-right: 0.4rem;
}
.ed-smoobu-widget {
  min-height: 480px;
  background: rgba(5, 4, 11, 0.03);
  border: 1px solid var(--ed-line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.ed-smoobu-placeholder {
  text-align: center;
  max-width: 480px;
}
/* Sobald Smoobu sein <iframe> in den Container gerendert hat,
   verschwindet der Editorial-Fallback. So bleibt der Placeholder
   nur sichtbar, wenn Smoobu aus irgendeinem Grund nicht lädt
   (Adblocker, Netzwerkfehler, Wartung). */
.ed-smoobu-widget:has(iframe) .ed-smoobu-placeholder {
  display: none;
}
.ed-smoobu-widget:has(iframe) {
  display: block;          /* Flex-Zentrierung weg, Iframe darf volle Breite */
  background: transparent;
  border: none;
  min-height: 0;
  padding: 0;
}
.ed-smoobu-placeholder .ed-label {
  display: block;
  margin-bottom: 1rem;
}
.ed-smoobu-placeholder h3 {
  font-family: var(--ed-sans);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  line-height: 1.15;
}
.ed-smoobu-placeholder p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ed-muted);
  margin: 0 0 1.6rem;
}
/* Sekundärer Hinweis unter dem Einwilligungs-Button (2-Klick-Lösung) */
.ed-smoobu-placeholder .ed-smoobu-alt {
  font-size: 0.85rem;
  margin: 1.4rem 0 0;
}


/* =====================================================
   LIGHTBOX
   ===================================================== */
.ed-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* weiches Charcoal statt reinem Schwarz */
  background: rgba(17, 17, 17, 0.975);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  /* Fade statt hartem display-Wechsel → cineastisches Ein-/Ausblenden */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.ed-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  /* Blur NUR im offenen Zustand → keine GPU-Last, wenn geschlossen */
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: opacity 0.45s ease;
}
.ed-lightbox > img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;   /* Seitenverhältnis bleibt immer erhalten */
  width: auto;
  height: auto;
  opacity: 0;
  transform: scale(0.965);   /* sanfter Zoom-In beim Öffnen */
  transition:
    opacity 0.34s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ed-lightbox.is-open > img { opacity: 1; transform: scale(1); }
/* Bildwechsel beim Blättern: nur Fade, kein erneuter Zoom */
.ed-lightbox.is-switching > img { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ed-lightbox,
  .ed-lightbox.is-open,
  .ed-lightbox > img { transition: opacity 0.2s ease; }
  .ed-lightbox > img { transform: none; }
  .ed-lightbox.is-open > img { transform: none; }
}
.ed-lightbox-close,
.ed-lightbox-prev,
.ed-lightbox-next {
  position: absolute;
  background: transparent;
  border: none;
  color: var(--ed-fg-light);
  cursor: pointer;
  font-family: var(--ed-serif);
  font-weight: 300;
  line-height: 1;
  padding: 0.5rem 1rem;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ed-lightbox-close:hover,
.ed-lightbox-prev:hover,
.ed-lightbox-next:hover { opacity: 0.65; }
.ed-lightbox-close {
  top: 1.5rem;
  right: 2rem;
  font-size: 2.4rem;
}
.ed-lightbox-prev,
.ed-lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 3.6rem;
}
.ed-lightbox-prev { left: 1.5rem; }
.ed-lightbox-next { right: 1.5rem; }
.ed-lightbox-prev:hover { transform: translateY(-50%) translateX(-4px); }
.ed-lightbox-next:hover { transform: translateY(-50%) translateX(4px); }
.ed-lightbox-caption {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--ed-muted-dark);
  margin: 0;
  text-align: center;
  max-width: 80%;
}
.ed-lightbox-caption em {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ed-fg-light);
  margin-right: 0.4rem;
}

/* =====================================================
   RESPONSIVE OVERRIDES für neue Komponenten
   ===================================================== */
@media (max-width: 860px) {
  .ed-nav-toggle { display: inline-block; }
  .ed-nav { display: none; }
  .ed-contact { display: none; }
  .ed-header { grid-template-columns: auto 1fr; }
  .ed-mobile-nav a { font-size: 1.2rem; padding: 1.1rem 0; }
  .ed-booking-wrap { margin-top: 3rem; padding-top: 3rem; }
  .ed-smoobu-widget { min-height: 360px; padding: 1.5rem; }
}
@media (max-width: 480px) {
  .ed-lightbox { padding: 1rem; }
  .ed-lightbox-close { top: 0.8rem; right: 0.8rem; font-size: 2rem; }
  .ed-lightbox-prev { left: 0.2rem; font-size: 3rem; }
  .ed-lightbox-next { right: 0.2rem; font-size: 3rem; }
  .ed-lightbox-caption { bottom: 1rem; font-size: 0.78rem; }
}

/* =====================================================
   IDEAL-FÜR-BLOCK (Long-Tail-Keywords nach 01 / Apartment)
   ===================================================== */
.ed-ideal {
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid currentColor;
}
.ed-ideal-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 clamp(2rem, 4vw, 3rem) 0;
  letter-spacing: -0.01em;
}
.ed-ideal-title em { font-style: italic; }
.ed-ideal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.ed-ideal-grid > div {
  padding-top: 1rem;
  border-top: 1px solid currentColor;
}
.ed-ideal-grid h4 {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 0.75rem 0;
}
.ed-ideal-grid p {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  opacity: 0.88;
}
@media (max-width: 640px) {
  .ed-ideal-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* =====================================================
   02b STIMMEN — Social Proof
   ===================================================== */
.ed-reviews {
  background: var(--ed-bg);
}
/* Karussell statt festem Raster: eine Reihe, schmalere Karten, wischbar.
   Bühne (.ed-reviews-stage) trägt den Scroll, .ed-reviews-grid ist die
   Schienen-Breite (width:max-content) — gleiches Prinzip wie bei der
   Apartment-Galerie (.hg-stage / .hg-track). */
.ed-reviews-carousel { position: relative; }
.ed-reviews-stage {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.ed-reviews-stage::-webkit-scrollbar { display: none; }
.ed-reviews-stage.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.ed-reviews-grid {
  display: flex;
  width: max-content;
  gap: 2.4rem;
  align-items: stretch;
  padding: 0 2px 0.4rem;
}
.ed-reviews-item {
  margin: 0;
  width: min(84vw, 340px);
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ed-line);
}
.ed-reviews-mark {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 3.4rem;
  line-height: 0.6;
  color: var(--ed-accent);
}
.ed-reviews-quote {
  font-family: var(--ed-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.32;
  color: var(--ed-fg);
  margin: 0;
}
.ed-reviews-nav {
  display: flex;
  gap: 0.8rem;
  justify-content: flex-end;
  margin-top: 2rem;
}
.ed-reviews-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ed-line);
  background: transparent;
  color: var(--ed-fg);
  font-family: var(--ed-serif);
  font-size: 1.3rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.ed-reviews-arrow:hover:not(:disabled) {
  background: var(--ed-fg);
  color: var(--ed-fg-light);
  border-color: var(--ed-fg);
}
.ed-reviews-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.ed-reviews-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: auto;
}
.ed-reviews-source {
  font-family: var(--ed-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ed-fg);
}
.ed-reviews-author {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ed-muted);
}
.ed-reviews-link {
  margin-top: 0.6rem;
  font-family: var(--ed-sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ed-fg);
  border-bottom: 1px solid var(--ed-line);
  padding-bottom: 1px;
  align-self: flex-start;
  transition: border-color 0.3s ease;
}
.ed-reviews-link:hover {
  border-bottom-color: var(--ed-fg);
}
@media (max-width: 640px) {
  .ed-reviews-grid { gap: 1.6rem; }
  .ed-reviews-item { width: 84vw; }
}

/* =====================================================
   NEWSLETTER — Saisonbrief aus Hohenlohe
   ===================================================== */
.ed-newsletter {
  max-width: 480px;
  margin: 4rem auto 3rem;
  text-align: center;
  padding: 3rem 0 2rem;
  border-top: 1px solid var(--ed-line-dark);
  border-bottom: 1px solid var(--ed-line-dark);
}
.ed-newsletter-title {
  font-family: var(--ed-sans);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ed-fg-light);
  margin: 0 0 0.5rem;
}
.ed-newsletter-sub {
  margin: 0 0 1.8rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ed-muted-dark);
}
.ed-newsletter-sub em {
  font-family: var(--ed-serif);
  font-style: italic;
}
.ed-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}
.ed-newsletter-field {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--ed-line-dark);
  transition: border-color 0.3s ease;
}
.ed-newsletter-field:focus-within {
  border-bottom-color: var(--ed-fg-light);
}
.ed-newsletter-field input[type="email"] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  font-size: 1rem;
  padding: 0.85rem 0;
  color: var(--ed-fg-light);
}
.ed-newsletter-field input::placeholder {
  color: var(--ed-muted-dark);
}
.ed-newsletter-submit {
  background: transparent;
  border: none;
  color: var(--ed-fg-light);
  font-family: var(--ed-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.85rem 0 0.85rem 1rem;
  cursor: pointer;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.ed-newsletter-submit:hover { color: var(--ed-accent); }
.ed-newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--ed-muted-dark);
  line-height: 1.55;
}
.ed-newsletter-consent input {
  margin-top: 0.25rem;
  flex-shrink: 0;
  accent-color: var(--ed-accent);
}
.ed-newsletter-consent a {
  color: var(--ed-fg-light);
  border-bottom: 1px solid var(--ed-line-dark);
}
.ed-newsletter-note {
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--ed-muted-dark);
  margin: 0;
}

/* Screen-reader-only Utility */
.ed-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================
   === Hero Scroll-Indicator (zurückgeholt) ===
   ===================================================== */
.ed-hero-scroll {
  position: absolute;
  bottom: 2.4rem;
  /* mittig unten zentriert — über left/right/margin (nicht transform),
     damit die Hero-Entrance-Animation (translateY) erhalten bleibt */
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  z-index: 2;
  display: flex;
  flex-direction: column-reverse;   /* „scroll" oben, Linie darunter */
  align-items: center;
  gap: 0.7rem;
  color: var(--ed-fg-light);
}
.ed-hero-scroll span {
  display: block;
  width: 1px;
  height: 40px;
  background: var(--ed-fg-light);
  opacity: 0.6;
}
.ed-hero-scroll em {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* Scroll-Indicator nur auf Desktop sichtbar; auf Tablet & Mobile ausblenden */
@media (max-width: 1080px) {
  .ed-hero-scroll { display: none; }
}

/* =====================================================
   === Inverted Reviews (Stimmen-Sektion auf dunkel) ===
   ===================================================== */
.ed-section--inverted.ed-reviews {
  background: var(--ed-bg-dark);
}
.ed-section--inverted .ed-reviews-item {
  border-top-color: var(--ed-line-dark);
}
.ed-section--inverted .ed-reviews-mark {
  /* Gold-Akzent bleibt — funktioniert auf hell wie dunkel */
  color: var(--ed-accent);
}
.ed-section--inverted .ed-reviews-quote {
  color: var(--ed-fg-light);
}
.ed-section--inverted .ed-reviews-source {
  color: var(--ed-fg-light);
}
.ed-section--inverted .ed-reviews-author {
  color: var(--ed-muted-dark);
}
.ed-section--inverted .ed-reviews-link {
  color: var(--ed-fg-light);
  border-bottom-color: var(--ed-line-dark);
}
.ed-section--inverted .ed-reviews-link:hover {
  border-bottom-color: var(--ed-fg-light);
}
.ed-section--inverted .ed-reviews-arrow {
  border-color: var(--ed-line-dark);
  color: var(--ed-fg-light);
}
.ed-section--inverted .ed-reviews-arrow:hover:not(:disabled) {
  background: var(--ed-accent);
  border-color: var(--ed-accent);
  color: var(--ed-fg-light);
}

/* =====================================================
   === Newsletter Perks (drei Vorteils-Bullets) ===
   ===================================================== */
.ed-newsletter-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ed-muted-dark);
}
.ed-newsletter-perks li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
}
.ed-newsletter-perks li span {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ed-accent);
  flex-shrink: 0;
  line-height: 1;
}

/* =====================================================
   === Script Font (Caveat) — echte Handschrift ===
   ===================================================== */
/* em.ed-script mitgeführt, damit die Script-Schrift kontextuelle
   em-Regeln (z. B. .ed-h2 em → Cormorant) sicher überschreibt. */
.ed-script,
em.ed-script {
  /* Allura — elegante moderne Kalligrafie, ähnlich Beautyful ES, frei (OFL).
     Fallback-Kette: → Caveat → Cormorant Garamond italic → generisches cursive. */
  font-family: 'Allura', 'Caveat', 'Cormorant Garamond', cursive;
  font-style: normal;       /* überschreibt em-Italic */
  font-weight: 400;
  font-size: 1.5em;         /* Allura wirkt durch dünnere Striche optisch kleiner */
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--ed-accent);  /* Goldakzent passend zur Editorial-Palette */
}

/* ============================================================
   SPEC-NOTIZ — Verweis zum Buchungskalender
   ============================================================ */

.ed-spec-note {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-family: "Inter", sans-serif;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ed-muted, #6a6a6a);
  max-width: none;        /* überschreibt das 50ch-Limit aus .ed-text p */
  white-space: nowrap;    /* erzwingt eine Zeile */
}

.ed-spec-note em {
  font-style: normal;
  color: var(--ed-muted, #9a9a9a);
  margin-right: 0.4rem;
}

.ed-spec-note a {
  color: var(--ed-text, #2a2a2a);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 0.15s ease;
}

.ed-spec-note a:hover {
  text-decoration-thickness: 2px;
}

/* ============================================================
   GASTGEBER-SEKTION — vertikale Harmonie zwischen Hochformat-
   Foto und Text. Text-Spalte mittig zum Foto, dezent eingerückt.
   ============================================================ */

#gastgeber .ed-grid {
  align-items: center;
  gap: 6rem;
}
#gastgeber .ed-text {
  padding-top: 0;
}
#gastgeber .ed-quote {
  max-width: none;
}
#gastgeber .ed-perks {
  margin-top: 1.5rem;
}
#gastgeber .ed-figure--portrait img {
  max-height: 760px;
  width: 100%;
  height: auto;
  /* Bildausschnitt nach oben verschieben, damit der Kopf der Tochter
     oben nicht abgeschnitten wird. 50 % 18 % = horizontal mittig,
     vertikal nur 18 % vom oberen Rand wegschneiden statt 50 %. */
  object-position: 50% 18%;
}
@media (max-width: 1080px) {
  #gastgeber .ed-grid {
    gap: 3rem;
  }
}

/* ============================================================
   HERO-BRAND — kleiner Markenname über der H1
   ============================================================ */

.ed-hero-brand {
  display: flex;                 /* eigene Zeile, Auftaktlinie + Text in einer Reihe */
  align-items: center;
  gap: 0.9rem;
  white-space: nowrap;           /* einzeilig — kein gequetschter Umbruch mehr */
  font-family: var(--ed-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 1.9rem;
  color: var(--ed-accent);
  line-height: 1;
}
.ed-hero-brand::before {         /* dezente goldene Auftaktlinie (editorial) */
  content: "";
  flex: none;
  width: 2.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
@media (max-width: 720px) {
  .ed-hero-brand {
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    gap: 0.7rem;
    margin-bottom: 1.3rem;
  }
  .ed-hero-brand::before { width: 1.7rem; }
}

/* ============================================================
   APARTMENT-SEKTION — vertikale Harmonie zwischen Foto und Text.
   Foto streckt sich auf die Höhe der Textspalte; kein leeres
   Weiß mehr unter dem Bild, wenn Copy länger ist.
   ============================================================ */

@media (min-width: 1081px) {
  #apartment > .ed-grid {
    align-items: stretch;
    gap: 5rem;
  }
  #apartment > .ed-grid > .ed-figure--lg {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
  }
  #apartment > .ed-grid > .ed-figure--lg picture {
    flex: 1 1 auto;
    display: block;
    min-height: 0;
    overflow: hidden;
  }
  #apartment > .ed-grid > .ed-figure--lg picture img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;        /* überschreibt globale 3 / 2 */
    object-fit: cover;
    object-position: center;
    display: block;
  }
  #apartment > .ed-grid > .ed-figure--lg figcaption {
    flex: 0 0 auto;
    margin-top: 1rem;
  }
  /* Text-Spalte: oben bündig mit dem Foto, kein zusätzlicher Top-Padding */
  #apartment > .ed-grid > .ed-text {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  /* Spec-Liste & Note nach unten drücken, damit sie nicht „in der Luft hängen" */
  #apartment > .ed-grid > .ed-text .ed-spec {
    margin-top: auto;
  }
}

/* ============================================================
   APARTMENT-SEKTION — typografische Verfeinerung
   Vereinheitlichte Schriftgrößen, Gewichte und Rhythmus.
   ============================================================ */

/* Lead + Fließtext: einheitliche Lesetypografie, weicherer Rhythmus */
#apartment .ed-lead {
  font-size: 1.12rem;
  line-height: 1.65;
  font-weight: 400;
  color: var(--ed-fg);
  margin-bottom: 1.8rem;
}
#apartment .ed-text p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ed-fg);
  margin-bottom: 1.4rem;
}

/* <strong>: editorial-sanft (Inter 600), kein 700-Browser-Bold */
#apartment .ed-text p strong {
  font-weight: 600;
  color: var(--ed-fg);
  /* leicht erhöhtes Letter-Spacing dämpft den Bold-Eindruck zusätzlich */
  letter-spacing: -0.005em;
}

/* Spec-Liste: ruhigerer Rhythmus, gleichmäßige Ziffern, gleiche Optik
   für reine Zahlen-Werte und reine Text-Werte */
#apartment .ed-spec {
  margin-top: 2.6rem;
  row-gap: 0;
}
#apartment .ed-spec > div {
  padding: 1rem 0;
}
#apartment .ed-spec dt {
  font-family: var(--ed-sans);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ed-muted);
}
#apartment .ed-spec dd {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: right;
  margin: 0;
  color: var(--ed-fg);
  /* Tabular Lining Numerals: alle Ziffern gleich breit und gleich hoch.
     So wirken „55 m²", „15:00 Uhr" und „4 Personen" als eine einzige
     visuelle Spalte — kein Sprung mehr zwischen Zahlen- und Textwerten. */
  font-variant-numeric: lining-nums tnum;
  font-feature-settings: "lnum", "tnum";
}

/* Spec-Note: gleiche Bauhöhe wie die Spec-Reihen darüber, damit sie
   sich als „eleganter Abschluss" anschließt und nicht abreißt */
#apartment .ed-spec-note {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--ed-line);
  font-family: var(--ed-sans);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  line-height: 1.55;
  color: var(--ed-muted);
}
#apartment .ed-spec-note em {
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ed-fg);
  margin-right: 0.5rem;
}
#apartment .ed-spec-note a {
  color: var(--ed-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ============================================================
   LAGE-SEKTION — editoriale Bildführung:
   Foto wird nach oben gezogen, sodass es neben (statt unter) der
   großen Headline „Lage der Ferienwohnung …" steht, und leicht
   nach links in den Gutter, damit die rechte Cremefläche oben
   nicht mehr leer wirkt.
   Nur Desktop — auf Mobile bleibt der gestapelte Lauf erhalten.
   ============================================================ */

@media (min-width: 1081px) {
  /* Headline-Block darf nicht die volle Breite beanspruchen, damit das
     Foto rechts daneben hochkommen kann */
  #lage > .ed-section-head {
    max-width: 60%;
    margin-bottom: 4rem;
  }
  /* Grid: Foto rückt in der vertikalen Achse hoch + leicht nach links */
  #lage > .ed-grid > .ed-figure {
    margin-top: -22rem;   /* hebt das Foto bis auf Headline-Höhe an */
    margin-left: -3rem;   /* leichter Schub in den Gutter */
    align-self: start;
  }
  /* Text-Spalte unter der Headline darf etwas mehr Luft nach oben atmen */
  #lage > .ed-grid > .ed-text {
    padding-top: 0;
  }
}

/* ============================================================
   FIGURE-MAP — Satellitenkarte in der Lage-Sektion
   Klickbar (öffnet Google Maps mit Route), kein Aspect-Crop,
   editorial dezente Attribution.
   ============================================================ */
.ed-figure--map > a {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.ed-figure--map img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;      /* typisches Maps-Screenshot-Verhältnis */
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.ed-figure--map > a:hover img {
  transform: scale(1.015);    /* dezenter Magazine-Hover */
}
/* Hint-Overlay rechts unten — erscheint beim Hover */
.ed-figure--map > a::after {
  content: "↗ in Karten öffnen";
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  font-family: var(--ed-sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  background: rgba(5, 4, 11, 0.78);
  color: #ece7dc;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.ed-figure--map > a:hover::after {
  opacity: 1;
  transform: translateY(0);
}
/* Mini-Attribution unter der Bildunterschrift */
.ed-figure-attr {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--ed-sans);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ed-muted);
  text-transform: none;
}
.ed-figure-attr a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.ed-figure-attr a:hover { color: var(--ed-fg); }

/* ============================================================
   SECTION-SUB — kleiner italischer Tagline unter der H2.
   Aktuell verwendet in Section 01 (Das Apartment).
   ============================================================ */
.ed-section-sub {
  margin: 1.2rem 0 0;
  font-family: var(--ed-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--ed-muted);
  max-width: none;       /* keine 50ch-Schranke mehr */
  white-space: nowrap;   /* erzwingt eine Zeile auf Desktop */
}
.ed-section-sub em {
  /* doppelt italic = normal — also gleiche Schrift, aber mit Goldakzent
     als zarter Pointe-Hinweis */
  font-style: italic;
  color: var(--ed-accent);
}
@media (max-width: 720px) {
  .ed-section-sub {
    font-size: 1.05rem;
    margin-top: 1rem;
    white-space: normal;   /* auf Mobile wieder umbruchfähig */
  }
}

/* ============================================================
   CINEMA — Sticky-Scroll-Foto-Block (nur in index-cinema.html
   gerendert). Bewusst hell + editorial, kein dunkler Premium-
   Look. Komplett gescoped auf .ed-cinema-* / .ed-scene-*,
   greift nicht in das Standard-Layout ein.
   ============================================================ */

.ed-cinema {
  position: relative;
  height: 500vh;                 /* 5 Szenen × Viewport */
  margin-top: 5rem;
  background: #f6f3ee;
}
.ed-cinema-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #f6f3ee;
}

/* ---------- Bildschichten ---------- */
.ed-cinema-scenes {
  position: absolute;
  inset: 0;
}
.ed-cinema-scene {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.ed-cinema-scene.is-active {
  opacity: 1;
}
.ed-cinema-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---------- Dunkler Veil von links für Lesbarkeit ---------- */
.ed-cinema-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(5, 4, 11, 0.72) 0%,
    rgba(5, 4, 11, 0.55) 28%,
    rgba(5, 4, 11, 0.22) 58%,
    rgba(5, 4, 11, 0.00) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ---------- Caption-Block links unten ---------- */
.ed-cinema-captions {
  position: absolute;
  left: 5rem;
  bottom: 5rem;
  width: min(560px, 50vw);
  pointer-events: none;
  z-index: 2;
}
.ed-cinema-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.ed-cinema-caption.is-active {
  opacity: 1;
  transform: translateY(0);
}
.ed-cinema-num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.6rem;
  color: #d4b483;          /* Gold heller, damit auf Dunkel sichtbar */
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
  line-height: 1;
}
.ed-cinema-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #f6f3ee;          /* Off-White auf Dunkel */
  margin: 0 0 1.2rem;
}
.ed-cinema-title em {
  font-style: italic;
  font-weight: 400;
}
.ed-cinema-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: rgba(246, 243, 238, 0.78);   /* Off-White mit leichter Dämpfung */
  margin: 0;
  max-width: 38ch;
}

/* ---------- Vertikale Navigation rechts mittig ---------- */
.ed-cinema-nav {
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  z-index: 3;
}
.ed-cinema-dot {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: transparent;
  border: 0;
  padding: 0.4rem 0;
  color: rgba(246, 243, 238, 0.65);   /* hell, leicht gedämpft */
  cursor: pointer;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.04em;
  opacity: 1;
  transition: color 0.3s ease;
  /* Leichter Text-Shadow für Lesbarkeit am rechten (helleren) Bildrand */
  text-shadow: 0 1px 8px rgba(5, 4, 11, 0.6);
}
.ed-cinema-dot:hover { color: rgba(246, 243, 238, 0.9); }
.ed-cinema-dot.is-active {
  color: #d4b483;          /* aktiv = Goldakzent */
}
.ed-cinema-line {
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ed-cinema-dot.is-active .ed-cinema-line { width: 40px; }
.ed-cinema-roman {
  display: inline-block;
  min-width: 2.2em;
}

/* ---------- Einmaliger Scroll-Hint rechts unten ---------- */
.ed-cinema-hint {
  position: absolute;
  right: 3rem;
  bottom: 2.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(246, 243, 238, 0.75);
  text-shadow: 0 1px 8px rgba(5, 4, 11, 0.5);
  opacity: 1;
  transition: opacity 0.6s ease;
  z-index: 3;
  pointer-events: none;
}
.ed-cinema-hint.is-hidden {
  opacity: 0;
}

/* ---------- Mobile (≤720 px) ---------- */
@media (max-width: 720px) {
  .ed-cinema-veil {
    background: linear-gradient(180deg,
      rgba(5, 4, 11, 0.00) 0%,
      rgba(5, 4, 11, 0.20) 35%,
      rgba(5, 4, 11, 0.65) 65%,
      rgba(5, 4, 11, 0.85) 100%);
  }
  .ed-cinema-captions {
    left: 1.4rem;
    right: 1.4rem;
    bottom: 3.5rem;
    width: auto;
  }
  .ed-cinema-num    { font-size: 1.2rem; margin-bottom: 0.7rem; }
  .ed-cinema-title  { font-size: clamp(2rem, 9vw, 2.6rem); margin-bottom: 0.8rem; }
  .ed-cinema-sub    { font-size: 1.05rem; max-width: none; }
  .ed-cinema-nav    { right: 1rem; gap: 1rem; }
  .ed-cinema-dot    { font-size: 0.85rem; }
  .ed-cinema-line   { width: 12px; }
  .ed-cinema-dot.is-active .ed-cinema-line { width: 28px; }
  .ed-cinema-hint   { display: none; }
}

/* ---------- Reduced motion: keine Crossfades ---------- */
@media (prefers-reduced-motion: reduce) {
  .ed-cinema-scene,
  .ed-cinema-caption,
  .ed-cinema-line { transition: none !important; }
}

/* ============================================================
   MOTION — Dezente cinematische Bewegung
   Drei Effekte: Scroll-Reveal, Ken-Burns-Zoom, Tilt-on-Hover.
   Double-gated: nur wenn html.js gesetzt UND prefers-reduced-
   motion ≠ reduce. Tilt zusätzlich nur auf Hover-Geräten.
   ============================================================ */

/* ---------- 1) Scroll-Reveal (fade + 24 px up) ----------
   Nur noch .ed-figure: die Galerie-Items bekommen ihren eigenen,
   robusten Reveal über Motion One (siehe editorial.js). Ihr Startzustand
   wird dort per JS gesetzt — so kann nichts dauerhaft verborgen bleiben. */
@media (prefers-reduced-motion: no-preference) {
  html.js .ed-figure {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  html.js .ed-figure.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- 2) Ken-Burns: Hero + große Figur ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .ed-hero-media img,
  html.js .ed-figure--lg picture img {
    will-change: transform;
    /* Sehr kurze Transition für sanftes Catch-up bei schnellem Scrollen */
    transition: transform 120ms linear;
  }
}

/* ---------- 3) (Tilt-on-Hover entfernt) ----------
   Die Galerie-Hover-Veredelung (langsamer Zoom + Caption-Fade) liegt
   jetzt im konsolidierten Galerie-Block am Dateiende. */

/* ============================================================
   MOTION+ — Erweiterte Reveals, inspiriert von den gestaffelten
   Szenen-Animationen der Figma-Flows (Hero-Entrance + Textblöcke).
   (Die Section-Heads übernimmt bereits der MOTION-LIB-Block in
   editorial.js — hier daher bewusst NICHT noch einmal.)
   Gleiche Double-Gate-Logik wie oben: greift NUR bei html.js UND
   prefers-reduced-motion ≠ reduce, damit No-JS- und Reduced-Motion-
   Nutzer immer alles sofort sehen. Easing & Timing identisch zum
   bestehenden Reveal (cubic-bezier 0.22, 1, 0.36, 1), nur gestaffelt.
   ============================================================ */

/* ---------- 4) Hero-Entrance (gestaffelt beim Laden) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .ed-hero-title,
  html.js .ed-hero-ctas,
  html.js .ed-hero-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
      transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  /* Meta-Zeilen gleiten dezent von rechts herein */
  html.js .ed-hero-meta .ed-meta-row {
    opacity: 0;
    transform: translateX(20px);
    transition:
      opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }

  /* Auslöser: .is-entered wird per JS kurz nach Page-Load gesetzt */
  html.js .ed-hero.is-entered .ed-hero-title,
  html.js .ed-hero.is-entered .ed-hero-ctas,
  html.js .ed-hero.is-entered .ed-hero-scroll {
    opacity: 1;
    transform: translateY(0);
  }
  html.js .ed-hero.is-entered .ed-hero-meta .ed-meta-row {
    opacity: 1;
    transform: translateX(0);
  }

  /* Staffelung der Hero-Elemente */
  html.js .ed-hero.is-entered .ed-hero-title  { transition-delay: 0.15s; }
  html.js .ed-hero.is-entered .ed-hero-ctas   { transition-delay: 0.45s; }
  html.js .ed-hero.is-entered .ed-hero-scroll { transition-delay: 0.70s; }
  html.js .ed-hero.is-entered .ed-meta-row:nth-child(1) { transition-delay: 0.45s; }
  html.js .ed-hero.is-entered .ed-meta-row:nth-child(2) { transition-delay: 0.53s; }
  html.js .ed-hero.is-entered .ed-meta-row:nth-child(3) { transition-delay: 0.61s; }
  html.js .ed-hero.is-entered .ed-meta-row:nth-child(4) { transition-delay: 0.69s; }
  html.js .ed-hero.is-entered .ed-meta-row:nth-child(5) { transition-delay: 0.77s; }
}

/* ---------- 5) Textblock-Reveal (sanftes Aufsteigen) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .ed-text {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  html.js .ed-text.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   SKIP-LINK — sichtbar nur bei Tastatur-Fokus.
   Erweitert .ed-sr-only um einen Focus-State für a11y.
   ============================================================ */
.ed-skip-link:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: auto;
  height: auto;
  padding: 0.85rem 1.4rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  background: #05040b;
  color: #ece7dc;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid #ece7dc;
  z-index: 9999;
  outline: 2px solid #80664e;
  outline-offset: 2px;
}

/* ============================================================
   GALLERY · MAGAZIN-DOPPELSEITE (Variante A)
   Wrapper-Klasse .ed-gallery--magazine überschreibt das Mosaik
   zu einem ruhigen 2-spaltigen Raster mit einheitlichem 3:2-
   Format. Alle col4/col6/col8/rowspan-Klassen werden für diese
   Variante explizit neutralisiert. Größerer Bildgrad als jetzt,
   gleichmäßiger Rhythmus, zentrierte italische Caption.
   ============================================================ */
.ed-gallery--magazine {
  grid-template-columns: 1fr 1fr;
  gap: 2.8rem;
  margin-top: 5rem;
}
/* Alle Mosaik-Span-Klassen aufheben → jedes Item belegt 1 Spalte */
.ed-gallery--magazine .ed-gallery-item--col4,
.ed-gallery--magazine .ed-gallery-item--col6,
.ed-gallery--magazine .ed-gallery-item--col8 {
  grid-column: span 1;
}
.ed-gallery--magazine .ed-gallery-item--rowspan2 {
  grid-row: auto;
}

/* Einheitliches Bildformat 3:2 (cinema-leaning, edler als 4:3) */
.ed-gallery--magazine .ed-gallery-item picture {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
/* Rowspan2-Spezial-Override aus motion-Block aufheben */
.ed-gallery--magazine .ed-gallery-item--rowspan2 picture {
  aspect-ratio: 3 / 2;
  height: auto;
}
.ed-gallery--magazine .ed-gallery-item--rowspan2 picture img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* Editorial-Caption: zentriert, italisch, dezent */
.ed-gallery--magazine .ed-gallery-item figcaption {
  text-align: center;
  margin-top: 1.2rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ed-muted);
}
.ed-gallery--magazine .ed-gallery-item figcaption em {
  font-style: italic;
  font-size: 1.1rem;
  margin-right: 0.5rem;
  color: var(--ed-fg);
}

/* Hover: dezenter Zoom als bisheriger 1.03 */
.ed-gallery--magazine .ed-gallery-item:hover img {
  transform: scale(1.02);
}

/* ----- Tablet (≤ 1080 px): bleibt 2-spaltig, etwas engerer Gap ----- */
@media (max-width: 1080px) {
  .ed-gallery--magazine {
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem;
  }
  .ed-gallery--magazine .ed-gallery-item--col4,
  .ed-gallery--magazine .ed-gallery-item--col6,
  .ed-gallery--magazine .ed-gallery-item--col8 {
    grid-column: span 1;
  }
}

/* ----- Mobile (≤ 480 px): 1-spaltig, volle Breite ----- */
@media (max-width: 480px) {
  .ed-gallery--magazine {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
}

/* ============================================================
   GALLERY · LOOKBOOK (Variante B)
   Einspaltig, große Bilder im 16:10-Format, max-width 1400 px
   zentriert. Bildlegende editorial links unter dem Bild
   eingerückt (wie eine gedruckte Magazin-Caption). Ken-Burns-
   Effekt: extrem langsames Zoom-in (scale 1.0 → 1.04 über 8 s)
   sobald das Item im Viewport ist.
   ============================================================ */
.ed-gallery--lookbook {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  margin-top: 6rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: none;
}
/* Alle Mosaik-Span-Klassen + rowspan-Override neutralisieren */
.ed-gallery--lookbook .ed-gallery-item--col4,
.ed-gallery--lookbook .ed-gallery-item--col6,
.ed-gallery--lookbook .ed-gallery-item--col8,
.ed-gallery--lookbook .ed-gallery-item--rowspan2 {
  grid-column: unset;
  grid-row: unset;
}
.ed-gallery--lookbook .ed-gallery-item {
  width: 100%;
}
.ed-gallery--lookbook .ed-gallery-item picture {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
/* rowspan2-Spezial-Override aus Mosaik aufheben */
.ed-gallery--lookbook .ed-gallery-item--rowspan2 picture {
  aspect-ratio: 16 / 10;
  height: auto;
}
.ed-gallery--lookbook .ed-gallery-item--rowspan2 picture img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* Ken-Burns: langsamer Scale beim Reveal, läuft 8 s nach .is-revealed */
.ed-gallery--lookbook .ed-gallery-item img {
  transition: transform 8s cubic-bezier(0.22, 1, 0.36, 1);
}
.ed-gallery--lookbook .ed-gallery-item.is-revealed img {
  transform: scale(1.04);
}
/* Hover wirkt zusätzlich, kehrt zurück auf den Ken-Burns-Endwert */
.ed-gallery--lookbook .ed-gallery-item:hover img {
  transform: scale(1.06);
  transition-duration: 1.2s;
}

/* Editorial-Bildlegende: links eingerückt unter dem Bild */
.ed-gallery--lookbook .ed-gallery-item figcaption {
  text-align: left;
  margin: 1.8rem 0 0 6%;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--ed-muted);
  /* Caption fadet leicht versetzt ein (300 ms nach Bild-Reveal) */
  opacity: 0;
  transition: opacity 0.8s ease;
  transition-delay: 0.3s;
}
.ed-gallery--lookbook .ed-gallery-item.is-revealed figcaption {
  opacity: 1;
}
.ed-gallery--lookbook .ed-gallery-item figcaption em {
  display: inline-block;
  font-style: italic;
  font-size: 1.5rem;
  margin-right: 0.6rem;
  color: var(--ed-fg);
  letter-spacing: 0;
}

/* ----- Tablet (≤ 1080 px) ----- */
@media (max-width: 1080px) {
  .ed-gallery--lookbook { gap: 3.5rem; }
  .ed-gallery--lookbook .ed-gallery-item figcaption { margin-left: 4%; }
}

/* ----- Mobile (≤ 480 px): kompakter, keine Einrückung ----- */
@media (max-width: 480px) {
  .ed-gallery--lookbook { gap: 2.5rem; margin-top: 3rem; }
  .ed-gallery--lookbook .ed-gallery-item figcaption {
    margin: 1rem 0 0 0;
    font-size: 1.05rem;
  }
  .ed-gallery--lookbook .ed-gallery-item figcaption em {
    font-size: 1.3rem;
  }
}

/* ============================================================
   GALERIE — Ausführung & Interaktion (konsolidiert)
   Struktur bleibt (.ed-gallery, --col4/6/8, --rowspan2, Lightbox).
   Verbessert: ruhiger Grid-Rhythmus, Reveal-on-Scroll (Motion One,
   siehe editorial.js) und Hover-Veredelung. Bestehende Design-Tokens
   wiederverwendet, nichts hartkodiert.
   ============================================================ */

/* ---------- 1) Ruhiger Grid-Rhythmus ----------
   Etwas großzügigerer Abstand; kontrollierte Proportionen je Kachel-
   größe (große col8-„Atembilder" cinematisch 3:2, restliche Kacheln
   bleiben 4:3 aus dem Basis-CSS). object-fit:cover + width/height 100%
   stecken bereits im Basis-CSS (.ed-gallery-item img). */
@media (min-width: 861px) {
  .ed-gallery { gap: 2.4rem; }
  .ed-gallery-item--col8:not(.ed-gallery-item--rowspan2) picture {
    aspect-ratio: 3 / 2;
  }
}

/* ---------- 2) Reveal-on-Scroll: Sicht-Absicherung ----------
   Den eigentlichen Reveal (Startzustand + Bewegung) setzt ausschließlich
   editorial.js via Motion One (inView + animate + stagger). Hier nur die
   Garantie: Bilder sind per Default sichtbar. Fällt JS/Motion aus ODER
   gilt prefers-reduced-motion, bleibt nichts verborgen. */
.ed-gallery-item { opacity: 1; }

/* Sichtbarer Fokuszustand (Tastatur-Navigation) */
.ed-gallery-item:focus-visible {
  outline: 2px solid var(--ed-accent);
  outline-offset: 4px;
}

/* ---------- 3) Hover-Veredelung (nur Hover-/Maus-Geräte) ----------
   Langsamer Bild-Zoom; Caption/Nummer faden als Overlay von unten ein.
   Touch-Geräte (kein hover) behalten die Caption dauerhaft sichtbar
   (Basis-CSS, Caption unter dem Bild). */
@media (hover: hover) and (pointer: fine) {
  .ed-gallery-item img {
    transition: transform 0.6s ease;
    will-change: transform;
  }
  .ed-gallery-item:hover img,
  .ed-gallery-item:focus-visible img {
    transform: scale(1.04);
  }

  /* Caption als dezentes Overlay am unteren Bildrand → kein reservierter
     Leerraum unter dem Bild auf Desktop. */
  .ed-gallery-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 2.4rem 1.1rem 1rem;
    color: var(--ed-fg-light);
    background: linear-gradient(to top, rgba(5, 4, 11, 0.62), rgba(5, 4, 11, 0));
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
  }
  .ed-gallery-item figcaption em { color: var(--ed-fg-light); }
  .ed-gallery-item:hover figcaption,
  .ed-gallery-item:focus-visible figcaption {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   HERO-HEADLINE — Titel + Unterzeile als ein positionierter Block
   „Meier Design Apartment in Friedrichsruhe Hohenlohe" — Friedrichsruhe
   in Allura-Schreibschrift (.ed-script); darunter zwei kleine Faktzeilen.
   Der Wrapper übernimmt die Positionierung; der Titel läuft jetzt in
   seinem Fluss (nicht mehr einzeln absolut).
   ============================================================ */
.ed-hero-headline {
  position: absolute;
  left: 3.2rem;
  bottom: 5.5rem;
  z-index: 2;
  /* Breite NICHT in ch (würde gegen die geerbte 16px-Schrift rechnen und
     den großen Titel in eine schmale Spalte zwingen). Sinnvoller Deckel. */
  max-width: 90vw;
}
.ed-hero-title {
  position: static;        /* überschreibt das frühere absolute Layout */
  left: auto;
  bottom: auto;
  /* Umbruch hier setzen: ch bezieht sich auf die TITEL-Schrift → konsistent
     ~12 Zeichen pro Zeile ("Meier Design" / "Apartment in" / "Friedrichsruhe"). */
  max-width: 12ch;
}
/* Titel auf Desktop kompakter, damit „Meier Design Apartment in
   Friedrichsruhe." + vier Faktzeilen sicher in den Hero passen und NICHT
   mit der oberen Navigation kollidieren. Das große Allura-„Friedrichsruhe."
   wird im Hero zusätzlich etwas heruntergerechnet (es baut sonst sehr hoch).
   (Mobile-Größen aus den früheren Breakpoints bleiben unberührt.) */
@media (min-width: 721px) {
  .ed-hero-title { font-size: clamp(2.4rem, 5.2vw, 5.3rem); }
}
/* „Friedrichsruhe" als großes Schreibschrift-Wort im Titel (inline). */
/* Im Hero läuft die Schreibschrift über wechselnde Fotos — daher ein hellerer,
   warmer Gold-Ton plus dezenter Schatten, damit „am Golfplatz" gut lesbar bleibt.
   Der Chestnut-Akzent auf hellen Sektionen bleibt davon unberührt. */
.ed-hero-title .ed-script {
  font-size: 1.28em;
  color: #cdb083;
  text-shadow: 0 1px 12px rgba(5, 4, 11, 0.55);
}
/* Kleine Orts-/Typ-Zeile direkt unter dem Titel: „Ferienwohnung · Hohenlohe" */
.ed-hero-place {
  margin: 0.9rem 0 0;
  font-family: var(--ed-sans);
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(236, 231, 220, 0.85);          /* hell statt Chestnut — auf Foto lesbar */
  text-shadow: 0 1px 8px rgba(5, 4, 11, 0.5);
}
.ed-hero-sub {
  width: max-content;
  max-width: 100%;
  margin: 1.2rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(236, 231, 220, 0.20);  /* dezente Trennlinie */
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  font-family: var(--ed-sans);
  font-size: clamp(0.82rem, 1.2vw, 0.95rem);
  letter-spacing: 0.05em;
  color: rgba(236, 231, 220, 0.82);
}
.ed-hero-sub span { white-space: nowrap; }
.ed-hero-sub span:last-child { color: #cdb083; text-shadow: 0 1px 8px rgba(5, 4, 11, 0.5); }  /* Bewertung im helleren Goldakzent, auf Foto lesbar */

@media (max-width: 720px) {
  /* Headline läuft im Hero-Flex-Stapel (siehe .ed-hero oben) → nicht mehr
     absolut, damit sie sauber über den CTAs sitzt statt sie zu überlappen. */
  .ed-hero-headline {
    position: static;
    left: auto;
    bottom: auto;
    max-width: 100%;
    margin: 0 0 1.6rem;
  }
}

/* Unterzeile in die gestaffelte Hero-Entrance einreihen */
@media (prefers-reduced-motion: no-preference) {
  html.js .ed-hero-sub {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.js .ed-hero.is-entered .ed-hero-sub {
    opacity: 1;
    transform: none;
    transition-delay: 0.55s;
  }
}

/* ============================================================
   LIGHTBOX — Erweiterungen: Bildzähler + Thumbnail-Leiste
   Struktur #edLightbox bleibt; neue Elemente werden ergänzt (JS).
   Tokens wiederverwendet, nichts hartkodiert.
   ============================================================ */

/* Bildzähler „04 / 13" oben links */
.ed-lightbox-counter {
  position: absolute;
  top: 1.7rem;
  left: 2rem;
  margin: 0;
  font-family: var(--ed-sans);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  color: var(--ed-muted-dark);
}
.ed-lightbox-counter b {
  color: var(--ed-fg-light);
  font-weight: 600;
}

/* Caption etwas höher, damit Platz für die Thumbnail-Leiste bleibt */
.ed-lightbox-caption { bottom: 6.4rem; }

/* Thumbnail-Leiste am unteren Rand — Direktsprung */
.ed-lightbox-thumbs {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  max-width: min(92vw, 760px);
  overflow-x: auto;
  padding: 0.3rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.ed-lightbox-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.5;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}
.ed-lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ed-lightbox-thumb:hover { opacity: 0.85; }
.ed-lightbox-thumb.is-active {
  opacity: 1;
  border-color: var(--ed-accent);
}
.ed-lightbox-thumb:focus-visible {
  outline: 2px solid var(--ed-accent);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .ed-lightbox-thumbs { display: none; }   /* sehr kleine Screens: Leiste aus */
  .ed-lightbox-caption { bottom: 3.4rem; }
  .ed-lightbox-counter { top: 1rem; left: 1rem; font-size: 0.74rem; }
}

/* ============================================================
   SIGNATURE-FEATURES — Lenis · Curtain-Loader · Custom Cursor
   Nur bestehende Tokens/Fonts. Reduced-Motion hart gegated.
   ============================================================ */

/* ---------- Reduced-Motion: kein Smooth-Scroll (sofortige Sprünge) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- AUFGABE 1 · Lenis (empfohlenes Basis-CSS) ----------
   Lenis setzt die Klassen .lenis / .lenis-smooth / .lenis-stopped am <html>. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }   /* kein doppeltes Smooth */
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }        /* z. B. Smoobu-Iframe */

/* ---------- AUFGABE 3 · Curtain-Loader ----------
   Vollflächiges Overlay, zieht beim Laden nach oben weg. Farbe aus Tokens.
   Ohne JS NICHT anzeigen → Inhalt bleibt nie verdeckt. */
html:not(.js) .ed-curtain { display: none; }
.ed-curtain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--ed-bg-dark);
  transform: translateY(0);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.ed-curtain.is-lifted {
  transform: translateY(-100%);
  pointer-events: none;          /* freigegebener Inhalt sofort bedienbar */
}
@media (prefers-reduced-motion: reduce) {
  .ed-curtain { transition: none; }   /* JS entfernt es sofort */
}

/* ---------- AUFGABE 2 · Custom Cursor ----------
   Nur Hover-/Maus-Geräte; per JS via html.has-custom-cursor scharf geschaltet
   (ohne JS bleibt der native Cursor). */
.ed-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor .ed-gallery-item,
  html.has-custom-cursor [role="button"] { cursor: none; }
  /* Textfelder behalten den nativen Cursor (Bedienbarkeit) */
  html.has-custom-cursor input,
  html.has-custom-cursor textarea,
  html.has-custom-cursor select,
  html.has-custom-cursor [contenteditable] { cursor: auto; }

  html.has-custom-cursor .ed-cursor { display: block; }
  .ed-cursor-dot,
  .ed-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    pointer-events: none;
    border-radius: 50%;
    will-change: transform;
  }
  .ed-cursor-dot {
    width: 6px;
    height: 6px;
    background: var(--ed-accent);
  }
  .ed-cursor-ring {
    width: 34px;
    height: 34px;
    border: 1px solid var(--ed-accent);
    transition:
      width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.3s ease,
      opacity 0.3s ease;
  }
  /* Hover über interaktiven Elementen: Ring vergrößert sich dezent */
  .ed-cursor.is-hover .ed-cursor-ring {
    width: 54px;
    height: 54px;
    background: rgba(128, 102, 78, 0.08);   /* --ed-accent, sehr dezent */
  }
  /* Magnet-Modus: Ring noch etwas größer */
  .ed-cursor.is-magnet .ed-cursor-ring {
    width: 64px;
    height: 64px;
  }
  /* Cursor verlässt das Fenster → ausblenden */
  .ed-cursor.is-out .ed-cursor-dot,
  .ed-cursor.is-out .ed-cursor-ring { opacity: 0; }

  /* Magnet-Buttons: weiche Transform-Transition (Easing-Kurve wiederverwendet) */
  html.has-custom-cursor .ed-hero-cta,
  html.has-custom-cursor .ed-btn {
    transition:
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    will-change: transform;
  }
}