/* ============================================================
   INSEL-LOUNGE BORKUM — "Salzlicht"
   Editorial coastal design system
   Display: Fraunces · Body: Hanken Grotesk
   ============================================================ */

:root{
  /* paper & ink */
  --paper:      #F4EEE2;   /* warm sand paper */
  --paper-2:    #ECE3D2;   /* deeper sand */
  --shell:      #FBF7EE;   /* near-white cream */
  --ink:        #16302E;   /* deep north-sea petrol (text) */
  --ink-2:      #2E4845;   /* softened ink */
  --ink-soft:   #5B716D;   /* muted */

  /* sea & accents */
  --sea:        #1C4B47;   /* deep teal */
  --sea-2:      #2E6E66;
  --foam:       #9DBDB6;   /* pale sea */
  --grass:      #8C9A5E;   /* dune grass sage */
  --amber:      #C9743A;   /* sunset terracotta (primary accent) */
  --amber-2:    #E0A064;   /* warm gold */
  --rust:       #A85A2C;

  /* hero dawn */
  --dawn-top:   #173433;
  --dawn-mid:   #2A4B47;
  --dawn-band:  #C77B47;
  --dawn-sea:   #0E2826;

  /* type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --maxw: 1240px;
  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --radius: 4px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  font-size:clamp(1rem, .55vw + .9rem, 1.18rem);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }

/* paper grain over the whole page */
body::before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.display{
  font-family:var(--display);
  font-weight:400;
  font-optical-sizing:auto;
  line-height:1.02;
  letter-spacing:-.015em;
  font-size:clamp(2.4rem, 6vw, 5rem);
  color:var(--ink);
}
.display em{ color:var(--amber); font-weight:300; }
.display--light{ color:var(--shell); }
.display--light em{ color:var(--amber-2); }

/* ============================================================
   LOAD CURTAIN
   ============================================================ */
.curtain{
  position:fixed; inset:0; z-index:10000;
  background:var(--ink);
  display:grid; place-items:center;
  animation:curtainUp 1.1s var(--ease) .9s forwards;
}
.curtain__word{
  font-family:var(--display); font-size:clamp(2rem,7vw,4rem);
  color:var(--shell); font-style:italic; letter-spacing:-.02em;
  opacity:0; transform:translateY(14px);
  animation:moinIn .7s var(--ease) .15s forwards;
}
@keyframes moinIn{ to{ opacity:1; transform:none; } }
@keyframes curtainUp{ to{ transform:translateY(-101%); } }
@media (prefers-reduced-motion: reduce){
  .curtain{ display:none; }
}

/* ============================================================
   TIDE — scroll progress
   ============================================================ */
.tide{ position:fixed; top:0; left:0; right:0; height:2px; z-index:1200; }
.tide__fill{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--amber), var(--amber-2));
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad);
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(12px) saturate(1.1);
  padding-top:.7rem; padding-bottom:.7rem;
  box-shadow:0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}
/* light over the dark hero, dark once stuck over paper */
.nav__brand{ display:flex; align-items:center; gap:.6rem; color:var(--shell); transition:color .4s var(--ease); }
.nav.is-stuck .nav__brand{ color:var(--ink); }
.nav__mark{ color:var(--amber-2); display:flex; }
.nav.is-stuck .nav__mark{ color:var(--amber); }
.nav__name{ font-family:var(--display); font-weight:500; font-size:1.15rem; letter-spacing:-.01em; }
.nav__dot{ margin:0 .35rem; color:var(--amber-2); }
.nav.is-stuck .nav__dot{ color:var(--amber); }
.nav__sub{ font-weight:300; font-style:italic; color:color-mix(in srgb, currentColor 65%, transparent); }

.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); }
.nav__links a{
  font-size:.92rem; font-weight:500; letter-spacing:.01em;
  color:color-mix(in srgb, var(--shell) 86%, transparent);
  position:relative; padding:.2rem 0; transition:color .25s;
}
.nav.is-stuck .nav__links a{ color:var(--ink-2); }
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
  background:var(--amber-2); transition:width .3s var(--ease);
}
.nav.is-stuck .nav__links a:not(.nav__cta)::after{ background:var(--amber); }
.nav__links a:not(.nav__cta):hover{ color:var(--shell); }
.nav.is-stuck .nav__links a:not(.nav__cta):hover{ color:var(--ink); }
.nav__links a:not(.nav__cta):hover::after{ width:100%; }

