/* ==========================================================================
   malediven-localislands.de – zentrales Stylesheet
   Reihenfolge: Tokens → Basis → Layout → Header → Hero → Komponenten → Footer
   Alle Seiten nutzen diese Datei. Neue Inselseiten brauchen kein eigenes CSS.
   ========================================================================== */

/* --- 1. Design-Tokens ---------------------------------------------------- */
:root {
  /* Farben: Sand als Grundton, Lagunentürkis als Akzent, Tiefgrün statt Schwarz */
  --sand-50:  #FCFAF6;
  --sand-100: #F5EFE5;
  --sand-200: #EADFCD;
  --sand-300: #DBCBB2;

  --ink-900:  #0F312F;
  --ink-700:  #2C4B49;
  --ink-500:  #5E7674;
  --ink-300:  #92A5A3;

  --lagoon:      #0D8F92;
  --lagoon-600:  #0A7B7E;   /* Türkis für Flächen mit weißer Schrift – erreicht 4.5:1 */
  --lagoon-700:  #06666B;
  --lagoon-900:  #044A50;
  --lagoon-50:   #E7F4F3;

  --sun:      #B26512;   /* warmer Akzent, sehr sparsam: Zahlen, TODO-Marker */
  --sun-50:   #FBF0DF;

  --white: #fff;

  /* Typografie: Systemschriften – kein Google-Fonts-CDN (DSGVO) */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Maße */
  --wrap: 1140px;
  --wrap-text: 720px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 49, 47, .06), 0 4px 14px rgba(15, 49, 47, .05);
  --shadow-md: 0 4px 10px rgba(15, 49, 47, .07), 0 18px 40px rgba(15, 49, 47, .09);

  --space-section: clamp(3.5rem, 8vw, 6.5rem);
  --header-h: 66px;
}

/* --- 2. Basis ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Reserve fuer Kopfzeile und Sprungleiste; JavaScript misst beide
     beim Laden nach und setzt den genauen Wert. */
  scroll-padding-top: calc(var(--header-h) + 57px + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sand-50);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--lagoon-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--lagoon-900); }

:focus-visible {
  outline: 3px solid var(--lagoon);
  outline-offset: 3px;
  border-radius: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-900);
  line-height: 1.18;
  font-weight: 600;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
  /* Lange deutsche Komposita dürfen umbrechen, sonst schieben sie
     auf schmalen Displays die ganze Seite nach rechts. */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(2.1rem, 6vw, 3.5rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .5em; }
strong { color: var(--ink-900); font-weight: 650; }

hr {
  border: 0;
  border-top: 1px solid var(--sand-200);
  margin: 2.5rem 0;
}

/* --- 3. Layout ----------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--text { width: min(100% - 2.5rem, var(--wrap-text)); margin-inline: auto; }

.section { padding-block: var(--space-section); }
.section--tint { background: var(--sand-100); }
.section--deep { background: var(--lagoon-900); color: #D3E7E6; }
.section--deep h2, .section--deep h3 { color: var(--white); }
.section--deep a { color: #9FDAD8; }
.section--flush { padding-block: 0; }

.section__head { max-width: 46rem; margin-bottom: 2.5rem; }
.section__head p { color: var(--ink-500); font-size: 1.125rem; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lagoon-700);
  margin: 0 0 .9rem;
  display: block;
}
.section--deep .eyebrow { color: #6FC9C7; }

.lede {
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  line-height: 1.62;
  color: var(--ink-700);
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink-900); color: #fff; padding: .8rem 1.2rem; z-index: 999;
}
.skip-link:focus { left: 0; }

/* --- 4. Header & Navigation --------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252, 250, 246, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sand-200);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: var(--header-h);
}

.logo {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink-900);
  text-decoration: none;
  line-height: 1.15;
  display: flex; align-items: center; gap: .55rem;
}
.logo:hover { color: var(--lagoon-700); }
.logo__mark {
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--lagoon) 0%, var(--lagoon-900) 55%, var(--sand-300) 55%, var(--sand-200) 100%);
}
.logo__sub {
  display: block;
  font-family: var(--font-body);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-300); font-weight: 600;
}

/* Burger ohne Beschriftung: drei Striche, Flaeche gross genug zum Antippen */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--sand-300); border-radius: var(--radius-sm);
  padding: 0; color: var(--ink-900); cursor: pointer;
}
.nav-toggle:hover { border-color: var(--lagoon); color: var(--lagoon-700); }
.nav-toggle__bars {
  display: block; width: 19px; height: 1.6px; position: relative;
  background: currentColor; border-radius: 2px;
}
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.6px;
  background: currentColor; border-radius: 2px;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
