/* ==========================================================================
   Mövennest · Villa Rosa — Hero
   Maße aus references/hero-vercors-ostsee-referenz.png abgeleitet
   (1672 × 941 px, Hero 1649 × 918 px). Waagerechte Werte als vw.
   ========================================================================== */

/* Schriften: lokal, nie über fonts.googleapis.com (Abmahngefahr).
   Der Kursivschnitt ist eine eigene Datei — die variable Lora deckt nur
   font-style: normal ab. */
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-italic-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin-var.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  --ivory: #f6f4ef;
  --navy: #0b2c3d;
  --seagreen-dark: #194754;   /* Button, aus der Referenz gemessen */
  --seagreen-hover: #215a67;
  --turquoise: #b0e2d9;       /* gedämpftes Türkis, nur für „nah." — 3,4:1 auf dem Himmel */
  --white: #ffffff;

  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --edge: 10px;               /* sichtbarer Seitenrand rings um den Hero */
  --radius: 15px;
  --hero-h: max(calc(100vh - 2 * var(--edge)), 30rem);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@supports (height: 100svh) {
  :root { --hero-h: max(calc(100svh - 2 * var(--edge)), 30rem); }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Sprungmarke für Tastatur und Screenreader --------------------------------- */
.skip-link {
  position: absolute;
  z-index: 100;
  top: calc(var(--edge) + 12px);
  left: calc(var(--edge) + 12px);
  padding: 0.75rem 1.1rem;
  background: var(--navy);
  color: var(--white);
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 4px;
  transform: translateY(-200%);
}

.skip-link:focus-visible { transform: none; }

/* ==========================================================================
   Kopfzeile
   Liegt als eigene Ebene deckungsgleich über dem Hero, damit sie während der
   Bildöffnung mit derselben Maske beschnitten werden kann.
   ========================================================================== */
.site-header {
  position: absolute;
  z-index: 10;
  top: var(--edge);
  left: var(--edge);
  right: var(--edge);
  height: var(--hero-h);
  pointer-events: none;
  --button-h: clamp(2.25rem, 2.69vw, 3rem);
}

.site-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  /* Referenz: Button 33 px unter der Hero-Oberkante, 32 px vom rechten Rand,
     erster Link 75 px vom linken Rand — bei 1672 px Breite */
  padding: clamp(1rem, 1.97vw, 2.25rem) clamp(1rem, 1.9vw, 2.25rem) 0 clamp(1.25rem, 4.5vw, 5.5rem);
  color: var(--white);
}

.site-header__bar > *,
.menu-backdrop { pointer-events: auto; }

.brand {
  position: absolute;
  left: 50%;
  top: calc(clamp(1rem, 1.97vw, 2.25rem) + var(--button-h) / 2);
  transform: translate(-50%, -50%);
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(6, 24, 36, 0.25);
}

.menu {
  display: flex;
  flex: 1;
  align-items: center;
}

.menu__list {
  display: flex;
  flex: 1;
  align-items: center;
  gap: clamp(1.25rem, 2.9vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Links zwei Punkte, dann Luft für die Marke in der Mitte, rechts zwei Punkte */
.menu__list li:nth-child(2) { margin-right: auto; }

.menu__list a,
.button {
  font-family: var(--font-sans);
  font-size: clamp(0.72rem, 0.94vw, 0.875rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.menu__list a {
  display: inline-block;
  padding: 0.6em 0;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.55em;
  text-shadow: 0 1px 10px rgba(6, 24, 36, 0.3);
  transition: text-decoration-color 0.25s var(--ease-out);
}

.menu__list a:hover,
.menu__list a:focus-visible { text-decoration-color: currentColor; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-h);
  margin-left: clamp(1.25rem, 1.8vw, 2.25rem);
  padding: 0 1.65em;
  border-radius: 3px;
  background: var(--seagreen-dark);
  color: var(--white);
  transition: background-color 0.25s var(--ease-out);
}

.button:hover { background: var(--seagreen-hover); }

.menu-toggle,
.menu__close,
.menu-backdrop { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  height: var(--hero-h);
  margin: var(--edge);
}

/* Die Maske: Foto und Navy-Ebene liegen gemeinsam darin und werden
   an ihrem Rand sauber beschnitten. */
.hero__mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy);
}

.hero__photo,
.hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__photo {
  object-fit: cover;
  /* Horizont bei rund 56 % der Hero-Höhe, wie in der Referenz */
  object-position: 50% 18%;
}

/* Wasserfläche (assets/js/hero-wasser.js): liegt deckungsgleich über dem
   Foto und unter der Navy-Ebene, blendet nach der Bildöffnung ein. */
.hero__wasser {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero__wasser.ist-da { opacity: 1; }

/* Die Navy-Ebene wirkt voll über Himmel und Meer, wo die Schrift steht, und
   läuft zu den Dünen hin aus. So ist es in der Referenz gemessen: Himmel
   und Wasser abgedunkelt, Sand und Gras fast unverändert hell. Die Datei
   selbst bleibt unangetastet; ohne diese Maske wirken die Dünen grau. */
.hero__overlay {
  object-fit: fill;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, rgba(0, 0, 0, 0.35) 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, rgba(0, 0, 0, 0.35) 78%, transparent 100%);
}

.hero__content {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__text {
  /* Alle Maße im Textblock hängen an der Titelgröße, damit er als Ganzes
     skaliert. Referenz: Titel 701 px breit bei 1672 px — Lora läuft
     breiter als die Vorlagenschrift, daher Breite und Versalhöhe gemittelt. */
  --t: clamp(3.25rem, min(8.6vw, 15.7svh), 10.25rem);
  position: absolute;
  left: 0;
  right: 0;
  /* Von unten verankert: Der Block wächst nach oben in den Himmel. Am
     02.10. auf Toms Wunsch um 6 % der Hero-Höhe tiefer gesetzt (vorher
     73,3 %, Unterzeile endete bei rund 52,5 % der Hero-Höhe). */
  bottom: calc(67.3% - 1.647 * var(--t));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.25rem;
  color: var(--white);
  text-align: center;
  pointer-events: auto;
}

/* 02.10.: dezent hervorgehoben in der Farbfamilie von „nah." — sehr helles
   Türkis, etwas kräftiger, weicher Schatten wie beim Titel. Verworfen:
   Sandgold-Pille (passte nicht), Navy (zu dunkel für den Hero).
   Ton #c8f0e8: Kontrast auf dem Himmel 3,3–3,6:1 (Weiß 3,7–4,0, Türkis von
   „nah." 2,9–3,1); #d9f5ef wirkte im Bild fast weiß. */
.hero__eyebrow {
  margin: 0 0 max(0.55rem, calc(0.075 * var(--t)));
  /* Buchstabenabstand hängt rechts an; links ausgleichen, damit die Zeile
     optisch mittig unter der Marke steht */
  padding-left: 0.18em;
  color: #c8f0e8;
  font-family: var(--font-sans);
  font-size: clamp(0.875rem, calc(0.125 * var(--t)), 1.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(6, 24, 36, 0.22), 0 2px 14px rgba(6, 24, 36, 0.35);
}

.hero__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--t);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.012em;
  text-shadow: 0 2px 4px rgba(6, 24, 36, 0.12), 0 8px 40px rgba(6, 24, 36, 0.3);
}

/* Spitz auslaufende Welle: unverändert als <img>, proportional skaliert,
   höchstens in ihrer Eigenbreite von 320 px. Kein Schatten — der ließ die
   feinen Spitzen verschwimmen. */
.hero__line {
  width: min(320px, calc(2.2 * var(--t)));
  height: auto;
  margin-top: 0;
}

.hero__claim {
  margin: calc(0.06 * var(--t)) 0 0;
  font-family: var(--font-serif);
  font-size: calc(0.43 * var(--t));
  font-weight: 400;
  line-height: 1.1;
  text-shadow: 0 1px 3px rgba(6, 24, 36, 0.14), 0 6px 28px rgba(6, 24, 36, 0.32);
}

.hero__claim em {
  font-style: italic;
  font-weight: 400;
  color: var(--turquoise);
}

/* ==========================================================================
   Bildöffnung — Ausgangszustand
   Nur aktiv, solange <html> die Klasse is-intro trägt (gesetzt im Kopf der
   Seite, entfernt am Ende der Animation). Ohne JavaScript und bei
   reduzierter Bewegung greift nichts davon: alles ist sofort sichtbar.
   ========================================================================== */
.is-intro .hero__mask {
  width: var(--mw, 0%);
  height: var(--mh, 60%);
}

.is-intro .site-header,
.is-intro .hero__content {
  clip-path: inset(
    calc(50% - var(--mh, 60%) / 2) calc(50% - var(--mw, 0%) / 2)
    round var(--radius)
  );
}

.is-intro [data-intro] { opacity: 0; }

/* ==========================================================================
   Schmale Fenster: Menübutton und von rechts einfahrendes Menü
   ========================================================================== */
@media (max-width: 1179px) {
  .site-header__bar {
    justify-content: space-between;
    padding: 0.75rem 0.75rem 0 clamp(1.25rem, 4.5vw, 2.5rem);
    min-height: 4.25rem;
  }

  .brand {
    position: static;
    transform: none;
    font-size: clamp(0.8125rem, 2.1vw, 1.125rem);
    letter-spacing: 0.1em;
  }

  .hero__text { --t: clamp(3.25rem, min(11vw, 15.7svh), 7.5rem); }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-right: -0.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--white);
    cursor: pointer;
  }

  .menu-toggle__icon,
  .menu-toggle__icon::before {
    display: block;
    width: 1.5rem;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    box-shadow: 0 1px 8px rgba(6, 24, 36, 0.35);
  }

  .menu-toggle__icon { position: relative; transform: translateY(-3.5px); }

  .menu-toggle__icon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 1rem;
  }

  .menu {
    position: fixed;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(88vw, 24rem);
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem 1.75rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ivory);
    color: var(--navy);
    box-shadow: -24px 0 60px rgba(6, 24, 36, 0.18);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.5s var(--ease-out), visibility 0s linear 0.5s;
  }

  .menu.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.5s var(--ease-out), visibility 0s;
  }

  .menu :focus-visible { outline-color: var(--navy); }

  .menu__close {
    display: inline-flex;
    align-self: flex-end;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: var(--navy);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .menu__list {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 2.5rem 0 2rem;
  }

  .menu__list li:nth-child(2) { margin-right: 0; }

  .menu__list li + li { border-top: 1px solid rgba(11, 44, 61, 0.12); }

  .menu__list a {
    display: block;
    padding: 1.15rem 0;
    font-size: 0.875rem;
    text-shadow: none;
    text-underline-offset: 0.45em;
  }

  .menu .button {
    height: 3.25rem;
    margin: auto 0 0;
    font-size: 0.8125rem;
  }

  .menu-backdrop {
    display: block;
    position: fixed;
    z-index: 1;
    inset: 0;
    background: rgba(7, 29, 43, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
  }

  .menu-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s var(--ease-out), visibility 0s;
  }
}