.nav__cta{
  background:var(--amber); color:var(--shell)!important;
  padding:.55rem 1.15rem!important; border-radius:100px;
  transition:background .3s, transform .3s, color .3s;
}
.nav__cta:hover{ background:var(--rust); transform:translateY(-1px); }

.nav__burger{
  display:none; background:none; border:none; cursor:pointer;
  width:34px; height:34px; flex-direction:column; gap:6px; align-items:center; justify-content:center;
}
.nav__burger span{ width:22px; height:2px; background:var(--shell); transition:.3s var(--ease); }
.nav.is-stuck .nav__burger span{ background:var(--ink); }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:8rem var(--pad) 6rem;
  color:var(--shell);
  isolation:isolate;
}
.hero__sky{
  position:absolute; inset:0; z-index:-3;
  background:
    linear-gradient(180deg,
      var(--dawn-top) 0%,
      var(--dawn-mid) 38%,
      var(--dawn-band) 60%,
      #8a4f31 70%,
      var(--dawn-sea) 82%,
      #08201e 100%);
}
.hero__sun{
  position:absolute; left:78%; top:46%; width:min(46vw,380px); aspect-ratio:1; z-index:-2;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,222,170,.9) 0%, rgba(231,179,106,.45) 28%, transparent 62%);
  filter:blur(2px);
  animation:sunDrift 16s ease-in-out infinite alternate;
}
@keyframes sunDrift{ from{ transform:translate(-50%,-48%);} to{ transform:translate(-50%,-54%);} }
.hero__stars{
  position:absolute; inset:0 0 60% 0; z-index:-2; opacity:.5;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 34% 12%, #fff, transparent),
    radial-gradient(1px 1px at 58% 28%, #fff, transparent),
    radial-gradient(1px 1px at 72% 16%, #fff, transparent),
    radial-gradient(1px 1px at 88% 30%, #fff, transparent),
    radial-gradient(1px 1px at 22% 36%, #fff, transparent);
}
.hero__horizon{
  position:absolute; left:0; right:0; bottom:-1px; z-index:-1;
  width:100%; height:46vh; min-height:300px;
}
.hero__horizon .dune--far{ fill:#123230; }
.hero__horizon .dune--near{ fill:#0b211f; }
.lighthouse .beam{ animation:beam 4.5s ease-in-out infinite; transform-origin:center; }
@keyframes beam{ 0%,100%{ opacity:.4; } 50%{ opacity:1; filter:drop-shadow(0 0 6px var(--amber-2)); } }
.birds{ animation:birdsFloat 9s ease-in-out infinite alternate; }
@keyframes birdsFloat{ from{ transform:translate(0,0);} to{ transform:translate(26px,-12px);} }

.hero__grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:radial-gradient(120% 80% at 50% 30%, transparent 55%, rgba(6,20,18,.55) 100%);
}

.hero__inner{ max-width:var(--maxw); margin:0 auto; width:100%; }
.hero__kicker{
  display:flex; align-items:center; gap:.8rem;
  text-transform:uppercase; letter-spacing:.32em; font-size:.72rem; font-weight:600;
  color:var(--amber-2);
  opacity:0; animation:fadeUp .8s var(--ease) 1.2s forwards;
}
.hero__kicker .line{ width:46px; height:1px; background:var(--amber-2); display:inline-block; }

.hero__title{
  font-family:var(--display); font-weight:300;
  font-size:clamp(3.4rem, 13vw, 11rem);
  line-height:.92; letter-spacing:-.04em; margin:.15em 0 .35em;
  text-shadow:0 4px 40px rgba(0,0,0,.3);
}
.hero__title .reveal-word{
  display:inline-block; opacity:0; transform:translateY(40px) rotate(2deg);
  animation:wordUp 1s var(--ease) forwards;
}
.hero__title .reveal-word:nth-child(1){ animation-delay:1.25s; }
.hero__title .reveal-word:nth-child(2){ animation-delay:1.4s; color:var(--amber-2); font-style:italic; }
@keyframes wordUp{ to{ opacity:1; transform:none; } }

.hero__lead{
  font-size:clamp(1.05rem,1.6vw,1.4rem); max-width:30ch; line-height:1.5;
  color:color-mix(in srgb, var(--shell) 92%, transparent); font-weight:300;
  opacity:0; animation:fadeUp .9s var(--ease) 1.65s forwards;
}
.hero__actions{
  display:flex; gap:1rem; flex-wrap:wrap; margin:2rem 0 0;
  opacity:0; animation:fadeUp .9s var(--ease) 1.85s forwards;
}
.hero__facts{
  list-style:none; display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:3rem;
  opacity:0; animation:fadeUp .9s var(--ease) 2.05s forwards;
}
.hero__facts li{
  font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:color-mix(in srgb,var(--shell) 78%, transparent);
  position:relative; padding-left:1.1rem;
}
.hero__facts li::before{ content:"·"; position:absolute; left:0; color:var(--amber-2); font-size:1.4em; line-height:.6; }

.hero__scroll{
  position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:color-mix(in srgb,var(--shell) 70%, transparent);
  opacity:0; animation:fadeUp 1s var(--ease) 2.3s forwards;
}
.hero__scrollline{ width:1px; height:42px; background:linear-gradient(var(--amber-2),transparent); position:relative; overflow:hidden; }
.hero__scrollline::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--shell); animation:scrolldrop 2s ease-in-out infinite; }
@keyframes scrolldrop{ 0%{ top:-50%; } 60%,100%{ top:100%; } }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:none; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--body); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:.85rem 1.6rem; border-radius:100px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
  white-space:nowrap;
}
.btn--solid{ background:var(--amber); color:var(--shell); box-shadow:0 8px 24px -10px rgba(201,116,58,.7); }
.btn--solid:hover{ background:var(--rust); transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(168,90,44,.8); }
.btn--ghost{ border-color:color-mix(in srgb,var(--shell) 55%, transparent); color:var(--shell); }
.btn--ghost:hover{ background:var(--shell); color:var(--ink); transform:translateY(-2px); }
.btn--line{ border-color:var(--ink); color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:var(--shell); transform:translateY(-2px); }
.btn--full{ width:100%; justify-content:center; }

/* ============================================================
   SECTION FRAME
   ============================================================ */
section{ padding:clamp(4.5rem,10vw,9rem) var(--pad); position:relative; }
.section-index{
  font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; font-weight:600;
  color:var(--amber); margin-bottom:clamp(2rem,5vw,3.5rem);
  max-width:var(--maxw); margin-left:auto; margin-right:auto; width:100%;
}
.section-index--light{ color:var(--amber-2); }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   01 WILLKOMMEN
   ============================================================ */
.welcome{ background:var(--paper); }
.welcome__grid{
  max-width:var(--maxw); margin:0 auto; width:100%;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:start;
}
.moin{
  font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(2.6rem,6vw,5rem); line-height:.98; letter-spacing:-.02em; color:var(--ink);
}
.moin::first-line{ font-style:normal; }
.welcome__body{ padding-top:.5rem; }
.lead-para{ font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.5; color:var(--ink); font-weight:400; margin-bottom:1.4rem; }
.welcome__body p{ color:var(--ink-2); margin-bottom:1.2rem; max-width:52ch; }
.signature{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:2.4rem; color:var(--amber); margin-top:1.6rem; line-height:1;
}
.signature__role{ font-size:.82rem; letter-spacing:.04em; color:var(--ink-soft); text-transform:uppercase; margin-top:.3rem; }

/* wave divider */
.wave-divider svg{ width:100%; height:54px; display:block; }
.wave-divider path{ fill:var(--ink); }

/* ============================================================
   02 DIE WOHNUNG
   ============================================================ */
.apt{ background:var(--ink); color:var(--shell); }
.apt .section-index{ color:var(--amber-2); }

/* ============================================================
   03 BORKUM (island) — dark dusk
   ============================================================ */
.island{
  background:
    radial-gradient(120% 70% at 80% 0%, #234a3f 0%, transparent 55%),
    linear-gradient(180deg, #0f2a28, #0a201e);
  color:var(--shell);
}
.island__head{ max-width:var(--maxw); margin:0 auto; width:100%; display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(1.5rem,5vw,5rem); align-items:end; }
.island__intro{ color:color-mix(in srgb,var(--shell) 76%, transparent); max-width:46ch; }

.day{ list-style:none; max-width:var(--maxw); margin:clamp(3rem,7vw,5rem) auto 0; width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.day__item{ padding:1.8rem 1.4rem 1.8rem 0; border-top:1px solid color-mix(in srgb,var(--shell) 20%, transparent); position:relative; padding-right:1.4rem; }
.day__item::before{ content:""; position:absolute; top:-1px; left:0; width:40px; height:2px; background:var(--amber-2); }
.day__time{ font-family:var(--display); font-style:italic; font-size:1.05rem; color:var(--amber-2); display:block; margin-bottom:1.4rem; letter-spacing:.02em; }
.day__item h3{ font-family:var(--display); font-weight:500; font-size:1.25rem; margin-bottom:.5rem; color:var(--shell); line-height:1.15; }
.day__item p{ font-size:.9rem; color:color-mix(in srgb,var(--shell) 68%, transparent); }

.island__note{ max-width:var(--maxw); margin:clamp(2.5rem,6vw,4rem) auto 0; width:100%; }
.island__note p{ max-width:70ch; font-size:1.02rem; color:color-mix(in srgb,var(--shell) 82%, transparent); border-left:2px solid var(--amber); padding-left:1.4rem; }
.island__note strong{ color:var(--amber-2); font-weight:600; }

/* ============================================================
   06 KONTAKT
   ============================================================ */
.contact{ background:var(--paper); }
.contact__grid{ max-width:var(--maxw); margin:0 auto; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.contact__lead{ color:var(--ink-2); max-width:40ch; margin:1.2rem 0 2.4rem; }
.contact__details{ list-style:none; display:grid; gap:1.4rem; }
.contact__details li{ display:flex; flex-direction:column; gap:.2rem; }
.contact__label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); font-weight:600; }
.contact__details a{ position:relative; width:fit-content; }
.contact__details a::after{ content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.contact__details a:hover::after{ transform:scaleX(1); }

/* form */
.contact__form{ background:var(--shell); border:1px solid color-mix(in srgb,var(--ink) 12%, transparent); border-radius:8px; padding:clamp(1.6rem,3vw,2.4rem); }
.field{ margin-bottom:1.1rem; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.1rem; }
.field label{ display:block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; margin-bottom:.45rem; }
.field input, .field textarea{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid color-mix(in srgb,var(--ink) 14%, transparent);
  border-radius:4px; padding:.8rem .9rem; transition:border-color .25s, box-shadow .25s; resize:vertical;
}
.field input::placeholder, .field textarea::placeholder{ color:color-mix(in srgb,var(--ink) 35%, transparent); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 22%, transparent); }
.contact__hint{ font-size:.8rem; color:var(--ink-soft); text-align:center; margin-top:.9rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink); color:var(--shell); padding:clamp(3rem,6vw,5rem) var(--pad) 2rem; }
.foot__top{ max-width:var(--maxw); margin:0 auto; width:100%; display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-bottom:2.5rem; border-bottom:1px solid color-mix(in srgb,var(--shell) 16%, transparent); }
.foot__brand{ display:flex; flex-direction:column; gap:.3rem; }
.foot__mark{ color:var(--amber-2); margin-bottom:.4rem; }
.foot__name{ font-family:var(--display); font-weight:500; font-size:1.6rem; letter-spacing:-.01em; }
.foot__tag{ font-size:.84rem; color:color-mix(in srgb,var(--shell) 65%, transparent); font-style:italic; }
.foot__nav{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem 2.5rem; align-content:start; }
.foot__nav a{ font-size:.92rem; color:color-mix(in srgb,var(--shell) 78%, transparent); transition:color .25s; width:fit-content; }
.foot__nav a:hover{ color:var(--amber-2); }
.foot__bottom{ max-width:var(--maxw); margin:0 auto; width:100%; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.6rem; }
.foot__bottom p{ font-size:.8rem; color:color-mix(in srgb,var(--shell) 55%, transparent); }
.foot__credit{ font-style:italic; }

/* back to top */
.totop{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:1000;
  width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--shell);
  display:grid; place-items:center; font-size:1.1rem;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s, transform .3s, visibility .3s, background .3s;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.5);
}
.totop.show{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--amber); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .stats{ grid-template-columns:repeat(3,1fr); }
  .amen__grid{ grid-template-columns:repeat(2,1fr); }
  .highlights{ grid-template-columns:1fr; }
  .day{ grid-template-columns:repeat(2,1fr); }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); }
  .quotes{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem;
    background:var(--ink); padding:3rem 2.4rem; transform:translateX(100%);
    transition:transform .45s var(--ease); box-shadow:-20px 0 60px -20px rgba(0,0,0,.5);
  }
  .nav.is-open .nav__links{ transform:none; }
  .nav__links a, .nav.is-stuck .nav__links a{ font-size:1.2rem; color:color-mix(in srgb,var(--shell) 85%, transparent); }
  .nav__links a:not(.nav__cta):hover, .nav.is-stuck .nav__links a:not(.nav__cta):hover{ color:var(--shell); }
  .nav__cta{ margin-top:.5rem; }
  .nav__burger{ display:flex; z-index:1; }
  .nav.is-open .nav__burger span{ background:var(--shell); }

  .welcome__grid, .apt__head, .island__head, .prices__head, .contact__grid{ grid-template-columns:1fr; }
  .rate-cards{ grid-template-columns:1fr; }
  .rate--feature{ transform:none; }
  .rate--feature:hover{ transform:translateY(-5px); }
  .voices__head{ grid-template-columns:1fr; align-items:start; }
  .included ul{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .amen__grid{ grid-template-columns:1fr; }
  .day{ grid-template-columns:1fr; }
  .gallery__grid{ grid-template-columns:1fr; }
  .included ul{ grid-template-columns:1fr; }
  .hero__facts{ gap:.8rem 1.4rem; }
  .field--row{ grid-template-columns:1fr; }
  .foot__top{ flex-direction:column; }
}