/* Überall :not(.btn) – der Inselberatungs-Button bringt seine eigenen Farben mit
   und darf von den Navigationsregeln nicht überschrieben werden. */
.site-nav a:not(.btn) {
  color: var(--ink-700); text-decoration: none; font-size: .95rem; font-weight: 500;
  display: block;
}
.site-nav a.btn { text-decoration: none; }
/* :not(.btn) ist wichtig – sonst überschreibt diese Regel die Textfarbe
   des Inselberatungs-Buttons und die Schrift verschwindet beim Hovern. */
.site-nav a:not(.btn):hover,
.site-nav a:not(.btn)[aria-current="page"] { color: var(--lagoon-700); }
.site-nav a:not(.btn)[aria-current="page"] { font-weight: 650; }

@media (max-width: 860px) {
  .site-nav {
    display: none;
    position: absolute; inset: var(--header-h) 0 auto;
    background: var(--sand-50); border-bottom: 1px solid var(--sand-200);
    box-shadow: var(--shadow-md);
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav ul { padding: .5rem 0 1rem; }
  .site-nav li { margin: 0; }
  .site-nav a { padding: .85rem 1.25rem; }
  .site-nav .btn { margin: .6rem 1.25rem; text-align: center; }
}
@media (min-width: 861px) {
  .nav-toggle { display: none; }
  .site-nav ul { display: flex; align-items: center; gap: 1.6rem; }
  .site-nav li { margin: 0; }
}

/* --- 5. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: .97rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--lagoon-600); color: var(--white); }
.btn--primary:hover { background: var(--lagoon-700); color: var(--white); }
.btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--sand-300); }
.btn--ghost:hover { border-color: var(--lagoon); color: var(--lagoon-700); }
.btn--light { background: var(--white); color: var(--lagoon-900); }
.btn--light:hover { background: var(--lagoon-50); color: var(--lagoon-900); }
.btn--wide { width: 100%; }

/* --- 6. Hero ------------------------------------------------------------- */
/* Links Text auf Sand, rechts das Foto mit weichen Ecken im weissen Passepartout.
   Die Bildhoehe ist fest gedeckelt - dadurch passt der Hero auf eine Bildschirmseite. */
.hero { background: var(--sand-100); border-bottom: 1px solid var(--sand-200); }

.hero__grid { display: grid; }
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
    align-items: center;
  }
}

.hero__content {
  display: flex; align-items: center;
  /* oben knapper als unten: schiebt den Text naeher an den Header */
  padding-top: clamp(1.4rem, 2.4vw, 1.9rem);
  padding-bottom: clamp(2rem, 3.6vw, 2.9rem);
  padding-left: max(1.25rem, calc((100vw - var(--wrap)) / 2));
  padding-right: clamp(1.25rem, 3vw, 2.8rem);
}
.hero__content-inner { width: 100%; max-width: 38rem; }