@media (max-width: 600px) {
  :root {
    --edge: 8px;
    --radius: 12px;
    /* 02.10.: Handy-Hero gekürzt (Tom: „noch ein bisschen Gras, aber nicht
       zu viel") — rund drei Viertel der Bildschirmhöhe, mindestens 40rem,
       damit der Textblock zwischen Kopfzeile und Horizont Platz hat */
    --hero-h: max(calc(76svh - 2 * var(--edge)), 40rem);
  }

  /* Im Hochformat füllt das Foto die Höhe; der Horizont liegt fest bei rund
     46 % der Hero-Höhe. Die Unterzeile endet 1,75rem darüber. */
  .hero__text {
    --t: clamp(3.25rem, 15vw, 4.75rem);
    bottom: calc(54% + 1.75rem);
  }
}

/* Hochformat: eigener Bildausschnitt — Meer links, Ort rechts, Dünen vorn */
@media (orientation: portrait) {
  .hero__photo { object-position: 64% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .menu,
  .menu.is-open,
  .menu-backdrop,
  .menu-backdrop.is-open,
  .menu__list a,
  .button { transition: none; }
}

/* ==========================================================================
   Landingpage unter dem Hero
   Aufbau und Stil: references/gesamtseite-uebersicht.png (1600 px, Inhalt
   1370 px). Der Hero darüber bleibt unberührt. Die Abschnitte gehen über
   helle Verläufe ineinander über: Elfenbein → helles Meergrün → Elfenbein,
   zum Schluss ein dunkles Feld mit demselben Rand und Radius wie der Hero.
   Farben auf Kontrast nachgerechnet (auf dem dunkelsten Grün #d1e0dd):
   Fließtext ≥ 5:1, kleine Zeilen ≥ 4,6:1, Kursiv-Akzent ≥ 3,1:1 (groß).
   ========================================================================== */
:root {
  --l-titel: #355452;         /* Überschriften */
  --l-akzent: #57827b;        /* Kursivzeilen; heller wäre unter 3:1 */
  --l-zeile: #22646b;         /* kleine Versalzeilen */
  --l-text: #405b61;          /* Fließtext */
  --l-leise: #456562;         /* Bildzeilen, Stichworte */
  --l-linie: rgba(34, 82, 86, 0.28);
  --l-rahmen: #fffefb;        /* warmweißer Bildrahmen */
  --l-schatten: 0 25px 60px rgba(14, 43, 56, 0.16);
  --l-tief: #153d4b;          /* Abschluss */
  --gutter: clamp(1.25rem, 7.2vw, 7.1875rem);
  --weich: cubic-bezier(0.16, 1, 0.3, 1);
}

.s-wrap {
  width: min(1370px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* Fokus: auf hellem Grund dunkel, im Abschluss hell (global ist er weiß) */
.willkommen :focus-visible,
.wohnung :focus-visible,
.villa :focus-visible,
.lage :focus-visible,
.erleben :focus-visible,
.anreise :focus-visible {
  outline: 2px solid var(--seagreen-dark);
  outline-offset: 6px;
}

/* Gemeinsame Bausteine ----------------------------------------------------- */
.s-zeile {
  margin: 0;
  color: var(--l-zeile);
  font-size: clamp(0.75rem, 0.6rem + 0.3vw, 0.875rem);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.23em;
  text-transform: uppercase;
}

.s-titel {
  margin: clamp(0.75rem, 1.2vw, 1.25rem) 0 0;
  color: var(--l-titel);
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 1.2rem + 3.55vw, 4.3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.s-titel em,
.willkommen__titel em {
  color: var(--l-akzent);
  font-style: italic;
  font-weight: 400;
}

/* Kopf: Titel links, Einleitung rechts unten bündig */
.s-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26.25rem);
  align-items: end;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.s-lead {
  margin: 0;
  padding-bottom: 0.5rem;
  color: var(--l-text);
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  line-height: 1.6;
}

/* Textlink mit feiner Linie: sie läuft beim Überfahren von links neu ein,
   der Pfeil (SVG — DM Sans hat kein ↗) wandert ein Stück nach rechts oben */
.s-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.6rem);
  padding-bottom: 0.7rem;
  color: var(--seagreen-dark);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}

.s-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #7d9f98;
  transform-origin: left;
}

.s-link:hover::after,
.s-link:focus-visible::after { animation: linie-laeuft 0.7s var(--ease-out); }