/* focus visibility */
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }

/* ============================================================
   COLLECTION — homepage product grid
   ============================================================ */
.collection{ background:var(--paper); }
.collection__head{ max-width:var(--maxw); margin:0 auto; width:100%; display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,5vw,5rem); align-items:end; }
.collection__intro{ color:var(--ink-2); max-width:46ch; }

.products{
  max-width:var(--maxw); margin:clamp(3rem,7vw,5rem) auto 0; width:100%;
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.4rem,3vw,2.2rem);
}
.product{
  --acc:var(--amber); --acc-2:var(--amber-2);
  position:relative; display:flex; flex-direction:column; background:var(--shell);
  border:1px solid color-mix(in srgb,var(--ink) 12%, transparent); border-radius:12px; overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.product:hover{ transform:translateY(-6px); box-shadow:0 34px 64px -34px rgba(22,48,46,.42); border-color:var(--acc); }
.product__link{ position:absolute; inset:0; z-index:2; }
.product__scene{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); }
.product__scene svg{ width:100%; height:100%; transition:transform 1.3s var(--ease); }
.product:hover .product__scene svg{ transform:scale(1.06); }
.product__rank{ position:absolute; top:.9rem; left:1.1rem; font-family:var(--display); font-style:italic; font-size:1rem; color:var(--shell); text-shadow:0 1px 8px rgba(0,0,0,.4); letter-spacing:.02em; }
.product__rating{ position:absolute; top:.9rem; right:1.1rem; background:color-mix(in srgb,var(--ink) 82%, transparent); backdrop-filter:blur(4px); color:var(--shell); font-size:.78rem; font-weight:600; padding:.34rem .66rem; border-radius:100px; display:inline-flex; gap:.32rem; align-items:center; }
.product__rating b{ color:var(--acc-2); }
.product__body{ padding:1.5rem 1.6rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.product__name{ font-family:var(--display); font-weight:500; font-size:clamp(1.5rem,2.2vw,1.95rem); letter-spacing:-.015em; color:var(--ink); line-height:1.05; }
.product__meaning{ font-style:italic; color:var(--ink-soft); font-size:.85rem; margin:.25rem 0 .9rem; }
.product__blurb{ color:var(--ink-2); font-size:.95rem; margin-bottom:1.1rem; }
.product__chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.3rem; }
.chip{ font-size:.78rem; font-weight:500; color:var(--ink-2); background:var(--paper); border:1px solid color-mix(in srgb,var(--ink) 12%, transparent); padding:.32rem .72rem; border-radius:100px; display:inline-flex; gap:.4rem; align-items:center; }
.chip--acc{ background:color-mix(in srgb,var(--acc) 13%, transparent); border-color:color-mix(in srgb,var(--acc) 38%, transparent); color:color-mix(in srgb,var(--acc) 78%, var(--ink)); }
.product__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1.1rem; border-top:1px solid color-mix(in srgb,var(--ink) 10%, transparent); }
.product__price{ font-size:.82rem; color:var(--ink-soft); line-height:1.3; }
.product__price b{ display:block; font-family:var(--display); font-size:1.15rem; color:var(--ink); font-weight:500; }
.product__go{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.92rem; color:var(--acc); white-space:nowrap; }
.product__go svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.product:hover .product__go svg{ transform:translateX(4px); }
.product__ext{ position:relative; z-index:3; }