/* Passepartout mit weichen Ecken, feiner Kante und ruhigem Schatten */
.hero__aside {
  display: flex; align-items: center; justify-content: center;
  padding-block: clamp(1.4rem, 2.6vw, 2.1rem);
  padding-right: max(1.25rem, calc((100vw - var(--wrap)) / 2));
  padding-left: clamp(1.25rem, 2vw, 1.6rem);
}
.hero__frame { margin: 0; width: 100%; display: flex; justify-content: center; }
.hero__frame img {
  display: block;
  height: clamp(300px, 60vh, 560px);
  aspect-ratio: 4 / 5;          /* bleibt hochkant, auch auf flachen Bildschirmen */
  width: auto; max-width: 100%;
  object-fit: cover;
  border: 10px solid var(--white);
  border-radius: 26px;
  box-shadow: 0 0 0 1px var(--sand-200), 0 20px 46px rgba(15, 49, 47, .16);
}
@media (max-width: 899px) {
  /* Auf dem Handy steht ueberall erst der Text, dann das Bild.
     Umgekehrt liest man Bilder ohne zu wissen, worum es geht. */
  .hero__aside { padding-inline: 1.25rem; padding-top: .4rem; padding-bottom: 2rem; }
  .hero__frame img { height: clamp(280px, 44vh, 400px); border-width: 8px; border-radius: 22px; }
}

.hero h1 {
  font-size: clamp(2rem, 3.5vw, 2.85rem);
  margin-bottom: 0;
  text-wrap: balance;
}
.hero h1 .h1-lead { display: block; }
h2 .h2-lead { display: block; }
@media (min-width: 900px) {
  .hero h1 .h1-lead { white-space: nowrap; }
}
/* Handy: drei Zeilen. Die Schrift skaliert mit der Breite, damit
   "Malediven Local Islands" auch auf 360px in eine Zeile passt,
   und der Umbruch nach "den" wird fest gesetzt. Muss nach der Regel
   oben stehen, sonst gewinnt deren font-size. */
.hero h1 br.nur-mobil { display: none; }
@media (max-width: 899px) {
  .hero h1 { font-size: clamp(1.45rem, 7.6vw, 2rem); text-wrap: initial; }
  .hero h1 br.nur-mobil { display: inline; }
}

.hero__kicker {
  display: inline-block;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lagoon-900);
  background: var(--lagoon-50); border: 1px solid #C6E3E1;
  padding: .42rem .9rem; border-radius: 999px; margin-bottom: 1.1rem;
}

/* Zitatblock: Foto und Aussage gehoeren zusammen - der Vertrauensanker der Seite. */
.hero__quote {
  display: flex; align-items: center; gap: clamp(.95rem, 1.8vw, 1.3rem);
  margin: 1.5rem 0 0;
}
.hero__quote img {
  flex: 0 0 auto;
  width: clamp(88px, 10.5vw, 116px);
  height: clamp(88px, 10.5vw, 116px);
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--white);
  box-shadow: 0 8px 24px rgba(15, 49, 47, .17);
}
.hero__quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink-900);
}
.hero__quote figcaption { margin-top: .6rem; font-size: .89rem; color: var(--ink-500); }
.hero__quote figcaption strong { color: var(--ink-900); font-weight: 650; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.7rem; }
.hero__actions .btn { padding: .85rem 1.6rem; }
.hero__actions .btn--light { border-color: var(--sand-300); }

@media (max-width: 520px) {
  .hero__quote { flex-direction: column; align-items: flex-start; gap: .9rem; }
}

/* --- 7. Sprungnavigation ------------------------------------------------- */
.jumpnav {
  background: var(--white);
  border-bottom: 1px solid var(--sand-200);
  position: sticky; top: var(--header-h); z-index: 90;
}
.jumpnav__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.jumpnav__scroll::-webkit-scrollbar { display: none; }
.jumpnav ul {
  display: flex; gap: .35rem; list-style: none; margin: 0; padding: .6rem 0;
  white-space: nowrap;
}
.jumpnav li { margin: 0; }
.jumpnav a {
  display: block; padding: .4rem .8rem; border-radius: 999px;
  font-size: .88rem; color: var(--ink-500); text-decoration: none; font-weight: 500;
}
.jumpnav a:hover { background: var(--sand-100); color: var(--ink-900); }
.jumpnav a.is-active { background: var(--lagoon-50); color: var(--lagoon-900); font-weight: 650; }

/* --- 8. Prose (Fließtextblöcke) ------------------------------------------ */
.prose > :last-child { margin-bottom: 0; }
.prose--narrow { max-width: var(--wrap-text); }
.prose h3 { margin-top: 2.4rem; }
.prose ul li::marker { color: var(--lagoon); }

