/* ============================================================
   SPREE MARINE  |  Zentrales Stylesheet
   Branding: Marineblau, Gold, Weiß
   Zielgruppe: Bootseigner 50+, daher große Schrift,
   hoher Kontrast, ruhige und klare Gestaltung.
   ============================================================ */

/* ---------- Schriften (lokal gehostet, DSGVO-konform) ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/archivo-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/archivo-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/archivo-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/public-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/public-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/public-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/public-sans-latin-700-normal.woff2') format('woff2')}

/* ---------- Design-Tokens ---------- */
:root{
  --navy:       #16243D;   /* Primärfarbe, Flächen und Buttons */
  --navy-deep:  #0F1A2E;   /* Dunkle Sektionen, Footer */
  --gold:       #C9A961;   /* Akzentfarbe, Eyebrows, Badges */
  --gold-deep:  #A98A45;   /* Gold auf hellem Grund (Kontrast) */
  --paper:      #F6F8F9;   /* Heller Sektionshintergrund */
  --white:      #FFFFFF;
  --ink:        #1B2330;   /* Fließtext */
  --ink-soft:   #4A5568;   /* Sekundärtext */
  --line:       #DCE3EA;   /* Rahmen und Trennlinien */
  --water:      #E9F0F5;   /* Platzhalterflächen */
  --radius:     14px;
  --shadow:     0 2px 6px rgba(22,36,61,.06), 0 12px 30px rgba(22,36,61,.09);
  --shadow-big: 0 6px 14px rgba(22,36,61,.10), 0 24px 48px rgba(22,36,61,.16);
}

/* ---------- Basis ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
body{
  font-family:'Public Sans',system-ui,-apple-system,sans-serif;
  font-size:18px;line-height:1.65;color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Archivo',sans-serif;line-height:1.15;letter-spacing:-.01em;color:var(--navy)}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:88px 0}
:target{scroll-margin-top:100px}

/* Eyebrow: kleine goldene Überzeile vor Überschriften */
.eyebrow{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deep);
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--gold);flex:none}
.sec-head{max-width:680px;margin-bottom:46px}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:800;margin-bottom:12px}
.sec-head p{color:var(--ink-soft)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:1rem;
  padding:14px 28px;border-radius:999px;text-decoration:none;cursor:pointer;
  border:2px solid transparent;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn svg{width:19px;height:19px;flex:none}
.btn-primary{background:var(--navy);color:var(--white)}
.btn-primary:hover{background:var(--navy-deep);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-light{background:var(--white);color:var(--navy)}
.btn-light:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:var(--white)}
.btn-whatsapp{background:#25D366;color:#fff}
.btn-whatsapp:hover{background:#1EBE5A;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-sm{padding:10px 20px;font-size:.92rem}

/* ---------- Header ---------- */
.topbar{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:26px;height:72px}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo-img{height:46px;width:auto;object-fit:contain;display:block}
nav.main{display:flex;gap:26px;margin-left:auto}
nav.main a{
  text-decoration:none;font-weight:600;font-size:.98rem;color:var(--ink-soft);
  padding:6px 2px;border-bottom:2px solid transparent;
}
nav.main a:hover{color:var(--navy);border-bottom-color:var(--gold)}
nav.main a.active{color:var(--navy);border-bottom-color:var(--gold)}
.top-phone{
  display:flex;align-items:center;gap:9px;text-decoration:none;
  font-weight:700;font-size:.96rem;color:var(--navy);white-space:nowrap;
}
.top-phone svg{width:17px;height:17px;stroke:var(--gold-deep);flex:none}
.top-phone:hover{color:var(--gold-deep)}

/* Mobiles Menü */
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;padding:10px;
  margin-left:auto;
}
.nav-toggle svg{width:28px;height:28px;stroke:var(--navy)}
/* B3: Umschalten Hamburger <-> X je nach aria-expanded */
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-menu{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}
.mobile-nav{display:none;background:var(--white);border-bottom:1px solid var(--line);padding:10px 24px 22px}
.mobile-nav a{
  display:block;padding:13px 4px;text-decoration:none;font-weight:600;
  font-size:1.05rem;color:var(--ink);border-bottom:1px solid var(--line);
}
.mobile-nav a:last-of-type{border-bottom:none}
.mobile-nav .btn{width:100%;margin-top:12px}
.mobile-nav.open{display:block}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--navy-deep);color:var(--white);overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,26,46,.52) 0%,rgba(15,26,46,.62) 55%,rgba(15,26,46,.82) 100%);
}
.hero-in{position:relative;padding:110px 0 120px;max-width:720px}
/* Op foto-achtergronden geeft puur goud te weinig contrast (te licht op lichte
   delen van de foto). Wit met tekstschaduw blijft altijd leesbaar; het gouden
   streepje ervoor houdt het merkaccent zichtbaar. */