@keyframes linie-laeuft {
  0% { transform: scaleX(1); transform-origin: right; }
  40% { transform: scaleX(0); transform-origin: right; }
  41% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

.s-link__pfeil {
  width: 1.45em;
  height: 1.45em;
  flex: none;
  transition: transform 0.35s var(--ease-out);
}

.s-link:hover .s-link__pfeil,
.s-link:focus-visible .s-link__pfeil { transform: translate(3px, -3px); }

/* Merkmalzeile mit feinen Trennern */
.s-merkmale {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--l-leise);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

.s-merkmale li { padding: 0.15rem 1.45rem; }
.s-merkmale li + li { border-left: 1px solid #9bb4ae; }

/* Kompass: die vorhandene PNG/WebP, entfärbt zu hellem Graugrün und sehr
   blass. Eigene Ebene, nie im Text; JS dreht sie beim Scrollen um ±1,5°. */
.willkommen__kompass,
.erleben__kompass {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.willkommen__kompass img,
.erleben__kompass img {
  width: 100%;
  height: auto;
  filter: grayscale(1) sepia(0.45) hue-rotate(118deg) saturate(0.6);
}

/* ==========================================================================
   Willkommen
   ========================================================================== */
.willkommen {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 7.2vw, 7.2rem) 0 clamp(1.5rem, 2vw, 2rem);
  text-align: center;
}

.willkommen__kompass {
  top: clamp(0.5rem, 1.5vw, 1.5rem);
  right: max(-4rem, -3vw);
  width: clamp(13rem, 27vw, 27.5rem);
  rotate: -12deg;
}

.willkommen__kompass img { opacity: 0.13; }

.willkommen__inhalt { position: relative; z-index: 1; }

.willkommen__titel {
  margin: clamp(1rem, 1.5vw, 1.5rem) 0 0;
  color: var(--l-titel);
  font-family: var(--font-serif);
  font-size: clamp(2.125rem, 1rem + 3.3vw, 3.875rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.willkommen__text {
  max-width: 48.75rem;
  margin: clamp(1rem, 1.3vw, 1.25rem) auto 0;
  color: var(--l-text);
  font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.65;
}

.willkommen__merkmale { margin-top: clamp(1.75rem, 2.4vw, 2.4rem); }

/* ==========================================================================
   02 · Die Wohnung — Kopf, Bildkomposition, Eckdaten
   02.10. abends nach references/villa-rosa-section-02/
   mockup-wohnungsgalerie-ohne-masse.png: Küstenlinien-Hintergrund (eigene
   Ebene, siehe main > .wohnung), Titel in Blaugrün/Teal wie der Villa-
   Abschnitt, Collage-Proportionen aus dem Mockup. Texte und Fotos unverändert.
   ========================================================================== */
.wohnung {
  position: relative;
  padding: clamp(4.5rem, 8.1vw, 8.1rem) 0 clamp(5rem, 8.9vw, 8.9rem);
  background: linear-gradient(180deg, #f2f2ec 0%, #ebefe8 45%, #e4eeea 100%);
}

/* Die Komposition skaliert als Ganzes: Positionen in % der Fläche,
   Rahmen und Siegel in cqw (1 cqw = 1 % der Breite). Proportionen aus dem
   Mockup (Bühne 1285 × 557): Wohnen 66 % × 90 %, Bad 22 % × 54 % (+1,2°),
   Meerblick 38,8 % × 47 % (−1°) überlappt die rechte untere Ecke des
   Wohnbilds. Gemessen: Meerblick deckt vom Wohnbild nur Boden/Sofaende ab. */
.collage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1285 / 557;
  margin-top: clamp(2.25rem, 3vw, 3rem);
}

.collage__ebene { position: absolute; }
.collage__ebene--haupt { left: 0; top: 3.95%; width: 66.15%; height: 90.3%; z-index: 1; }
.collage__ebene--bad   { left: 72.3%; top: 0; width: 22%; height: 54.2%; z-index: 2; }
.collage__ebene--blick { left: 61.2%; top: 52.8%; width: 38.8%; height: 47.2%; z-index: 3; }

.collage__foto {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0.7cqw;
  background: #fffefb;
  box-shadow: 0 2px 6px rgba(30, 40, 38, 0.06), 0 24px 54px -18px rgba(34, 52, 56, 0.3);
}

.collage__ebene--bad .collage__foto { rotate: 1.2deg; }
.collage__ebene--blick .collage__foto { rotate: -1deg; }

.collage__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collage__ebene--haupt img { object-position: 50% 58%; }
.collage__ebene--bad img { object-position: 50% 52%; }
.collage__ebene--blick img { object-position: 50% 62%; }

/* Siegel: Kreis und Schrift in CSS, liegt auf dem Meerblick */
.collage__siegel {
  position: absolute;
  z-index: 4;
  /* Mitte des Meerblicks wie im Mockup */
  left: calc(80.6% - max(2.75rem, 4.89cqw));
  top: calc(76.4% - max(2.75rem, 4.89cqw));
  display: grid;
  place-content: center;
  width: max(5.5rem, 9.78cqw);
  aspect-ratio: 1;
  margin: 0;
  border: 1px solid #799c96;
  border-radius: 50%;
  background: rgba(246, 244, 239, 0.95);
  box-shadow: 0 0 0 5px rgba(246, 244, 239, 0.55);
  color: #3a6866;
  font-size: max(0.625rem, 0.8cqw);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  rotate: -8deg;
}

.collage__siegel span { display: block; }

.wohnung .s-titel { color: #1f3a42; }
.wohnung .s-titel em { color: #2b6870; }      /* 5,6:1 auf dem Papierton */
.wohnung .s-lead { color: #34474b; }

.wohnung__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(0.25rem, 0.6vw, 0.75rem);
}

.wohnung__bildzeile {
  margin: 0;
  color: var(--l-leise);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wohnung__bildzeile strong { margin-right: 0.9em; font-weight: 600; }

.wohnung__fuss .s-link { order: 2; }

.wohnung__eckdaten {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  order: 3;
  margin: clamp(1.25rem, 2.2vw, 2.25rem) 0 0;
  padding: 1.3rem 0;
  border-top: 1px solid var(--l-linie);
  border-bottom: 1px solid var(--l-linie);
  list-style: none;
  color: #3d5a5c;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.wohnung__eckdaten li { padding: 0.1rem 1.25rem; }
.wohnung__eckdaten .einheit { text-transform: none; }
.wohnung__eckdaten li:first-child { padding-left: 0; }
.wohnung__eckdaten li + li { border-left: 1px solid rgba(38, 87, 91, 0.27); }

/* ==========================================================================
   01 · Villa Rosa — Neuaufbau 02.10. nach references/villa-rosa-visuals/
   referenz-villa-rosa.png: Foto links groß und gerade, Text rechts, darunter
   drei Vorteile mit Icons (Wellen, Leuchtturm, Blatt — aus der gelieferten
   Icon-Datei vektorisiert, inline-SVG), Abschlusszeile mit Linien.
   Hintergrund: gelieferte Papier-/Karten-/Strandhafer-Ebene, Kartenbeschriftungen
   und Ortsmarker entfernt (Motiv geografisch nicht verifiziert, nur abstrakt).
   ========================================================================== */
.villa {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(3.5rem, 5.5vw, 5rem);
}

.villa__raster {
  position: relative;
  z-index: 1;
  display: grid;
  /* Referenz: Foto 890, Text 652 px von 1672 — der Text ist hier länger und
     in DM Sans, daher etwas mehr Breite für die Textspalte */
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 4vw, 4rem);
}

.villa__foto {
  position: relative;
  aspect-ratio: 890 / 750;
  margin: 0;
  padding: clamp(8px, 0.75vw, 11px);
  background: #fffefb;
  box-shadow: 0 2px 6px rgba(30, 40, 38, 0.06), 0 24px 54px -18px rgba(34, 46, 44, 0.28);
}

.villa__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

/* Weich einblenden, sobald das Foto geladen ist (landing.js Block 6) —
   vorher sieht man den hellen Rahmen mit sandfarbener Fläche statt eines
   plötzlich aufploppenden Bilds. Nur mit JS aktiv (.bilder-weich). */
.villa__foto { background-color: #fffefb; }
.villa__foto img { background: #ece4d4; }
/* Überblendung nur beim Erscheinen — beim Verstecken sofort, sonst blendet
   ein schon sichtbares Bild erst aus */
.bilder-weich img[data-einblenden] { opacity: 0; }
.bilder-weich img[data-einblenden].ist-geladen {
  opacity: 1;
  transition: opacity 0.9s ease;
}

@media (prefers-reduced-motion: reduce) {
  .bilder-weich img[data-einblenden] { transition: none; }
}

/* Sandfarbene Bildunterschrift, überlappt die untere Fotokante leicht */
.villa__notiz {
  position: absolute;
  right: clamp(1.25rem, 3vw, 2.5rem);
  bottom: -1rem;
  padding: 0.8rem 1.35rem;
  background: #ece0c7;
  box-shadow: 0 8px 22px rgba(60, 50, 30, 0.12);
  color: #4a4436;
  font-family: var(--font-serif);
  font-size: clamp(0.9375rem, 0.85rem + 0.25vw, 1.125rem);
  font-style: italic;
  line-height: 1.3;
}

.villa__titel {
  max-width: 37rem;
  color: #21363d;
  font-size: clamp(2.25rem, 1rem + 3vw, 3.6rem);
}

/* Zweite Zeile wie in der Referenz in einem Zug (nur, wo die Spalte breit genug ist) */
@media (min-width: 1400px) {
  .villa__titel em { white-space: nowrap; }
}

.villa__titel em { color: #2b6870; }   /* 5,6:1 auf dem Papierton */

/* Kurze Sandlinie unter der Überschrift, wie in der Referenz */
.villa__titel::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 2px;
  margin-top: clamp(1.25rem, 1.8vw, 1.75rem);
  background: #d4b78c;
}

.villa__absatz {
  max-width: 33rem;
  margin: clamp(1.1rem, 1.6vw, 1.5rem) 0 0;
  color: #34474b;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  line-height: 1.67;
}

/* Drei gleich breite Vorteile mit feinen senkrechten Trennlinien */
.villa__vorteile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(1.75rem, 2.6vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.vorteil {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.2rem clamp(0.4rem, 0.8vw, 0.8rem);
}

.vorteil + .vorteil { border-left: 1px solid rgba(43, 104, 112, 0.2); }

.vorteil__icon {
  width: auto;
  height: clamp(2rem, 2.6vw, 2.5rem);
  max-width: 4.5rem;
  color: #1f5c66;
}

.vorteil__titel {
  margin: 0.85rem 0 0;
  color: #21363d;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.vorteil__text {
  margin: 0.35rem 0 0;
  color: #4b5c5e;
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Abschlusszeile mittig mit feinen Linien links und rechts */
.villa__zeile {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: clamp(1.75rem, 2.4vw, 2.25rem) 0 0;
  color: #3f5b5d;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.villa__zeile::before,
.villa__zeile::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(63, 91, 93, 0.35);
}

/* ==========================================================================
   03 · Lage, Strand und Glowe
   ========================================================================== */
.lage {
  position: relative;
  padding: clamp(4.5rem, 8.3vw, 8.3rem) 0 clamp(5rem, 8.75vw, 8.75rem);
  background: linear-gradient(180deg, #e4eeea 0%, #dce9e8 100%);
}

.lage .s-wrap {
  position: relative;
  z-index: 1;
}

/* Mockup: Titel in einer Zeile, Einleitung als schmalerer Block rechts */
.lage .s-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(2.5rem, 4vw, 4rem); }

.lage .s-titel { color: #1f3a42; }
.lage .s-titel em { color: #2b6870; }        /* wie Abschnitt 01/02 */
.lage .s-lead { color: #34474b; max-width: 20rem; }   /* frei von den Randlinien oben rechts */

.lage__raster {
  display: grid;
  /* Mockup: Foto 755, Texte 620 px */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2.5rem, 5vw, 5rem);
  margin-top: clamp(3rem, 4.9vw, 4.9rem);
}

.lage__foto {
  position: relative;
  aspect-ratio: 755 / 470;
  margin: 0;
  padding: clamp(5px, 0.45vw, 7px);
  background: #fffefb;
  box-shadow: 0 2px 6px rgba(30, 40, 38, 0.06), 0 24px 54px -18px rgba(34, 52, 56, 0.28);
}

.lage__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.lage__marke {
  position: absolute;
  left: -1.4rem;
  bottom: -1.3rem;
  padding: 0.75rem 1.05rem;
  background: var(--ivory);
  color: #456c69;
  font-size: 0.6875rem;
  letter-spacing: 0.17em;
  line-height: 1.3;
  text-transform: uppercase;
}

.lage__texte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 2.4vw, 2.4rem) clamp(1.75rem, 2.75vw, 2.75rem);
}

.lage__punkt {
  padding-top: 1.05rem;
  border-top: 1px solid rgba(38, 87, 91, 0.36);
}

.lage__punkt h3 {
  margin: 0;
  color: #345c5a;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 1.2rem + 0.45vw, 1.5625rem);
  font-weight: 400;
  line-height: 1.25;
}

.lage__punkt p {
  margin: 0.75rem 0 0;
  color: #44615f;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ==========================================================================
   04 · Inselimpressionen & Ausflüge — kleiner Reiseführer mit Karussell
   Vorlage: references/insel-guide-karussell-referenz.html (Aufbau, Maße,
   Bewegung); Farben und Schriften aus der Seite. Hintergrund beginnt mit der
   Endfarbe von .lage und endet mit der Startfarbe von .anreise (#d1e0dd) —
   dazwischen hell aufgehellt, damit der Übergang nach unten weich läuft.
   ========================================================================== */
.erleben {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 8.3vw, 8.3rem) 0 clamp(4rem, 6vw, 6rem);
  background:
    radial-gradient(ellipse 60% 38% at 88% 6%, rgba(255, 255, 255, 0.62), transparent 70%),
    linear-gradient(180deg, #dce9e8 0%, #e7efec 22%, #e2ece8 62%, #dae7e3 84%, #d1e0dd 100%);
}

/* Kompass oben rechts: größer und feiner als zuvor, Grundwinkel −9°,
   landing.js dreht ihn beim Scrollen um höchstens ±1,5° */
/* 02.10. abends nach references/villa-rosa-section-04/mockup-ruegen-entdecken.png:
   gelieferter Kompass (kompass-overlay.webp) groß oben rechts als ruhendes
   Wasserzeichen — Mitte bei ≈ 78,5 % der Breite, Durchmesser ≈ 30 % der Breite,
   keine Drehung, keine Bewegung. Der Text liegt davor. */
.erleben__kompass {
  top: clamp(-1rem, -0.4vw, 0rem);
  left: calc(78.5% - min(15.3%, 22rem));
  width: min(30.6%, 44rem);
  height: auto;
  max-width: none;
  opacity: 0.5;
}

.erleben .s-wrap { position: relative; z-index: 1; }

.erleben .s-titel { color: #1f3a42; }
.erleben .s-titel em { color: #2b6870; }
.erleben .s-lead { color: #34474b; }

/* Stimmungszeile: kursiv, ohne Zierlinie */
.erleben__impressionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0;
  margin: clamp(2rem, 3vw, 2.6rem) 0 0;
  color: #3f6863;              /* 4,6:1 auf dem dunkelsten Grün — Text unter 24 px */
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  font-style: italic;
  line-height: 1.4;
}

.erleben__impressionen span { white-space: nowrap; }

.erleben__impressionen span + span::before {
  content: "·";
  padding: 0 0.9em;
  color: #9aa98f;
  font-style: normal;
}

/* Karussell ---------------------------------------------------------------- */
.reise {
  margin-top: clamp(1.75rem, 2.6vw, 2.4rem);
  --gleiten: 780ms cubic-bezier(0.2, 0.78, 0.18, 1);
}

/* Fenster über die volle Abschnittsbreite: Nachbarkarten laufen bis an den
   Bildschirmrand, Schatten werden nicht an der Inhaltskante abgeschnitten */
.reise__fenster {
  position: relative;
  overflow: hidden;
  margin: -1.5rem calc(50% - 50vw) -4.5rem;
  padding: 1.5rem 0 6rem;      /* Platz für den ganzen Kartenschatten, kein grauer Streifen */
  outline-offset: -3px;
  touch-action: pan-y;
}

.reise__spur {
  display: flex;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

/* Ohne JS: waagerecht scrollbare Reihe mit Einrasten */
.reise:not(.ist-karussell) .reise__fenster {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.reise:not(.ist-karussell) .etappe { scroll-snap-align: center; }

.ist-karussell .reise__fenster { cursor: grab; }
.ist-karussell .reise__fenster.ist-gezogen { cursor: grabbing; }

.ist-karussell .reise__spur {
  transition: transform var(--gleiten);
  will-change: transform;
}

.ist-karussell .reise__fenster.ist-gezogen .reise__spur { transition: none; }

.etappe {
  position: relative;
  /* --innen = Breite der Textspalte (landing.js); aktive Karte bündig links */
  /* Mockup: aktive Karte ≈ 73 % der Textspalte, lang im Querformat (900 × 360) */
  flex: 0 0 calc(var(--innen, 80vw) * var(--breit, 0.73));
  height: clamp(17rem, 25.5vw, 23.5rem);
  overflow: hidden;
  isolation: isolate;
  border-radius: 10px;
  background: #4f7277;
  box-shadow: 0 22px 50px rgba(17, 54, 62, 0.13);
}

/* Mockup: Vorschaukarten schmaler als die aktive (--schmal = Anteil der
   Textspalte; landing.js rechnet damit die Lage der aktiven Karte) */
.reise { --breit: 0.73; --schmal: 0.46; }

.ist-karussell .etappe {
  flex-basis: calc(var(--innen, 80vw) * var(--schmal));
  scale: 0.94;
  transform-origin: 50% 50%;
  filter: saturate(0.78);
  transition: flex-basis var(--gleiten), scale var(--gleiten), filter 780ms ease, box-shadow 780ms ease;
  box-shadow: 0 10px 28px rgba(17, 54, 62, 0.08);
  user-select: none;
  -webkit-user-select: none;
}

.ist-karussell .etappe:not(.ist-aktiv) { cursor: pointer; }

.ist-karussell .etappe.ist-aktiv {
  flex-basis: calc(var(--innen, 80vw) * var(--breit));
  scale: 1;
  filter: none;
  box-shadow: 0 26px 56px rgba(17, 54, 62, 0.17);
}

.etappe__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.1s cubic-bezier(0.2, 0.78, 0.18, 1);
  -webkit-user-drag: none;
}

.ist-karussell .etappe.ist-aktiv .etappe__bild { scale: 1.025; }

/* Querformat-Karten: Strand und Weg statt Himmel */
.etappe:first-child .etappe__bild { object-position: 50% 72%; }
.etappe:nth-child(2) .etappe__bild { object-position: 50% 62%; }
.etappe:nth-child(3) .etappe__bild { object-position: 50% 60%; }
.etappe:nth-child(4) .etappe__bild { object-position: 50% 78%; }

/* Bildnachweis für Etappe 3 steht auf bildnachweis.html (Link im Fuß) */

/* Bildplatz ohne Foto: ruhige Fläche, ausdrücklich als ausstehend markiert */
.etappe__platz {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(1rem, 2.2vw, 1.6rem);
  background:
    radial-gradient(ellipse 80% 70% at 75% 20%, rgba(176, 226, 217, 0.22), transparent 70%),
    linear-gradient(160deg, #3f6e72 0%, #24525c 55%, #173f4b 100%);
}

.etappe__platz span {
  padding: 0.45rem 0.8rem;
  border: 1px dashed rgba(246, 244, 239, 0.55);
  border-radius: 100px;
  color: rgba(246, 244, 239, 0.9);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Lesbarkeit: Verlauf nur unter dem Text */
.etappe::after {
  content: "";
  position: absolute;
  inset: 32% 0 0;
  z-index: 0;
  background: linear-gradient(180deg, transparent, rgba(8, 34, 42, 0.5) 45%, rgba(8, 34, 42, 0.84));
  pointer-events: none;
}

.etappe__text {
  position: absolute;
  left: clamp(1.25rem, 3.2vw, 2.9rem);
  right: clamp(1.25rem, 3vw, 2.5rem);
  bottom: clamp(1.25rem, 3vw, 2.75rem);
  z-index: 1;
  color: #fff;
}

.etappe__nr {
  margin: 0;
  color: #dceae3;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Kartentexte skalieren mit der Kartenbreite (Container): schmale
   Vorschaukarten bekommen kleinere Titel, beim Aktivwerden wachsen sie mit */
.etappe { container-type: inline-size; }

.etappe__titel {
  margin: 0.55rem 0 0.5rem;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 5.6cqw, 3.25rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.etappe__text > p:last-child {
  max-width: 32rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.8125rem, 1.9cqw, 0.9375rem);
  line-height: 1.55;
}

/* Über dem Karussell-Fenster: dessen Schattenpolster reicht nach unten und
   lag sonst unsichtbar über den Pfeilen und Punkten (Klicks gingen ins Leere) */
.reise__steuerung {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.25rem;
}

/* Mockup: ← • • • • → mittig */
.reise__leiste {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.reise__punkte { display: flex; align-items: center; gap: 0.15rem; }

/* Punkt sichtbar 8 px, Trefferfläche 24 px */
.reise__punkt {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.reise__punkt::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #cfdcd8;
  transition: background-color 0.3s ease, scale 0.3s ease;
}

.reise__punkt:hover::before { background: #9fbab4; }
.reise__punkt[aria-current="true"]::before { background: #2b6870; scale: 1.25; }
.reise__punkt:focus-visible { outline: 2px solid var(--seagreen-dark); outline-offset: 0; border-radius: 50%; }

.reise__stand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  margin: 0;
}

.reise__zahl {
  color: #2e686d;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: lining-nums tabular-nums;
}

.reise__wort {
  color: #567472;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.reise__pfeil {
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 254, 250, 0.95);
  color: #275864;
  box-shadow: 0 8px 24px rgba(34, 74, 76, 0.12);
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.reise__pfeil:hover { transform: translateY(-2px); background: #fff; }

/* Ohne JS gibt es nichts zu steuern */
.reise:not(.ist-karussell) .reise__steuerung { display: none; }

/* Unten: weitere Ziele und Essen -------------------------------------------- */
/* Mockup: links Ziele (≈ 45 %), rechts die Essensbox (≈ 46 %) */
.erleben__fuss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2rem, 3vw, 2.75rem);
}

.weiter__titel,
.essen__titel {
  margin: 0;
  color: #1f3a42;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.2rem + 1.3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.16;
  text-wrap: balance;
}

.essen__titel { font-size: clamp(1.45rem, 1rem + 0.85vw, 1.95rem); line-height: 1.12; }

.weiter__ziele {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.55rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

/* Chips wie im Mockup: hell, feine Kontur, Teal — reine Liste, keine Links */
.weiter__ziele li {
  padding: 0.55rem 1rem;
  border: 1px solid rgba(43, 104, 112, 0.28);
  border-radius: 100px;
  background: rgba(255, 254, 250, 0.82);
  box-shadow: 0 2px 6px rgba(34, 74, 76, 0.04);
  color: #2b6870;
  font-size: 0.875rem;
  line-height: 1.25;
}

.weiter__faehre,
.essen p {
  max-width: 30rem;
  margin: 0.9rem 0 0;
  color: #3f5b5d;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Essensbox: große helle Karte, Foto links mit weißem Rand, Text rechts,
   dazwischen eine feine senkrechte Linie */
/* Gräser unten links laufen hinter diesem Text durch: papierfarbener Schein
   statt Kasten, damit die Zeilenanfänge klar bleiben */
.weiter__faehre,
.weiter__titel { text-shadow: 0 0 6px #f9f6ec, 0 0 12px #f9f6ec, 0 0 18px #f9f6ec; }

.essen {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2rem);
  padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2.2vw, 2rem);
  border: 1px solid rgba(43, 104, 112, 0.14);
  border-radius: 14px;
  background: rgba(253, 251, 246, 0.9);
  box-shadow: 0 2px 6px rgba(30, 40, 38, 0.04), 0 24px 54px -22px rgba(34, 52, 56, 0.26);
}

.essen__ebene { position: relative; }

.essen__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 7px solid #fffefb;
  box-shadow: 0 12px 30px rgba(15, 52, 59, 0.16);
  rotate: -3deg;
}

.essen > div:last-child {
  padding-left: clamp(1rem, 1.8vw, 1.6rem);
  border-left: 1px solid rgba(43, 104, 112, 0.2);
}

/* ==========================================================================
   05 · Anreise — Karte als Inline-SVG, Wege als Liste
   ========================================================================== */
.anreise {
  position: relative;
  padding: clamp(4.5rem, 8.4vw, 8.4rem) 0 clamp(5rem, 8.75vw, 8.75rem);
  background: linear-gradient(180deg, #d1e0dd 0%, #e9ece5 30%, var(--ivory) 100%);
}

.anreise__raster {
  display: grid;
  grid-template-columns: minmax(0, 31rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(3rem, 5.75vw, 5.75rem);
  margin-top: clamp(3rem, 4.2vw, 4.2rem);
}

.karte { margin: 0; }

.karte__flaeche {
  position: relative;
  aspect-ratio: 470 / 480;
  border: 1px solid rgba(36, 90, 92, 0.19);
  background:
    radial-gradient(ellipse at 55% 45%, rgba(214, 230, 225, 0.9), rgba(220, 233, 229, 0.75) 55%, rgba(232, 238, 232, 0.8) 100%);
}

.karte__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.karte__festland { fill: #ecede4; }
.karte__insel { fill: #f5f3ec; stroke: #9dbab3; stroke-width: 1.1; }
.karte__bodden { fill: #dde9e5; stroke: #aec6bf; stroke-width: 0.8; }

.karte__weg {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.karte__weg--auto { stroke: #2a6d72; stroke-width: 2.6; stroke-dasharray: 7 6; }
.karte__weg--alt { stroke: #b08b58; stroke-width: 2.1; stroke-dasharray: 1.5 6; }
.karte__weg--faehre { stroke: #b08b58; stroke-width: 1.4; stroke-dasharray: 1 3.5; }

.karte__ort { fill: #234e56; }
.karte__ort--bus { fill: var(--ivory); stroke: #234e56; stroke-width: 1.8; }
.karte__ort--klein { fill: #7e9a95; }
.karte__ziel { fill: #d3b98f; stroke: #234e56; stroke-width: 2; }
.karte__ziel-ring { fill: none; stroke: #234e56; stroke-width: 0.8; opacity: 0.45; }

.karte__nord path { fill: none; stroke: #6f8d88; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.karte__nord text { fill: #5f7e79; font-family: var(--font-sans); font-size: 11px; letter-spacing: 2px; text-anchor: middle; }

/* Ortsnamen als HTML über der SVG: bleiben auf dem Handy lesbar groß.
   --x/--y = Lage des Punkts in % der Fläche (aus der Projektion). */
.karte__name,
.karte__wasser {
  position: absolute;
  left: var(--x);
  top: var(--y);
  white-space: nowrap;
}

.karte__name {
  padding: 0.25rem 0.45rem;
  background: rgba(246, 244, 239, 0.86);
  color: #2f5a5b;
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
  transform: translate(0.6rem, -50%);
}

.karte__name--ziel {
  padding: 0.35rem 0.6rem;
  background: var(--l-tief);
  color: var(--ivory);
  transform: translate(-50%, calc(-100% - 1.1rem));
}

.karte__name--unten { transform: translate(-50%, 0.6rem); }
.karte__name--links { transform: translate(calc(-100% - 0.6rem), -50%); }
.karte__name--oben { transform: translate(-50%, calc(-100% - 0.5rem)); }
.karte__name--fein { color: #4d6e6b; font-weight: 600; }

.karte__wasser {
  color: #5f817c;
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-style: italic;
  transform: translate(-50%, -50%);
}

.karte__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1rem;
  color: var(--l-leise);
  font-size: 0.75rem;
  line-height: 1.4;
}

.karte__schluessel {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.karte__schluessel::before {
  content: "";
  width: 1.6rem;
  border-top: 2.5px dashed #2a6d72;
}

.karte__schluessel--alt::before { border-top: 2px dotted #b08b58; }

.karte__schluessel--bus::before {
  width: 0.55rem;
  height: 0.55rem;
  border: 1.8px solid #234e56;
  border-radius: 50%;
}

.wege { border-top: 1px solid rgba(38, 87, 91, 0.3); }

.weg {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.45rem 0;
  border-bottom: 1px solid rgba(38, 87, 91, 0.3);
}

.weg__symbol {
  width: 3rem;
  height: 3rem;
  color: #2f6b6c;
}

.weg__titel {
  margin: 0.4rem 0 0;
  color: #355b59;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 1.25rem + 0.3vw, 1.5rem);
  font-weight: 400;
  line-height: 1.25;
}

.weg p {
  margin: 0.55rem 0 0;
  color: #44605f;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.weg__alternative strong { color: #355b59; font-weight: 600; }

.wege__hinweis {
  margin: 1rem 0 0;
  color: #4f6461;
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Illustrierte Anreise-Karte (Bild statt Inline-SVG) */
.karte--bild { max-width: none; margin: 0; }
@media (min-width: 901px) {
  .anreise__raster:has(.karte--bild) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.karte__bild {
  width: 100%;
  height: auto;
  border: 1px solid rgba(43, 104, 112, 0.18);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(30, 40, 38, 0.05), 0 24px 54px -22px rgba(34, 52, 56, 0.26);
}

/* ==========================================================================
   Abschluss und Fuß — ein dunkles Feld mit Rand und Radius wie der Hero
   ========================================================================== */
.abschluss {
  position: relative;
  overflow: hidden;
  margin: 0 var(--edge);
  padding: clamp(4.5rem, 7.2vw, 7.2rem) var(--gutter) clamp(3.5rem, 4.9vw, 4.9rem);
  border-radius: var(--radius) var(--radius) 0 0;
  background:
    radial-gradient(ellipse at 50% 125%, rgba(91, 143, 142, 0.42), transparent 58%),
    var(--l-tief);
  color: var(--ivory);
  text-align: center;
}

.abschluss :focus-visible { outline: 2px solid var(--ivory); outline-offset: 5px; }

.abschluss__inhalt { position: relative; }

.abschluss__zeile { color: #b8d2c9; }

.abschluss__titel {
  margin: clamp(1rem, 1.6vw, 1.55rem) 0 0;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 1.2rem + 3.5vw, 4.2rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.abschluss__text {
  margin: 1.2rem 0 0;
  color: #d7e2dd;
  font-size: clamp(1rem, 0.95rem + 0.15vw, 1.0625rem);
  line-height: 1.6;
}

.abschluss__aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(1.75rem, 2.2vw, 2.15rem);
}

.abschluss__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  min-height: 3.25rem;
  padding: 0.9rem 1.45rem;
  border: 1px solid #c5d9d0;
  border-radius: 3px;
  color: #f7f4ed;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.abschluss__knopf svg { flex: none; transition: transform 0.35s var(--ease-out); }
.abschluss__knopf:hover svg,
.abschluss__knopf:focus-visible svg { transform: translate(2px, -2px); }

.abschluss__knopf:hover { background: rgba(246, 244, 239, 0.08); }

.abschluss__knopf--primaer {
  border-color: #d2bd99;
  background: #d2bd99;
  color: var(--l-tief);
}

.abschluss__knopf--primaer:hover { border-color: #ddcbab; background: #ddcbab; }

.fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin: 0 var(--edge) var(--edge);
  padding: 1.8rem var(--gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--l-tief);
  color: #bcd0ca;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.fuss p { margin: 0; }

.fuss__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.6rem; }

.fuss__links a {
  display: inline-block;
  padding: 0.4rem 0;
  color: #dbe7e2;
  text-decoration: none;
}

.fuss__links a:hover { text-decoration: underline; text-underline-offset: 0.4em; }
.fuss :focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }

/* ==========================================================================
   Karten-Stapel (02.10.) — jeder Abschnitt unter dem Hero ist eine Karte
   mit Rand, Kontur, Radius und Schatten. Der Hero bleibt unberührt.
   Stapeln (nur .stapel-an, gesetzt von landing.js Block 4 — ab 480 px
   Fensterhöhe, ohne reduzierte Bewegung; Handy sanfter): Jede Karte ist sticky.
   Ist sie höher als das Fenster, klebt sie erst, wenn ihr Ende unten
   angekommen ist (top = Fensterhöhe − Kartenhöhe − Rand): Sie wird also
   vollständig gelesen, dann schiebt sich die nächste darüber. Kein Pinning
   per Skript, kein Scroll-Lock — nur position: sticky.
   ========================================================================== */
:root {
  --karte-rand: clamp(10px, 2.2vw, 2rem);      /* Außenabstand links/rechts */
  --karte-abstand: clamp(0.75rem, 1.6vw, 1.5rem);
  --karte-radius: clamp(14px, 1.4vw, 20px);
}

main > section:not(.hero) {
  margin: 0 var(--karte-rand) var(--karte-abstand);
  border: 1px solid rgba(25, 71, 84, 0.11);
  border-radius: var(--karte-radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 2px rgba(14, 43, 56, 0.04),
    0 18px 48px -20px rgba(14, 43, 56, 0.24);
}

main > .hero + section { margin-top: clamp(1rem, 2vw, 1.75rem); }

/* Ruhige, leicht wechselnde Töne aus der vorhandenen Farbwelt */
main > .villa {
  background-color: #f8f1e5;
  background-image: url("../section-villa/hintergrund-karte-gras.jpg");
  background-image: image-set(
    url("../section-villa/hintergrund-karte-gras.webp") type("image/webp"),
    url("../section-villa/hintergrund-karte-gras.jpg") type("image/jpeg"));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 66% 0%;
}
/* Küstenlinien als eigene Ebene: volle Breite, proportional, nicht gekachelt.
   „cover" hätte bei der hohen Karte die Linienbündel an den Rändern
   abgeschnitten; so bleiben sie sichtbar, oben/unten läuft die Ebene weich
   in den Papierton aus. Dekorativ — ::before ist für Screenreader unsichtbar. */
main > .wohnung { background: #f6f2e9; }

main > .wohnung::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  translate: 0 -52%;
  aspect-ratio: 1672 / 941;    /* Seitenverhältnis der Vorlage: proportional */
  z-index: 0;
  background-image: url("../section-wohnung/hintergrund-kuestenlinien.jpg");
  background-image: image-set(
    url("../section-wohnung/hintergrund-kuestenlinien.webp") type("image/webp"),
    url("../section-wohnung/hintergrund-kuestenlinien.jpg") type("image/jpeg"));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  pointer-events: none;
}

main > .wohnung > .s-wrap { position: relative; z-index: 1; }
/* 03: Hintergrund aus references/villa-rosa-section-03/
   hintergrund-elfenbein-moeven-konturlinien.png — in vier Randstücke zerlegt
   (Pixel unverändert, Papier → Transparenz, Innenkanten weich), damit die
   Möwen bei der hohen Karte nicht mitwachsen: Alle Stücke im selben Maßstab,
   abgeleitet aus der Möwenbreite --vogel (Möwengruppe = 275 px der Vorlage).
   Oben rechts: Konturlinien + Möwen, links/unten: Konturlinien. */
main > .lage {
  --vogel: clamp(5rem, 14.5vw, 14rem);           /* ≈ +18 % gegenüber vorher */
  --m: calc(var(--vogel) / 275);                  /* Länge pro Vorlagenpixel */
  background-color: #f9f9f2;
  background-repeat: no-repeat;
  background-image:
    url("../section-lage/rand-oben-rechts.png"),
    url("../section-lage/rand-links.png"),
    url("../section-lage/rand-unten-links.png"),
    url("../section-lage/rand-unten-rechts.png");
  background-image:
    image-set(url("../section-lage/rand-oben-rechts.webp") type("image/webp"), url("../section-lage/rand-oben-rechts.png") type("image/png")),
    image-set(url("../section-lage/rand-links.webp") type("image/webp"), url("../section-lage/rand-links.png") type("image/png")),
    image-set(url("../section-lage/rand-unten-links.webp") type("image/webp"), url("../section-lage/rand-unten-links.png") type("image/png")),
    image-set(url("../section-lage/rand-unten-rechts.webp") type("image/webp"), url("../section-lage/rand-unten-rechts.png") type("image/png"));
  background-size:
    calc(1112 * var(--m)) auto,
    calc(230 * var(--m)) auto,
    calc(360 * var(--m)) auto,
    calc(202 * var(--m)) auto;
  background-position:
    right top,
    left 0 top 42%,
    left bottom,
    right bottom;
}

@media (max-width: 359px) {
  main > .lage { --vogel: 4.25rem; }
}

/* Desktop: oben etwas mehr Luft, damit die Einleitung unter den Möwen bleibt */
@media (min-width: 901px) {
  .lage { padding-top: clamp(6rem, 10vw, 10rem); }
}
/* 04: Hintergrund aus references/villa-rosa-section-04/
   hintergrund-elfenbein-ruegen-pflanzen.png, geteilt in oberen Teil
   (Mint-Akzent, Küstenlinien) und unteren Teil (Linien, beide Pflanzen) —
   Pixel unverändert, Papier → Transparenz. Beide in voller Kartenbreite,
   oben bzw. unten verankert; so bleiben die Pflanzen in den unteren Ecken,
   auch wenn die Karte viel höher ist als das 16:9-Bild. */
main > .erleben {
  padding-bottom: clamp(5rem, 9vw, 8.5rem);
  background-color: #f9f6ec;
  background-image:
    url("../section-erleben/hintergrund-oben.webp"),
    url("../section-erleben/hintergrund-unten.webp");
  background-repeat: no-repeat;
  background-size: 100% auto, 100% auto;
  background-position: center top, center bottom;
}
main > .anreise { background: linear-gradient(180deg, #f1f0e9 0%, #f7f5f0 100%); }

/* Abschluss und Fuß bleiben ein dunkles Feld: Karte oben rund, Fuß schließt
   unten mit gleichem Rand an */
main > section.abschluss {
  margin-bottom: 0;
  border-color: rgba(11, 44, 61, 0.5);
  border-bottom: 0;
  border-radius: var(--karte-radius) var(--karte-radius) 0 0;
  box-shadow: 0 18px 48px -20px rgba(14, 43, 56, 0.35);
}

.fuss {
  margin: 0 var(--karte-rand) var(--karte-rand);
  border-radius: 0 0 var(--karte-radius) var(--karte-radius);
}

/* Zurücktreten: dunkler Schleier über der Karte, Stärke aus landing.js */
main > section:not(.hero)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  background: rgba(13, 42, 52, 0.14);
  opacity: var(--zurueck, 0);
  pointer-events: none;
}

.stapel-an main > section:not(.hero):not(:last-child) {
  position: sticky;
  top: var(--klebt, var(--karte-abstand));
}

/* Nur dort, wo skaliert wird: Handy-Karten sind sehr hoch, eine eigene
   Grafikebene je Karte wäre dort teuer */
@media (min-width: 768px) {
  .stapel-an main > section:not(.hero):not(:last-child) { will-change: transform; }
}

/* Erst die Bildöffnung, dann die Karten (02.10., v. a. fürs Handy, wo der
   Hero kürzer ist und die erste Karte sonst schon während der Öffnung zu
   sehen war). Solange <html> „is-intro" trägt, sind die Karten unsichtbar;
   landing.js (Block 5) setzt „karten-frei", sobald die Öffnung fertig ist
   oder vorher gescrollt wird — dann gleitet die erste Karte herein.
   Ohne JS/bei reduzierter Bewegung gibt es kein is-intro: alles sofort da. */
.is-intro:not(.karten-frei) main > section:not(.hero),
.is-intro:not(.karten-frei) .fuss { opacity: 0; }

.karten-frei main > .hero + section { animation: karte-ein 0.9s var(--weich) both; }

@keyframes karte-ein {
  from { opacity: 0; translate: 0 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .karten-frei main > .hero + section { animation: none; }
}

/* ==========================================================================
   Einblenden beim ersten Eintritt ins Bild (assets/js/landing.js)
   Ausgangszustand nur mit .lp-warten — die Klasse setzt das Skript erst bei
   Gruppen, die beim Laden noch unterhalb des Fensters liegen. Ohne JS, bei
   reduzierter Bewegung und beim Drucken bleibt alles sichtbar.
   Einblenden über transform, Drehung über die Eigenschaft rotate, Tiefe auf
   der umschließenden Ebene — so stören sich die drei nicht.
   ========================================================================== */
.lp-warten [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

.lp-warten [data-reveal="foto"] { transform: translate3d(0, 20px, 0) scale(0.98); }
.lp-warten [data-reveal="siegel"] { transform: scale(0.86); }

.lp-warten.lp-da [data-reveal] {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s var(--weich) var(--verz, 0s),
    transform 0.8s var(--weich) var(--verz, 0s);
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  [data-tiefe],
  [data-kompass] { will-change: transform; }
}

@media print {
  .lp-warten [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Zwischenbreiten (nach unabhängiger Prüfung ergänzt)
   ========================================================================== */
/* Kompass lag 901–1439 px hinter dem Titelende („Meer.") — weiter nach rechts;
   darunter klein in der Ecke (Block ≤ 900 px). Gemessen: ≥ 1 cm Abstand zum Text */
@media (min-width: 901px) and (max-width: 1499px) {
  .willkommen__kompass { right: max(-7rem, -9vw); }
}

/* Villa: die feste Bildspalte ließ dem Titel 1101–1439 px zu wenig Platz */

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1100px) {
  .s-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: 2.5rem; }
  .lage__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lage__texte { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .erleben__fuss { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .anreise__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .wohnung__eckdaten {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    row-gap: 0.6rem;
  }
  .wohnung__eckdaten li:nth-child(3n+1) { border-left: 0; padding-left: 0; }


  /* Villa-Notiz unter die Bildkante, sonst deckt sie das Haus ab */
}

/* Unter 900 px: Kopf untereinander, Komposition als klare Bildfolge ------- */
@media (max-width: 900px) {
  /* Kompass klein in die Ecke, damit er nicht hinter Zeile und Titel liegt */
  .willkommen__kompass { top: -1.5rem; right: -5.5rem; width: 12rem; }

  .s-kopf { display: block; }
  .s-lead { margin-top: 1.25rem; padding-bottom: 0; max-width: 36rem; }

  /* Hauptbild volle Breite, darunter Bad und Meerblick nebeneinander,
     gleich hoch; Siegel an der unteren rechten Ecke des Hauptbilds */
  .collage {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 0.75rem;
    aspect-ratio: auto;
  }

  .collage__ebene { position: relative; inset: auto; width: auto; height: auto; }
  .collage__ebene--haupt { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .collage__ebene--bad { aspect-ratio: 3 / 4; }
  .collage__foto { padding: 6px; }
  .collage__ebene--bad .collage__foto,
  .collage__ebene--blick .collage__foto { rotate: none; }

  .collage__siegel {
    left: auto;
    right: 0.75rem;
    top: calc(75cqw - 2.9rem);
    width: 5.5rem;
    font-size: 0.5625rem;
  }

  .wohnung__fuss { margin-top: 1.25rem; }


  .lage__raster { grid-template-columns: minmax(0, 1fr); gap: 3.25rem; }
  .lage__bild { max-width: 40rem; margin-left: 1.25rem; }
  .lage__texte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }


  .anreise__raster { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }

  /* Wohnung: Küstenlinien größer und oben, damit sie nicht zum Streifen werden */
  main > .wohnung::before {
    top: 0;
    left: 0;
    right: auto;
    width: 240%;
    translate: 0 0;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  }

  /* Villa gestapelt: Foto oben, Text darunter; Karte ruhiger, Gras unten */
  .villa__raster { grid-template-columns: minmax(0, 1fr); gap: 3.25rem; }
  .villa__bild { max-width: 44rem; }
  main > .villa { background-size: 190% auto; background-position: 100% 0%; }

  .reise { --breit: 0.86; --schmal: 0.86; }
  .etappe { height: clamp(18rem, 46vw, 24rem); }
  .erleben__kompass { top: 0; left: auto; right: -2rem; width: 15rem; }
  main > .erleben { background-size: 150% auto, 150% auto; background-position: left top, center bottom; }
  .karte { max-width: 32rem; }
}

/* Handy ------------------------------------------------------------------- */
@media (max-width: 600px) {
  .s-zeile { letter-spacing: 0.18em; }
  .s-titel { line-height: 1.12; }

  .willkommen__kompass img { opacity: 0.12; }
  .s-merkmale { flex-direction: column; align-items: center; gap: 0.35rem; }
  .s-merkmale li { padding: 0; }
  .s-merkmale li + li { border-left: 0; }

  .collage { gap: 0.6rem; }
  .collage__siegel { width: 4.75rem; top: calc(75cqw - 2.4rem); right: 0.5rem; }

  .wohnung__fuss { display: block; }
  .wohnung__bildzeile { margin-bottom: 1.1rem; }
  .wohnung__eckdaten {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1rem;
    padding: 1rem 0;
    letter-spacing: 0.1em;
  }
  .wohnung__eckdaten li,
  .wohnung__eckdaten li:first-child { padding: 0; }
  .wohnung__eckdaten li + li { border-left: 0; }


  .villa__foto { padding: 7px; }
  .villa__notiz { right: 0.75rem; bottom: -1.1rem; padding: 0.6rem 0.95rem; font-size: 0.9375rem; }
  /* Vorteile untereinander: Icon links, Text daneben — drei Spalten wären
     für „Denkmalgeschützt" zu schmal */
  .villa__vorteile { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .vorteil {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: center;
    padding: 0.9rem 0;
  }
  .vorteil + .vorteil { border-left: 0; border-top: 1px solid rgba(43, 104, 112, 0.2); }
  .vorteil__icon { grid-row: 1 / span 2; justify-self: center; height: 1.9rem; max-width: 3.5rem; }
  .vorteil__titel { margin: 0; align-self: end; }
  .vorteil__text { margin: 0.15rem 0 0; align-self: start; }
  .villa__zeile { font-size: 0.6875rem; letter-spacing: 0.16em; gap: 0.9rem; }
  main > .villa { background-size: 260% auto; }
  .lage__bild { margin-left: 0.75rem; }
  .lage__marke { left: -0.75rem; }
  .lage__texte { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

  .erleben__kompass { width: 9.5rem; top: -0.5rem; right: -1.75rem; opacity: 0.45; }
  .erleben__impressionen { font-size: 1rem; }
  .erleben__impressionen { flex-direction: column; gap: 0.2rem; }
  /* Hochformat schneidet links das Schild an — Ausschnitt etwas nach links */
  .etappe:first-child .etappe__bild { object-position: 25% 50%; }
  .erleben__impressionen span + span::before { content: none; }
  .reise { --breit: 0.9; --schmal: 0.9; }
  .etappe { height: auto; aspect-ratio: 4 / 5; }
  .etappe::after { inset: 25% 0 0; }
  .etappe__text > p:last-child { font-size: 0.875rem; }
  .essen { grid-template-columns: minmax(0, 1fr); }
  .essen__ebene { max-width: 20rem; }
  .essen > div:last-child { padding: 1rem 0 0; border-left: 0; border-top: 1px solid rgba(43, 104, 112, 0.2); }
  .reise__wort { display: none; }
  .weiter__ziele li { font-size: 0.75rem; padding: 0.45rem 0.75rem; }


  .karte__name { font-size: 0.5625rem; letter-spacing: 0.1em; padding: 0.2rem 0.35rem; }
  .karte__name--oben { transform: translate(0.5rem, -50%); }
  .karte__name--links.karte__name--fein { transform: translate(-50%, 0.5rem); }
  .karte__wasser { font-size: 0.75rem; }

  .weg { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; }
  .weg__symbol { width: 2.5rem; height: 2.5rem; }

  .abschluss__knopf { width: 100%; justify-content: space-between; }
  .fuss { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

@media (max-width: 400px) {
  .willkommen__kompass { right: -7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .s-link::after { animation: none !important; }
  .ist-karussell .reise__spur,
  .ist-karussell .etappe,
  .etappe__bild,
  .reise__pfeil { transition: none; }
  .s-link__pfeil,
  .abschluss__knopf,
  .abschluss__knopf svg { transition: none; }
}