/* --- 9. Kostenvergleich (Signature-Block) -------------------------------- */
.compare {
  display: grid; gap: 1px;
  background: var(--sand-200);
  border: 1px solid var(--sand-200);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 760px) { .compare { grid-template-columns: 1fr 1fr; } }

.compare__col { background: var(--white); padding: clamp(1.5rem, 3.5vw, 2.4rem); }
.compare__col--highlight { background: var(--lagoon-50); }
.compare__label {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-300); margin-bottom: .8rem;
}
.compare__col--highlight .compare__label { color: var(--lagoon); }
.compare h3 { margin-bottom: 1rem; }
.compare__price {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  color: var(--ink-900); line-height: 1.1; margin-bottom: .2rem;
}
.compare__col--highlight .compare__price { color: var(--lagoon-900); }
.compare__unit { font-size: .88rem; color: var(--ink-500); margin-bottom: 1.4rem; }
.compare__list { list-style: none; padding: 0; margin: 0; font-size: .96rem; }
.compare__list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px dashed var(--sand-200); margin: 0;
}
.compare__list li:last-child { border-bottom: 0; }
.compare__list span:last-child { color: var(--ink-900); font-weight: 600; text-align: right; }

.compare__note {
  margin-top: 1.5rem; font-size: .92rem; color: var(--ink-500);
  text-align: center;
}

/* --- 10. Karten-Raster (Inseln, Themen) ---------------------------------- */
.cards {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  list-style: none; padding: 0; margin: 0;
}
.cards li { margin: 0; }

.card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--white);
  border: 1px solid var(--sand-200);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--sand-300);
  color: inherit;
}
.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand-100); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Platzhalter, solange noch kein Inselfoto vorliegt */
.card__media--placeholder {
  display: flex; align-items: flex-end; padding: 1rem;
  background:
    radial-gradient(120% 90% at 50% 120%, var(--sand-200) 0%, transparent 60%),
    linear-gradient(180deg, #BFE3E1 0%, #8FCFCC 45%, var(--sand-100) 46%, var(--sand-200) 100%);
}
.card__media--placeholder span {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-500); background: rgba(255,255,255,.82);
  padding: .3rem .6rem; border-radius: 999px;
}

.card__body { padding: 1.25rem 1.35rem 1.45rem; flex: 1; display: flex; flex-direction: column; }
.card__atoll {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lagoon); margin-bottom: .45rem;
}
.card__body h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.card__body p { font-size: .96rem; color: var(--ink-500); margin-bottom: 1rem; }
.card__meta {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--sand-200);
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  font-size: .82rem; color: var(--ink-500);
}
.card__meta strong { color: var(--ink-900); font-weight: 600; }

/* --- 11. Bild + Text nebeneinander (Grundmuster der ganzen Seite) --------- */
/* Jede Inhaltszeile besteht aus Bild und Text. .split--reverse dreht die Seiten,
   sodass sich die Bilder von oben nach unten abwechseln. */
.split { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: center; }
@media (min-width: 820px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
}
/* Auf dem Handy stapeln sich die Spalten untereinander. Im Quelltext steht
   die Bildspalte zuerst (sie soll auf dem Desktop links stehen koennen),
   deshalb wird die Reihenfolge hier gedreht: erst Text, dann Bild. */
@media (max-width: 819px) {
  .split > .split__body  { order: 1; }
  .split > .split__media { order: 2; }
  /* Zwei Paare in einem Raster: jedes Paar fuer sich drehen,
     sonst stuenden beide Texte oben und beide Bilder darunter. */
  .split--paired > :nth-child(1) { order: 2; }
  .split--paired > :nth-child(2) { order: 1; }
  .split--paired > :nth-child(3) { order: 4; }
  .split--paired > :nth-child(4) { order: 3; }
}

.split + .split { margin-top: clamp(2.8rem, 6vw, 4.5rem); }
/* Zwei Bild/Text-Paare in einem Raster. Jede Rasterzeile zentriert ihre beiden
   Zellen fuer sich, dadurch sitzt jedes Bild auf der Mitte seines Textblocks. */