.hero .eyebrow{color:#FFFFFF;text-shadow:0 1px 3px rgba(0,0,0,.55),0 1px 12px rgba(0,0,0,.35)}
.hero .eyebrow::before{background:var(--gold)}
.hero h1{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:800;margin-bottom:18px;color:var(--white)}
.hero p.lead{font-size:1.16rem;color:#D4DEE8;max-width:580px;margin-bottom:26px}
.usp-row{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:28px}
.usp-row span{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.97rem;color:#EAF0F5}
.usp-row svg{width:18px;height:18px;flex:none}
.scarcity{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(201,169,97,.14);border:1px solid rgba(201,169,97,.55);
  color:var(--gold);font-weight:700;font-size:.97rem;
  padding:10px 18px;border-radius:10px;margin-bottom:30px;
}
.scarcity svg{width:18px;height:18px;flex:none}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-note{font-size:.88rem;color:#9DB0C2;margin-top:14px}

/* Kompakter Hero für Unterseiten */
.hero-sub .hero-in{padding:84px 0 92px}

/* ---------- USP-Band ---------- */
.uspband{background:var(--white);padding:30px 0 6px}
.uspband .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.usp-card{display:flex;gap:14px;align-items:flex-start;padding:18px 6px}
.usp-card .ic{
  flex:none;width:48px;height:48px;border-radius:12px;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.usp-card .ic svg{width:24px;height:24px;stroke:var(--gold-deep)}
.usp-card h3{font-size:1rem;font-weight:700;margin-bottom:3px}
.usp-card p{font-size:.9rem;color:var(--ink-soft);line-height:1.5}

/* ---------- Zahlenleiste ---------- */
.stats{background:var(--paper);padding:34px 0}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat b{
  display:block;font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(1.5rem,2.6vw,2rem);color:var(--navy);font-variant-numeric:tabular-nums;
}
.stat span{font-size:.9rem;color:var(--ink-soft);font-weight:600}

/* ---------- Zweispaltige Sektionen ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split img{border-radius:var(--radius);box-shadow:var(--shadow-big);width:100%;height:auto}
.split h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin-bottom:14px}
.split p{color:var(--ink-soft);margin-bottom:14px}
.check-list{list-style:none;margin-top:8px}
.check-list li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;font-weight:500}
.check-list svg{width:19px;height:19px;flex:none;margin-top:4px}

/* ---------- Dunkles Feature-Band (365 Tage) ---------- */
.feature-dark{background:var(--navy);color:var(--white)}
.feature-dark .eyebrow{color:var(--gold)}
.feature-dark h2{color:var(--white);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin-bottom:14px}
.feature-dark p{color:#CBD7E2;margin-bottom:14px}
.feature-dark .check-list li{color:#EAF0F5}

/* ---------- Zitat ---------- */
.quote-sec{background:var(--paper);padding:48px 0 64px}
.quote-card{
  max-width:820px;margin:0 auto;text-align:center;position:relative;padding:0 20px;
}
.quote-card .qmark{
  font-family:Georgia,'Times New Roman',serif;font-size:5rem;line-height:1;
  color:var(--gold);display:block;margin-bottom:6px;
}
.quote-card blockquote{
  font-family:Georgia,'Times New Roman',serif;font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.6;color:var(--navy);
  margin-bottom:22px;
}
.quote-card cite{font-style:normal;font-weight:700;color:var(--ink);display:block}
.quote-card .boat{font-size:.9rem;color:var(--ink-soft);font-weight:500}

/* ---------- Bilder-Mosaik (Lage) ---------- */
.mosaic{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:16px}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.mosaic img:first-child{grid-row:1/3}
.walk{list-style:none;margin-top:6px}
.walk li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-weight:500}
.walk li:last-child{border-bottom:none}
.walk .min{
  flex:none;font-family:'Archivo',sans-serif;font-weight:800;font-size:.78rem;
  background:var(--paper);color:var(--gold-deep);border-radius:8px;padding:6px 11px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ---------- Liegeplatz-Karten ---------- */
.berths{background:var(--paper)}
.berth-scarcity{
  display:inline-flex;align-items:center;gap:10px;background:#FBF4E4;
  border:1px solid #E3CD9C;color:var(--gold-deep);font-weight:700;
  padding:9px 16px;border-radius:10px;font-size:.95rem;margin-bottom:16px;
}
.berth-scarcity svg{width:17px;height:17px;flex:none}
.berth-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.berth-card{
  background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;
}
.berth-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-big)}

/* Platzhalter für die markierten Drohnenaufnahmen */
.berth-media{
  position:relative;aspect-ratio:16/10;background:
    linear-gradient(180deg,#E9F0F5 0%,#DCE8EF 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border-bottom:1px solid var(--line);
}
.berth-media .no{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:2.2rem;color:var(--navy);
  opacity:.85;
}
.berth-media .soon{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#7E93A8;
  border:1px dashed #A9BCCB;border-radius:8px;padding:5px 12px;
}
.berth-media svg.anchor{width:30px;height:30px;stroke:#8FA6B5}

/* ────────────────────────────────────────────────────────────────
   Wiederverwendbare Standortfoto-Komponente mit Positions-Pin.
   Wird über die berthLocationPins-Konfiguration in js/main.js gespeist,
   sodass neue Liegeplätze nur dort ergänzt werden müssen.
   ──────────────────────────────────────────────────────────────── */
.berth-photo { position: relative; line-height: 0; border-radius: 14px; overflow: hidden; border-bottom:1px solid var(--line); }
.berth-photo img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 2717 / 1528; object-fit: contain;
  background: var(--water);
}
/* De badge (bijv. "Ab sofort frei") blijft linksboven zweven, ook op echte foto's */
.berth-photo .badge{position:absolute;top:12px;left:12px;z-index:2}

.badge{
  position:absolute;top:12px;left:12px;font-family:'Archivo',sans-serif;
  font-weight:700;font-size:.73rem;letter-spacing:.05em;
  padding:5px 12px;border-radius:999px;
}
.badge-gold{background:#F6ECD5;color:var(--gold-deep)}
.badge-navy{background:#E2E9F2;color:var(--navy)}
.berth-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.berth-body h3{font-size:1.15rem;font-weight:800;margin-bottom:10px}
.spec{list-style:none;margin-bottom:16px}
.spec li{
  display:flex;justify-content:space-between;gap:12px;
  font-size:.92rem;padding:6px 0;border-bottom:1px dashed var(--line);
}
.spec li span:first-child{color:var(--ink-soft)}
.spec li span:last-child{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.price{margin-top:auto;padding-top:6px}
.price .m{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1.4rem;color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.price .m small{font-family:'Public Sans',sans-serif;font-weight:600;font-size:.85rem;color:var(--ink-soft)}
.price .sub{font-size:.83rem;color:var(--ink-soft);margin-bottom:14px}
.berth-card .btn{width:100%}

/* Wartelisten-Kasten */
.waitlist{
  margin-top:34px;background:var(--white);border:1px solid #E3CD9C;
  border-left:5px solid var(--gold);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:32px 36px;
  display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.waitlist h3{font-size:1.25rem;font-weight:800;margin-bottom:6px}
.waitlist p{color:var(--ink-soft);max-width:560px}
.waitlist .actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Inklusiv-Leistungen ---------- */
.included .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.inc-item{
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:22px 20px;display:flex;gap:14px;align-items:flex-start;
}
.inc-item svg{width:22px;height:22px;flex:none;stroke:var(--gold-deep);margin-top:2px}
.inc-item b{display:block;font-size:.97rem;margin-bottom:2px}
.inc-item span{font-size:.87rem;color:var(--ink-soft);line-height:1.5}

/* ---------- FAQ ---------- */
.faq{background:var(--paper)}
.faq-list{max-width:840px}
details{
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  margin-bottom:12px;overflow:hidden;
}
summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;
  align-items:center;padding:20px 24px;font-family:'Archivo',sans-serif;
  font-weight:700;font-size:1.03rem;color:var(--navy);
}
summary::-webkit-details-marker{display:none}
summary .chev{flex:none;width:22px;height:22px;transition:transform .2s ease;stroke:var(--gold-deep)}
details[open] .chev{transform:rotate(180deg)}
details .a{padding:0 24px 22px;color:var(--ink-soft);font-size:.97rem}
details .a p{margin-bottom:10px}
details .a p:last-child{margin-bottom:0}
summary:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

/* ---------- Formular ---------- */
.anfrage .cols{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.anfrage aside h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin-bottom:14px}
.anfrage aside p{color:var(--ink-soft);margin-bottom:18px}
.contact-line{display:flex;align-items:center;gap:12px;padding:9px 0;font-weight:600;text-decoration:none}
.contact-line svg{width:19px;height:19px;stroke:var(--gold-deep);flex:none}
.contact-line:hover{color:var(--gold-deep)}
form.anfrage-form{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:34px;
}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f-field{display:flex;flex-direction:column;gap:7px}
.f-field.full{grid-column:1/-1}
label{font-weight:600;font-size:.9rem}
input,select,textarea{
  font-family:'Public Sans',sans-serif;font-size:1rem;color:var(--ink);
  padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--white);
  width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(201,169,97,.22);
}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--ink-soft);margin-top:16px}
.consent input{width:auto;margin-top:3px}
.consent a{color:var(--gold-deep);font-weight:600}
form.anfrage-form .btn{width:100%;margin-top:20px}
.f-note{font-size:.85rem;color:var(--ink-soft);text-align:center;margin-top:12px}
.form-status{display:none;text-align:center;padding:14px;border-radius:10px;margin-top:16px;font-weight:600}
.form-status.ok{display:block;background:#E4F2EB;color:#2F7D5B}
.form-status.err{display:block;background:#FBEAEA;color:#B3413C}

/* ---------- CTA-Band ---------- */
.cta-band{position:relative;color:var(--white);overflow:hidden;padding:96px 0}
.cta-band .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-band .hero-overlay{background:linear-gradient(180deg,rgba(15,26,46,.72),rgba(15,26,46,.82))}
.cta-band .inner{position:relative;text-align:center;max-width:680px;margin:0 auto}
.cta-band h2{color:var(--white);font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800;margin-bottom:14px}
.cta-band p{color:#D4DEE8;margin-bottom:28px}
.cta-band .hero-cta{justify-content:center}

/* ---------- Kontakt-Karten ---------- */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ccard{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:32px 28px;text-align:center;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease;
}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--shadow-big)}
.ccard .ic{
  width:56px;height:56px;border-radius:14px;background:var(--paper);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.ccard .ic svg{width:26px;height:26px;stroke:var(--gold-deep)}
.ccard h3{font-size:1.1rem;font-weight:800;margin-bottom:6px}
.ccard p{font-size:.92rem;color:var(--ink-soft)}
.ccard b{display:block;margin-top:10px;color:var(--navy);font-size:1.02rem}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep);color:#9FB2C4;padding:58px 0 40px;font-size:.93rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:36px}
footer h4{font-family:'Archivo',sans-serif;color:var(--white);font-size:1rem;margin-bottom:14px}
footer .logo-img{height:42px}
footer p{margin-top:14px;line-height:1.6}
footer a{color:#C9D6E2;text-decoration:none}
footer a:hover{color:var(--gold)}
footer li{list-style:none;padding:5px 0}
.foot-bottom{
  border-top:1px solid #24354E;padding-top:22px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.84rem;
}

/* ---------- Responsive ---------- */
@media(max-width:1020px){
  .berth-grid{grid-template-columns:repeat(2,1fr)}
  .uspband .grid{grid-template-columns:repeat(2,1fr)}
  .included .grid{grid-template-columns:repeat(2,1fr)}
  .stats .grid{grid-template-columns:repeat(2,1fr);row-gap:26px}
}
@media(max-width:880px){
  nav.main{display:none}
  .topbar .btn{display:none}
  .top-phone{display:none}          /* B4: separates Telefon-Icon auf Mobile ausblenden, Nummer steht im Menü */
  .nav-toggle{display:block}
  .split,.anfrage .cols{grid-template-columns:1fr;gap:38px}
  .contact-cards{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  section{padding:66px 0}

  /* B1: Hero auf Mobile verdichten, damit die CTA-Buttons früher sichtbar sind */
  .hero .eyebrow{display:none}                 /* lange Eyebrow-Zeile ausblenden */
  .hero-in{padding:28px 0 40px}
  .hero-sub .hero-in{padding:28px 0 40px}
  .hero h1{margin-bottom:14px}
  .hero p.lead{margin-bottom:18px}
  .usp-row{gap:7px 22px;margin-bottom:18px}
  .scarcity{margin-bottom:20px}

  /* B2: Die drei Köpenick-Bilder als horizontal wischbares Karussell (scroll-snap) */
  .mosaic{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    grid-template-columns:none;
    grid-template-rows:none;
    padding-bottom:8px;
  }
  .mosaic img{
    flex:0 0 82%;
    scroll-snap-align:center;
    height:220px;
    grid-row:auto;
  }
  .mosaic::-webkit-scrollbar{height:0}
}
@media(max-width:560px){
  .berth-grid{grid-template-columns:1fr}
  .uspband .grid{grid-template-columns:1fr}
  .included .grid{grid-template-columns:1fr}
  .stats .grid{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .waitlist{padding:26px 22px}
}

/* ---------- Rechtliche Seiten (Impressum, Datenschutz) ---------- */
.legal{padding:72px 0 90px}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;margin-bottom:26px}
.legal h2{font-size:1.15rem;font-weight:700;margin:30px 0 8px}
.legal p{color:var(--ink-soft);margin-bottom:10px}
.legal a{color:var(--gold-deep);font-weight:600}
.legal ul{margin:0 0 14px 22px;color:var(--ink-soft)}
.legal li{margin-bottom:6px}