/* feature card (first apartment) spans full width, horizontal on desktop */
.product--feature{ grid-column:1 / -1; flex-direction:row; }
.product--feature .product__scene{ flex:0 0 54%; aspect-ratio:auto; }
.product--feature .product__body{ padding:clamp(1.8rem,3vw,2.8rem); justify-content:center; }
.product--feature .product__name{ font-size:clamp(1.9rem,3vw,2.6rem); }
.product--feature .product__blurb{ font-size:1.02rem; max-width:46ch; }

/* collection trust strip */
.trust{ background:var(--sea); color:var(--shell); }
.trust__inner{ max-width:var(--maxw); margin:0 auto; width:100%; display:grid; grid-template-columns:auto 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.trust__rating{ display:flex; flex-direction:column; gap:.15rem; }
.trust__num{ font-family:var(--display); font-weight:300; font-size:clamp(3rem,6vw,5rem); line-height:1; color:var(--amber-2); }
.trust__stars{ color:var(--amber-2); letter-spacing:.16em; }
.trust__count{ font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:color-mix(in srgb,var(--shell) 70%, transparent); }
.trust__quote{ font-family:var(--display); font-weight:300; font-style:italic; font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.35; color:var(--shell); }
.trust__quote span{ display:block; font-family:var(--body); font-style:normal; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:color-mix(in srgb,var(--shell) 60%, transparent); margin-top:1rem; }

/* ============================================================
   DETAIL PAGE
   ============================================================ */
body[data-apt]{ /* per-apartment accent injected inline via style attr */ }

.dhero{
  --acc:var(--amber); --acc-2:var(--amber-2);
  position:relative; min-height:90svh; display:flex; align-items:flex-end;
  padding:7rem var(--pad) 4rem; color:var(--shell); overflow:hidden; isolation:isolate;
}
.dhero__sky{
  position:absolute; inset:0; z-index:-3;
  background:
    radial-gradient(80% 60% at 78% 38%, color-mix(in srgb,var(--acc-2) 55%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, #143230 0%, #1d3b38 42%, color-mix(in srgb,var(--acc) 60%, #2a4b47) 64%, #102b29 84%, #08201e 100%);
}
.dhero__horizon{ position:absolute; left:0; right:0; bottom:-1px; z-index:-1; width:100%; height:42vh; min-height:260px; }
.dhero__horizon .dune--far{ fill:#123230; }
.dhero__horizon .dune--near{ fill:#0b211f; }
.dhero__grain{ position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(120% 80% at 50% 30%, transparent 55%, rgba(6,20,18,.55) 100%); }
.dhero__inner{ max-width:var(--maxw); margin:0 auto; width:100%; }
.dhero__kicker{ display:flex; align-items:center; gap:.7rem; text-transform:uppercase; letter-spacing:.28em; font-size:.72rem; font-weight:600; color:var(--acc-2); margin-bottom:1rem; }
.dhero__kicker .line{ width:38px; height:1px; background:var(--acc-2); }
.dhero__title{ font-family:var(--display); font-weight:300; font-size:clamp(2.8rem,8vw,6.5rem); line-height:.95; letter-spacing:-.03em; text-shadow:0 4px 40px rgba(0,0,0,.3); }
.dhero__meaning{ font-style:italic; color:color-mix(in srgb,var(--shell) 70%, transparent); font-size:.95rem; margin-top:.6rem; max-width:52ch; }
.dhero__tag{ font-size:clamp(1.05rem,1.7vw,1.45rem); font-weight:300; max-width:42ch; margin:1.2rem 0 0; color:color-mix(in srgb,var(--shell) 92%, transparent); }
.dhero__chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; margin:1.8rem 0 0; }
.dhero__chips li{ font-size:.82rem; font-weight:500; padding:.4rem .85rem; border:1px solid color-mix(in srgb,var(--shell) 35%, transparent); border-radius:100px; color:color-mix(in srgb,var(--shell) 88%, transparent); }
.dhero__actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.btn--acc{ background:var(--acc); color:var(--shell); box-shadow:0 8px 24px -10px color-mix(in srgb,var(--acc) 70%, transparent); }
.btn--acc:hover{ filter:brightness(.92); transform:translateY(-2px); }

.backlink{ display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem; font-weight:600; letter-spacing:.02em; color:inherit; }
.backlink:hover{ color:var(--amber); }

.dsection{ padding:clamp(4rem,9vw,7rem) var(--pad); }
.dsection__inner{ max-width:var(--maxw); margin:0 auto; width:100%; }
.dlede{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.dlede__desc p{ font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.6; color:var(--ink); }
.dlede__hi{ list-style:none; display:flex; flex-direction:column; gap:.9rem; }
.dlede__hi li{ display:flex; gap:.8rem; align-items:flex-start; font-weight:500; color:var(--ink); }
.dlede__hi i{ flex:0 0 24px; width:24px; height:24px; color:var(--acc); }
.dlede__hi svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* specs (paper) */
.specs{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:1px; background:color-mix(in srgb,var(--ink) 12%, transparent); border:1px solid color-mix(in srgb,var(--ink) 12%, transparent); border-radius:8px; overflow:hidden; margin-top:clamp(2rem,4vw,3rem); }
.specs li{ background:var(--shell); padding:1.4rem 1.2rem; display:flex; flex-direction:column; gap:.25rem; }
.specs__num{ font-family:var(--display); font-weight:300; font-size:clamp(2rem,3.4vw,2.9rem); line-height:1; color:var(--acc); }
.specs__unit{ font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }

/* amenities (paper) */
.amen2{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.2rem 1.5rem; margin-top:clamp(1.5rem,3vw,2.2rem); }
.amen2 li{ display:flex; align-items:center; gap:.7rem; padding:.7rem 0; border-bottom:1px solid color-mix(in srgb,var(--ink) 9%, transparent); font-size:.96rem; color:var(--ink-2); }
.amen2 i{ flex:0 0 18px; width:18px; height:18px; color:var(--acc); }
.amen2 i svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

.dgallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,2vw,1.4rem); margin-top:clamp(2rem,4vw,3rem); }
.dscene{ position:relative; aspect-ratio:4/3; border-radius:8px; overflow:hidden; border:1px solid color-mix(in srgb,var(--ink) 12%, transparent); }
.dscene svg{ width:100%; height:100%; }
.dscene figcaption{ position:absolute; left:0; right:0; bottom:0; padding:.9rem 1rem .8rem; background:linear-gradient(transparent, rgba(8,22,20,.8)); color:var(--shell); font-family:var(--display); font-weight:500; font-size:1rem; }

.dloc{ background:var(--paper-2); }
.dloc__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.dloc__note{ color:var(--ink-2); }
.dloc__beach{ font-family:var(--display); font-weight:300; font-style:italic; font-size:clamp(1.6rem,3vw,2.4rem); color:var(--ink); line-height:1.1; }
.dloc__beach b{ color:var(--acc); font-style:normal; font-weight:400; }

.dreview{ background:var(--ink); color:var(--shell); text-align:center; }
.dreview__inner{ max-width:760px; margin:0 auto; }
.dreview__stars{ color:var(--acc-2); letter-spacing:.2em; font-size:1.2rem; margin-bottom:1.2rem; }
.dreview__quote{ font-family:var(--display); font-weight:300; font-style:italic; font-size:clamp(1.4rem,3vw,2.3rem); line-height:1.35; }
.dreview__by{ font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:color-mix(in srgb,var(--shell) 60%, transparent); margin-top:1.4rem; }

/* booking band → external listing */
.book-band{ background:var(--acc); color:var(--shell); }
.book-band__inner{ max-width:var(--maxw); margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.book-band h2{ font-family:var(--display); font-weight:400; font-size:clamp(1.8rem,3.5vw,2.8rem); line-height:1.05; color:var(--shell); max-width:18ch; }
.book-band p{ color:color-mix(in srgb,var(--shell) 85%, transparent); font-size:.92rem; margin-top:.5rem; }
.book-band .btn{ background:var(--shell); color:var(--ink); border-color:var(--shell); }
.book-band .btn:hover{ background:var(--ink); color:var(--shell); transform:translateY(-2px); }

/* cross links to other apartments */
.cross__title{ font-family:var(--display); font-weight:300; font-style:italic; font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:clamp(1.5rem,3vw,2.2rem); color:var(--ink); }
.cross__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,2vw,1.2rem); }
.mini{ position:relative; display:flex; flex-direction:column; background:var(--shell); border:1px solid color-mix(in srgb,var(--ink) 12%, transparent); border-radius:10px; overflow:hidden; transition:transform .4s var(--ease), border-color .4s; --acc:var(--amber); }
.mini:hover{ transform:translateY(-4px); border-color:var(--acc); }
.mini__scene{ aspect-ratio:5/3; overflow:hidden; background:var(--paper-2); }
.mini__scene svg{ width:100%; height:100%; }
.mini__body{ padding:.9rem 1rem 1rem; }
.mini__name{ font-family:var(--display); font-weight:500; font-size:1.1rem; color:var(--ink); }
.mini__meta{ font-size:.8rem; color:var(--ink-soft); margin-top:.15rem; }

@media (max-width:1000px){
  .products{ grid-template-columns:1fr; }
  .product--feature{ flex-direction:column; }
  .product--feature .product__scene{ flex:none; aspect-ratio:16/10; }
  .collection__head, .dlede, .dloc__grid{ grid-template-columns:1fr; }
  .cross__grid{ grid-template-columns:repeat(2,1fr); }
  .dgallery{ grid-template-columns:1fr; }
  .trust__inner{ grid-template-columns:1fr; align-items:start; gap:1.5rem; }
}
@media (max-width:560px){
  .cross__grid{ grid-template-columns:1fr; }
  .book-band__inner{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   REVIEW FIXES — per-apartment accent, contrast, orientation
   ============================================================ */
/* page-wide accent so the whole detail page commits to one colour */
body[data-apt="insel-lounge"]{ --acc:#C9743A; --acc-2:#E6AE72; }
body[data-apt="ausguck"]{ --acc:#2F7068; --acc-2:#74A8A0; }
body[data-apt="mien-hunk"]{ --acc:#6F7E42; --acc-2:#A3AE6C; }
body[data-apt="strandmuschel"]{ --acc:#B9852F; --acc-2:#DDB763; }
body[data-apt="muschelfeld"]{ --acc:#3C8B83; --acc-2:#79B5AE; }

/* route shared accents to the page's apartment colour (no more orange leak) */
body[data-apt] .section-index{ color:color-mix(in srgb, var(--acc) 64%, var(--ink)); }
body[data-apt] .backlink:hover{ color:var(--acc); }
body[data-apt] .totop:hover{ background:var(--acc); }
body[data-apt] :focus-visible{ outline-color:var(--acc); }
body[data-apt] .nav__cta{ background:var(--acc); }
body[data-apt] .nav__cta:hover{ background:color-mix(in srgb, var(--acc) 78%, #000); }

/* readable accent link on light product cards (AA on light accents) */
.product__go{ color:color-mix(in srgb, var(--acc) 70%, var(--ink)); }

/* booking band: deepen the accent + opaque cream text so it always clears WCAG AA */
.book-band{ background:color-mix(in srgb, var(--acc) 65%, var(--ink)); }
.book-band p{ color:var(--shell); }

/* active nav link — scroll-spy orientation on the long homepage scroll */
.nav__links a.is-active::after{ width:100%; }
.nav.is-stuck .nav__links a.is-active{ color:var(--ink); }
.nav:not(.is-stuck) .nav__links a.is-active{ color:var(--shell); }

/* detail nav: guarantee contrast at the very top of the coloured hero */
.nav.is-detail:not(.is-stuck)::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(8,22,20,.55), rgba(8,22,20,.12) 60%, transparent);
}

/* ============================================================
   REAL PHOTOS
   ============================================================ */
.product__scene img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.3s var(--ease); }
.product:hover .product__scene img{ transform:scale(1.06); }
.product--feature .product__scene{ min-height:340px; }

.dscene img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s var(--ease); }
.dscene:hover img{ transform:scale(1.05); }
.mini__scene img{ width:100%; height:100%; object-fit:cover; display:block; }

/* detail hero with a real cover photo */
.dhero__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; }
.dhero__overlay{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,20,18,.50) 0%, rgba(8,20,18,.12) 32%, rgba(8,20,18,.55) 70%, rgba(6,18,16,.93) 100%),
    linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--acc) 50%, transparent) 100%);
}