.split--paired { row-gap: clamp(3.5rem, 6vw, 5rem); }
@media (min-width: 820px) {
  .split--paired { grid-template-columns: 1fr 1fr; align-items: center; }

}



.split__media figure { margin: 0; }
.split__media img {
  width: 100%;
  max-height: 600px;          /* haelt die Zeilenhoehen vergleichbar */
  object-fit: cover;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}
.split__media figcaption { font-size: .85rem; color: var(--ink-500); margin-top: .7rem; text-align: center; }
.split__body > :last-child { margin-bottom: 0; }

/* Bildcollage: viele kleine Motive als Abrundung eines Abschnitts */
.collage { margin: 0; }
.collage__grid {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.collage__grid img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 12px; box-shadow: var(--shadow-sm);
  transition: transform .2s ease;
}
.collage__grid img:hover { transform: scale(1.03); }
.collage figcaption { margin-top: .9rem; text-align: center; }

/* Kleines Bild im Fliesstext, wenn eine ganze Bildspalte zu viel waere */
.inline-photo { margin: 1.6rem 0; max-width: 340px; }
.inline-photo img { width: 100%; border-radius: 14px; box-shadow: var(--shadow-sm); }

/* Viererraster: vier quadratische Bilder als eine Bildflaeche */
.quad { margin: 0; }
/* Hinweiskasten direkt unter einem Bild in der Bildspalte */
.media-note {
  background: var(--lagoon-700);
  color: #E3F2F1;
  border-radius: var(--radius-sm);
  padding: 1.15rem 1.35rem;
  margin: 1.1rem 0 0;
  font-size: .95rem;
}
.media-note strong { color: #fff; }

/* Zeile, in der Bildspalte und Textspalte gleich hoch abschliessen sollen.
   Das Bild fuellt dabei den Platz, der neben dem Kasten uebrig bleibt. */
@media (min-width: 820px) {
  .split--equal { align-items: stretch; }
  .split--equal .split__media { display: flex; flex-direction: column; }
  .split--equal .split__media figure { flex: 1 1 auto; min-height: 0; display: flex; }
  .split--equal .split__media img { width: 100%; height: 100%; object-fit: cover; max-height: none; }
}

/* Bildraster: zwei Breitformate oben, darunter zwei halbbreite Kacheln.
   Die untere Reihe ist zusammen wieder so hoch wie ein 16:9-Bild. */
.quad__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.split__media .quad__grid img {
  width: 100%; object-fit: cover;
  border-radius: 14px; box-shadow: var(--shadow-sm); max-height: none;
}
.split__media .quad__grid img:nth-child(-n+2) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.split__media .quad__grid img:nth-child(n+3)  { aspect-ratio: 8 / 9; }

/* Dreiergruppe fuer die drei Mahlzeiten: ein breites Bild oben, zwei darunter */
.meal-trio { margin: 0; }
.meal-trio__grid { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; }
.split__media .meal-trio__grid img {
  width: 100%; object-fit: cover; border-radius: 14px;
  box-shadow: var(--shadow-sm); max-height: none;
}
/* Seitenverhaeltnisse entsprechen exakt den Zuschnitten der Dateien,
   dadurch schneidet der Browser nichts zusaetzlich weg. */
.split__media .meal-trio__grid img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; height: auto; }
.split__media .meal-trio__grid img:not(:first-child) { aspect-ratio: 1 / 1; height: auto; }

/* Zwei Bilder uebereinander in einer Bildspalte */
.split__media--stack { display: grid; gap: 1.15rem; }
.split__media--stack img { height: 300px; max-height: none; }
.split__media--stack .photo-placeholder { aspect-ratio: auto; height: 300px; }
@media (max-width: 819px) {
  .split__media--stack img,
  .split__media--stack .photo-placeholder { height: 240px; }
}

/* Die Bildunterschrift haengt unter dem Bild, zaehlt aber nicht zur Hoehe.
   Sonst wird sie mitgemittelt und das Bild sitzt rund 17 px zu hoch.
   Gestapelte Bilder sind ausgenommen - dort wuerde sie das naechste Bild ueberlagern. */
@media (min-width: 820px) {
  .split__media:not(.split__media--stack) > figure:not(.meal-trio) { position: relative; }
  .split__media:not(.split__media--stack) > figure:not(.meal-trio) > figcaption {
    position: absolute; top: calc(100% + .65rem); left: 0; right: 0; margin-top: 0;
  }
}

/* Platzhalter, solange ein Foto noch fehlt - bewusst gestaltet, nicht kaputt */
.photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  border: 2px dashed var(--sand-300);
  background:
    radial-gradient(90% 70% at 50% 115%, rgba(13,143,146,.10) 0%, transparent 62%),
    var(--sand-100);
  text-align: center;
  padding: 1.5rem;
}
.photo-placeholder svg { color: var(--lagoon); opacity: .55; margin-bottom: .9rem; }
.photo-placeholder__title {
  font-family: var(--font-display); font-size: 1.15rem; color: var(--ink-900); margin: 0 0 .3rem;
}
.photo-placeholder__hint { font-size: .9rem; color: var(--ink-500); margin: 0; max-width: 22rem; }

figure { margin: 0; }
figcaption { font-size: .85rem; color: var(--ink-500); margin-top: .6rem; }

/* --- 12. Zwei-Spalten-Listen (für wen / für wen nicht) ------------------- */
.duo { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .duo { grid-template-columns: 1fr 1fr; } }

.panel {
  background: var(--white); border: 1px solid var(--sand-200);
  border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem);
}
.panel--yes { border-left: 3px solid var(--lagoon); }
.panel--no  { border-left: 3px solid var(--sun); }
.panel h3 { margin-bottom: 1rem; }
.panel ul { padding-left: 1.15rem; margin-bottom: 0; }
.panel li { font-size: .98rem; }

/* --- 13. Faktenbox / Steckbrief (v. a. Inselseiten) ---------------------- */
.factbox {
  background: var(--white); border: 1px solid var(--sand-200);
  border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 1.9rem);
  box-shadow: var(--shadow-sm);
}
.factbox h3 { font-size: 1.1rem; margin-bottom: 1.1rem; }
.factbox dl { display: grid; gap: 0; margin: 0; }
.factbox dt {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-300); padding-top: .85rem;
}
.factbox dd {
  margin: 0 0 .85rem; padding-bottom: .85rem;
  border-bottom: 1px solid var(--sand-200);
  color: var(--ink-900); font-weight: 500;
}
.factbox dd:last-of-type { border-bottom: 0; margin-bottom: 0; }

/* Summenzeile und Fussnote der Kostenbox */
.factbox__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin: 1.1rem 0 0; padding-top: 1rem;
  border-top: 2px solid var(--lagoon);
}
.factbox__total span {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-500);
}
.factbox__total b {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 600;
  color: var(--lagoon-900); line-height: 1;
}
.factbox__note { margin: 1rem 0 0; font-size: .85rem; color: var(--ink-500); }
.factbox dd .muted { font-size: .88em; }

/* --- 14. Unterkunfts-Komponente (Booking-Affiliate + späterer Direktbutton) */
.stay {
  background: var(--white); border: 1px solid var(--sand-200);
  border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 1.8rem);
  margin-bottom: 1.25rem;
}
.stay__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-bottom: .3rem; }
.stay__head h3 { margin: 0; }
.stay__price { font-size: .92rem; color: var(--ink-500); }
.stay__take { margin: .9rem 0 1.2rem; }
.stay__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.stay__adlabel {
  font-size: .74rem; color: var(--ink-300);
  width: 100%; margin-top: .3rem;
}

.affiliate-note {
  background: var(--sand-100); border: 1px solid var(--sand-200);
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem; font-size: .87rem; color: var(--ink-500);
  margin-bottom: 1.6rem;
}
.affiliate-note p { margin: 0; }

/* --- Beratungsseite ------------------------------------------------------ */
/* Ein einziger Block statt vieler Kaesten: Vorstellung, Leistungen, Preis.
   Getrennt wird mit Haarlinien, nicht mit Rahmen um jedes Element. */
.offer {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.offer__intro {
  display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: center;
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
}
@media (min-width: 760px) { .offer__intro { grid-template-columns: 220px 1fr; } }
/* Auf dem Handy erst Ueberschrift und Text, dann das Foto */
@media (max-width: 759px) {
  .offer__intro > img { order: 2; }
  .offer__intro > div { order: 1; }
}
.offer__intro img { width: 100%; border-radius: var(--radius-sm); display: block; }
.offer__intro h1 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom: .7rem;
}
.offer__intro p { margin: 0; color: var(--ink-700); }

/* Die drei Leistungen: nummeriert, durch Haarlinien getrennt */
.offer__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  border-top: 1px solid var(--sand-200);
}
@media (min-width: 760px) { .offer__list { grid-template-columns: repeat(3, 1fr); } }
.offer__list li {
  margin: 0;
  padding: clamp(1.3rem, 2.8vw, 1.8rem) clamp(1.6rem, 3.5vw, 2.6rem);
  border-top: 1px solid var(--sand-200);
}
@media (min-width: 760px) {
  .offer__list li { border-top: 0; border-left: 1px solid var(--sand-200); }
  .offer__list li:first-child { border-left: 0; }
}
.offer__num {
  display: block;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  color: var(--lagoon); margin-bottom: .5rem;
}
.offer__list h2 { font-size: 1.12rem; margin: 0 0 .4rem; }
.offer__list p { margin: 0; font-size: .94rem; color: var(--ink-500); }

/* Preiszeile als Abschluss des Blocks */
.offer__foot {
  background: var(--lagoon-900); color: #BFDEDC;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.6rem, 3.5vw, 2.6rem);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.2rem clamp(1.5rem, 4vw, 3rem);
}
.offer__price {
  font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.5rem);
  color: #fff; line-height: 1; margin: 0;
}
.offer__price small {
  display: block; font-family: var(--font-body);
  font-size: .8rem; font-weight: 500; color: #8FBFBD; margin-top: .4rem;
  letter-spacing: .02em;
}
.offer__steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem;
  font-size: .9rem; flex: 1 1 16rem;
}
.offer__steps li { margin: 0; display: flex; align-items: center; gap: .55rem .9rem; }
.offer__steps li + li::before { content: "›"; color: #5E9997; font-size: 1.1rem; line-height: 1; }
.offer__foot .btn { margin-left: auto; }

/* Kompaktes Formular */
.form--tight { gap: .85rem; }
.form--tight input, .form--tight select, .form--tight textarea {
  padding: .6rem .8rem; font-size: .96rem;
}
.form--tight textarea { min-height: 110px; }
.form--tight label { font-size: .85rem; margin-bottom: .25rem; }

.mail-note {
  font-size: .89rem; color: var(--ink-500);
  margin: .9rem 0 0;
}

/* Abschnitte dieser Seite duerfen enger stehen */
.section--compact { padding-block: clamp(2.2rem, 4.5vw, 3.4rem); }

/* --- 15. Beratungs-Block ------------------------------------------------- */
.advice {
  background: var(--lagoon-900);
  color: #D3E7E6;
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4.5vw, 3rem);
  display: grid; gap: 1.8rem; align-items: center;
}
@media (min-width: 820px) { .advice { grid-template-columns: 1.4fr 1fr; } }
.advice h2, .advice h3 { color: #fff; margin-bottom: .7rem; }
.advice p { margin-bottom: 0; }
.advice__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.advice-box {
  background: var(--lagoon-50);
  border: 1px solid #BEE0DE;
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 1.8rem);
}
.advice-box h3 { margin-bottom: .5rem; }
.advice-box p { margin-bottom: 1.1rem; }
.advice-box > :last-child { margin-bottom: 0; }

/* --- 16. Über uns -------------------------------------------------------- */
.about { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; }
@media (min-width: 820px) {
  .about { grid-template-columns: 440px 1fr; align-items: stretch; }
  /* Foto laeuft auf Texthoehe mit, damit beide Spalten gleich abschliessen */
  .about__photo { display: flex; }
  .about__photo img { width: 100%; height: 100%; object-fit: cover; }
}
.about__photo img { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.about__sig {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.15rem; color: var(--ink-900); margin-top: 1.4rem;
}

.stats { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin: 1.8rem 0; padding: 0; list-style: none; }
.stats li { margin: 0; }
.stats b {
  display: block; font-family: var(--font-display);
  font-size: 2rem; color: var(--lagoon-700); line-height: 1;
}
.stats span { font-size: .84rem; color: var(--ink-500); letter-spacing: .02em; }

/* --- 17. FAQ ------------------------------------------------------------- */
.faq { border-top: 1px solid var(--sand-200); }
.faq details {
  border-bottom: 1px solid var(--sand-200);
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 2.2rem 1.15rem 0;
  font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-900);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--lagoon); line-height: 1; font-family: var(--font-body);
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--lagoon-700); }
.faq__answer { padding: 0 2.2rem 1.3rem 0; }
.faq__answer > :last-child { margin-bottom: 0; }

/* --- 18. Formular -------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form label { display: block; font-size: .9rem; font-weight: 600; color: var(--ink-900); margin-bottom: .35rem; }
.form input, .form select, .form textarea {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .75rem .9rem;
  border: 1px solid var(--sand-300); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink-900);
}
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--lagoon); }
.form__check { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; }
.form__check input { width: auto; margin-top: .3rem; flex: 0 0 auto; }
.form__check label { font-weight: 400; margin: 0; }
.form__hint { font-size: .85rem; color: var(--ink-500); }
.form__hp { position: absolute; left: -9999px; }

/* --- 19. Breadcrumb ------------------------------------------------------ */
.breadcrumb { font-size: .85rem; color: var(--ink-500); padding-top: 1.2rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: .45rem; color: var(--ink-300); }

/* --- 20. Footer ---------------------------------------------------------- */
.site-footer {
  background: var(--ink-900); color: #A9C0BE;
  padding-block: 3.5rem 2rem;
  font-size: .93rem;
}
.site-footer a { color: #C9DEDC; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h2 {
  font-family: var(--font-body); font-size: .76rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #6E8B89; margin-bottom: 1rem;
}
.site-footer__grid { display: grid; gap: 2.2rem; }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer__brand p { color: #8FA9A7; max-width: 30rem; }
.site-footer__bottom {
  margin-top: 2.8rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; justify-content: space-between;
  font-size: .85rem; color: #7C9795;
}

/* --- 21. Hilfsklassen ---------------------------------------------------- */
.todo {
  background: var(--sun-50);
  border-bottom: 1px dashed var(--sun);
  color: var(--sun);
  font-size: .92em; font-weight: 600;
  padding: 0 .3em; border-radius: 3px;
}
.muted { color: var(--ink-500); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack-lg > * + * { margin-top: 2.2rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- 21b. Rechtstexte (Impressum, Datenschutz) --------------------------- */
.prose--legal h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-top: 2.8rem; margin-bottom: .7rem; }
.prose--legal h2:first-of-type { margin-top: 2rem; }
.prose--legal ul { margin-bottom: 1.1rem; }
.legal-adresse { line-height: 1.85; }
mark.todo {
  background: #FFF0C2; color: var(--sun);
  border: 1px dashed #E0B354; border-radius: 4px;
  padding: .1em .35em; font-size: .94em; font-weight: 600;
}
.legal-note {
  background: var(--sand-100);
  border-left: 3px solid var(--lagoon);
  border-radius: 0 10px 10px 0;
  padding: 1.1rem 1.3rem;
}

/* --- 22. Motion-Präferenz ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .card:hover, .btn:hover { transform: none; }
}

/* --- 23. Druck ----------------------------------------------------------- */
@media print {
  .site-header, .jumpnav, .hero__actions, .advice, .site-footer { display: none; }
  body { background: #fff; }
}