/* DESIDUS — hand-written site CSS. No framework, no build step.
   Palette: navy #16202f / #141b28, gold #8a5518 / #c79463, papier #f5f3ec.
   Font: Montserrat only, weight 200 on large display headings. */

* { box-sizing: border-box; }
/* The header is fixed and 84px tall: anchor jumps and scrollIntoView stop
   below it instead of sliding the target heading underneath. */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  background: #f5f3ec;
  color: #26314a;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: #8a5518; }
::selection { background: #8a5518; color: #f5f3ec; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid #8a5518; outline-offset: 3px; }

@keyframes dsd-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes dsd-cue { 0%,100% { transform: scaleY(.3); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }
.dsd-in { animation: dsd-in 1s cubic-bezier(.2,.8,.25,1) both; }
@media (prefers-reduced-motion: reduce) {
  .dsd-in { animation: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: #e6e2d8; }
::-webkit-scrollbar-thumb { background: #c3c7cf; }

.wrap { max-width: 1520px; margin: 0 auto; padding-left: clamp(16px,3vw,44px); padding-right: clamp(16px,3vw,44px); }
.eyebrow { margin: 0 0 16px; font-size: 10.5px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: #8a5518; }

/* ---------- Header ---------- */
/* Height and logo size were tuned up from an earlier, tighter pass — a
   wordmark that reads at a glance as "the brand" needs more optical size and
   air around it than a purely-functional utility bar does. */
.dsd-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(20px,3.4vw,52px); padding: 0 clamp(20px,3.4vw,52px); height: 84px;
  background: #f5f3ecf2; border-bottom: 1px solid #16202f14;
}
.dsd-header .brand { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 15px; letter-spacing: .36em; text-transform: uppercase; color: #16202f; transition: opacity .3s ease; }
.dsd-header .brand:hover { opacity: .72; }
.dsd-header .brand img { height: 36px; width: auto; }
.dsd-nav { display: flex; justify-content: center; gap: clamp(14px,2.1vw,36px); flex-wrap: nowrap; white-space: nowrap; font-size: 11.5px; font-weight: 400; letter-spacing: .17em; text-transform: uppercase; color: #47536a; }
.dsd-nav a { position: relative; padding-bottom: 3px; transition: color .3s ease; }
.dsd-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: #8a5518; transition: right .3s cubic-bezier(.2,.8,.25,1); }
.dsd-nav a:hover { color: #16202f; }
.dsd-nav a:hover::after { right: 0; }

/* „Modelle“-Menü: öffnet beim Überfahren, per Klick (Touch) oder Tastatur. */
.nav-drop { position: relative; }
.nav-drop__btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 0 3px; border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer;
  transition: color .3s ease;
}
.nav-drop__btn svg { width: 9px; height: 6px; transition: transform .3s cubic-bezier(.2,.8,.25,1); }
.nav-drop__btn:hover, .nav-drop.is-open .nav-drop__btn { color: #16202f; }
.nav-drop__btn:focus-visible { outline: 2px solid #8a5518; outline-offset: 4px; }
.nav-drop.is-open .nav-drop__btn svg, .nav-drop:hover .nav-drop__btn svg { transform: rotate(180deg); }
.nav-drop__menu {
  position: absolute; top: calc(100% + 22px); left: 50%; min-width: 230px; padding: 10px 0;
  display: flex; flex-direction: column; align-items: stretch;
  background: #16202f; border-top: 1px solid #c79463;
  box-shadow: 0 10px 24px #0d131d33, 0 30px 60px #0d131d40;
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.25,1), visibility 0s linear .25s;
}
/* Brücke über den Abstand, damit das Menü beim Hinüberfahren offen bleibt. */
.nav-drop__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.nav-drop:hover .nav-drop__menu, .nav-drop.is-open .nav-drop__menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.25,1), visibility 0s;
}
/* Mittig, hell auf Navy, feine Trennlinien und eine goldene Linie, die beim
   Überfahren aus der Mitte wächst. */
.dsd-nav .nav-drop__menu a {
  position: relative; display: block; margin: 0 22px; padding: 15px 0; text-align: center;
  font-weight: 300; letter-spacing: .28em; color: #f5f3ecd9;
  transition: color .3s ease;
}
.dsd-nav .nav-drop__menu a + a { border-top: 1px solid #f5f3ec14; }
.dsd-nav .nav-drop__menu a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 10px; height: 1px;
  background: #c79463; transition: left .35s cubic-bezier(.2,.8,.25,1), right .35s cubic-bezier(.2,.8,.25,1);
}
.dsd-nav .nav-drop__menu a:hover { color: #e6b389; }
.dsd-nav .nav-drop__menu a:hover::after { left: 30%; right: 30%; }
.dsd-nav .nav-drop__menu a:focus-visible { outline: 1px solid #c79463; outline-offset: 2px; }
.dsd-nav .nav-drop__menu a[aria-current="page"] { color: #e6b389; }

/* Modelle im Handy-Menü: kleiner, zweispaltig, damit alles auf den Bildschirm passt. */
.mobile-models { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mobile-models__title { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #c79463; }
.mobile-models__list { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 28px; justify-items: center; }
.mobile-menu nav .mobile-models__list a { font-size: 13px; letter-spacing: .12em; color: #f5f3ecd9; }
.dsd-header .tools { display: flex; align-items: center; gap: 16px; font-size: 11px; letter-spacing: .14em; color: #47536a; }
.dsd-header .tools .kontakt-btn, .dsd-header .tools .login-btn { padding: 11px 20px; border: 1px solid #16202f33; color: #26314a; letter-spacing: .17em; text-transform: uppercase; font-size: 11px; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.dsd-header .tools .kontakt-btn:hover, .dsd-header .tools .login-btn:hover { background: #8a5518; border-color: #8a5518; color: #f5f3ec; }

/* ---------- Language switch ---------- */
.lang-switch { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; letter-spacing: .1em; }
.lang-switch a, .lang-switch span { padding: 2px 1px; color: #8f97a8; text-decoration: none; transition: color .3s ease; }
.lang-switch a:hover, .lang-switch a:focus-visible { color: #16202f; }
.lang-switch span.current { color: #16202f; }
.lang-switch .sep { color: #16202f26; }
.mobile-menu .lang-switch { font-size: 14px; letter-spacing: .14em; gap: 8px; }
.mobile-menu .lang-switch a, .mobile-menu .lang-switch span { color: #f5f3ec99; }
.mobile-menu .lang-switch a:hover { color: #c79463; }
.mobile-menu .lang-switch span.current { color: #f5f3ec; }
.mobile-menu .lang-switch .sep { color: #f5f3ec33; }

/* ---------- Mobile nav ---------- */
/* Below this width the full nav no longer fits the 70px header and used to
   wrap onto multiple lines, spilling out of the fixed header box and
   overlapping the hero. A hamburger + full-screen overlay replaces the
   inline nav/tools instead. */
.nav-toggle {
  display: none; position: relative; z-index: 61;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 28px; height: 28px; background: none; border: 0; cursor: pointer; padding: 0;
}
.nav-toggle span { display: block; height: 1.5px; width: 100%; background: #16202f; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 84px 0 0 0; z-index: 55; background: #16202f;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; pointer-events: none;
  overflow-y: auto;
}
/* The panel itself is never half-transparent — fading it let the hero text
   show through the links while it opened. Only the links fade in. */
.mobile-menu.open { visibility: visible; pointer-events: auto; }
.mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 0; opacity: 0; transition: opacity .25s ease; }
.mobile-menu.open nav { opacity: 1; }
.mobile-menu nav a { font-size: 16px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: #f5f3ec; transition: color .3s ease; }
.mobile-menu nav a:hover { color: #c79463; }

/* Nav collapses at 860px, not 760px: with both Kontakt and Login in the
   header, the four nav links start wrapping onto a second line below ~860px. */
/* Ab dem „Modelle“-Menü braucht die Kopfzeile rund 1060 px — darunter das Handy-Menü. */
@media (max-width: 1100px) {
  .dsd-nav, .dsd-header .tools { display: none; }
  .nav-toggle { display: flex; }
}
@media (min-width: 1101px) {
  .mobile-menu { display: none; }
}
@media (max-width: 760px) {
  .hero-cta { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .hero-cta .btn { text-align: center; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-block; padding: 16px 30px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s; cursor: pointer; border: 1px solid transparent; }
.btn-solid-light { background: #f4f2ec; color: #141b28; font-weight: 500; }
.btn-solid-light:hover { background: #c79463; color: #141b28; }
.btn-outline-dark { border-color: #f4f2ecd9; color: #ffffff; font-weight: 500; background: #ffffff1f; }
.btn-outline-dark:hover { border-color: #c79463; color: #c79463; background: #ffffff2e; }
.btn-solid-navy { background: #16202f; color: #f5f3ec; font-weight: 500; }
.btn-solid-navy:hover { background: #8a5518; }
.btn-outline-navy { border-color: #16202f33; color: #16202f; font-weight: 400; }
.btn-outline-navy:hover { border-color: #8a5518; color: #8a5518; }

/* ---------- Hero ---------- */
.hero-section { position: relative; padding-top: 84px; }
.hero-frame { position: relative; height: calc(100vh - 84px); min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #16202f; }
.hero-img-wrap { position: absolute; inset: -12% 0; will-change: transform; overflow: hidden; }
/* Poster sits above the video (z-index) and only fades out once the video
   is actually playing. */
.hero-img-wrap .hero-poster { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transition: opacity 1.2s ease; }
/* Decorative, muted background video (self-hosted MP4). The poster above
   it stays opaque until the video actually plays. */
.hero-video-embed { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Scrim stops are set by measurement, not taste: navy only where text sits
   (headline from ~52%, paragraph ~68-94%), peaking at 72% — the level at which
   the paragraph clears WCAG 4.5:1 even over a white frame (with the text-shadow
   below). The top and bottom cream fades are
   kept to a 3% seam so the video itself stays visible. */
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, #16202fc2 0%, #16202f8a 22%, #16202f00 46%); }
/* Upright screens (class set by site.js when the photo is shown instead of the
   video): the landscape photo is shown whole, full width under the header, and
   fades into the navy the headline sits on. No crop, no parallax drift. */
.hero-frame--foto .hero-img-wrap { inset: 0; transform: none !important; }
.hero-frame--foto .hero-img-wrap .hero-poster { inset: 0 0 auto; height: auto; aspect-ratio: 4 / 3; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.hero-content { position: relative; padding: 0 clamp(16px,3vw,44px) clamp(28px,4vw,52px); max-width: 1520px; margin: 0 auto; width: 100%; }
.hero-content h1 { margin: 0; font-weight: 200; font-size: clamp(40px,7.4vw,124px); line-height: .98; letter-spacing: -.035em; color: #f4f2ec; text-shadow: 0 4px 30px #16202fd9, 0 1px 6px #16202f; }
.hero-content h1 .accent { color: #c79463; }
.hero-sub { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,290px),1fr)); gap: clamp(20px,3vw,54px); align-items: end; margin-top: clamp(30px,4vw,54px); }
.hero-sub p { margin: 0; max-width: 52ch; font-size: clamp(14.5px,1.1vw,17px); line-height: 1.75; color: #e4e7ec; text-wrap: pretty; text-shadow: 0 1px 14px #16202fb3, 0 0 2px #16202f80; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.scroll-cue { position: absolute; right: clamp(16px,3vw,44px); top: clamp(28px,4vw,52px); display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: #e4e2dc; text-shadow: 0 1px 8px #16202fcc; }
.scroll-cue span.line { width: 1px; height: 64px; background: #c79463; transform-origin: top; animation: dsd-cue 3s ease-in-out infinite; }

/* ---------- Ownership confidence strip ---------- */
/* Deliberately quiet: small caps, thin dividers, no icons or color blocks —
   reads as a list of facts, not a marketing banner. Every claim here is
   already stated in full elsewhere on the page (hero copy, Werft section,
   footer) — this just collects them into one quick-scan line. */
.confidence-strip { background: #f5f3ec; border-bottom: 1px solid #16202f14; }
/* Read like the technical-data line of a yacht brochure — label over value,
   hairline rules between columns — rather than a row of bulleted slogans. */
.confidence-strip .specs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 0 auto; padding-top: clamp(26px,3.4vw,40px); padding-bottom: clamp(26px,3.4vw,40px); }
.confidence-strip .spec { padding: 2px clamp(14px,2vw,30px); border-left: 1px solid #16202f1f; }
.confidence-strip .spec:first-child { border-left: 0; padding-left: 0; }
.confidence-strip dt { margin: 0 0 8px; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #5a6579; }
.confidence-strip dd { margin: 0; font-size: clamp(19px,1.9vw,28px); font-weight: 300; line-height: 1.15; letter-spacing: -.01em; color: #16202f; }
@media (max-width: 760px) {
  .confidence-strip .specs { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 22px; }
  .confidence-strip .spec:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ---------- Owner quote ---------- */
.owner-quote { background: #16202f; }
.owner-quote .wrap { max-width: 900px; padding: clamp(72px,11vh,130px) clamp(16px,3vw,44px); text-align: center; }
.owner-quote blockquote { margin: 0; font-weight: 200; font-size: clamp(22px,3.2vw,40px); line-height: 1.45; letter-spacing: -.01em; color: #f4f2ec; text-wrap: pretty; }
.owner-quote blockquote .q { color: #c79463; }
/* Hervorgehobenes Wort im Zitat — zugleich der Modellname Vision. */
.owner-quote blockquote .hl { color: #c79463; font-weight: 300; text-transform: uppercase; letter-spacing: .08em; }
.owner-quote .quote { margin: 0; }
/* Portrait is a 100px original: 52px keeps it at ~1:1 on retina screens. */
.owner-quote .quote-author { display: inline-flex; align-items: center; gap: 14px; margin-top: clamp(26px,3.2vw,38px); text-align: left; }
.owner-quote .quote-author img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px #c7946359; }
.owner-quote .quote-author .name { display: block; font-size: 17px; font-weight: 400; letter-spacing: .01em; color: #f4f2ec; }
.owner-quote .quote-author .role { display: block; margin-top: 5px; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #c79463; }

/* ---------- Statement band ---------- */
.statement { border-bottom: 1px solid #16202f14; }
.statement p { margin: 0 auto; padding: clamp(72px,13vh,160px) clamp(16px,3vw,44px); max-width: 1520px; font-weight: 200; font-size: clamp(24px,3.5vw,58px); line-height: 1.22; letter-spacing: -.025em; color: #16202f; text-wrap: pretty; }
.statement .gold { color: #8a5518; }

/* ---------- Model carousel ---------- */
.carousel-section { position: relative; background: #16202f; overflow: hidden; }
/* width:100% is required here: aspect-ratio + max-height with no explicit
   width lets the browser solve width FROM the height-capped side once
   max-height kicks in, shrinking the frame narrower than its container and
   exposing the section's dark background on the right. Pinning width keeps
   the frame full-bleed; only the height (and therefore the crop) responds
   to max-height. */
.carousel-frame { position: relative; width: 100%; aspect-ratio: 16/8; max-height: 78vh; overflow: hidden; }
.carousel-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s ease, transform 2.4s cubic-bezier(.2,.8,.25,1); opacity: 0; }
.carousel-frame:hover .carousel-slide.active { transform: scale(1.025); }
.carousel-slide.active { opacity: 1; }
.carousel-scrim { position: absolute; inset: 0; background: linear-gradient(#16202f00 55%, #16202fcc 100%); }
.carousel-caption { position: absolute; left: clamp(16px,3vw,44px); right: clamp(16px,3vw,44px); bottom: clamp(20px,3vw,36px); display: flex; justify-content: flex-end; }
.carousel-controls { display: flex; gap: 10px; }
.carousel-controls button { width: 44px; height: 44px; border: 1px solid #ffffff40; background: transparent; color: #f5f3ec; font-size: 16px; cursor: pointer; transition: border-color .2s, color .2s; }
.carousel-controls button:hover { border-color: #c79463; color: #c79463; }
.carousel-controls button:focus-visible { outline: 2px solid #c79463; outline-offset: 2px; }

/* ---------- Aufteilung / plans ---------- */
.plans-section .wrap { padding-top: clamp(72px,12vh,150px); padding-bottom: clamp(72px,12vh,150px); }
.plans-section h2 { margin: 0 0 clamp(20px,2.6vw,32px); max-width: 24ch; font-weight: 200; font-size: clamp(28px,4.2vw,68px); line-height: 1.04; letter-spacing: -.03em; color: #16202f; }
.plans-section > .wrap > p.lead { margin: 0 0 clamp(36px,5vw,70px); max-width: 60ch; font-size: 15px; line-height: 1.75; color: #47536a; text-wrap: pretty; }
.plans-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(16px,2.2vw,32px); justify-items: center; max-width: 1100px; margin: 0 auto; }
.plan-card { min-width: 0; width: 100%; }
a.plan-card { display: block; color: inherit; text-decoration: none; }
a.plan-card:focus-visible { outline: 2px solid #8a5518; outline-offset: 4px; }
.plan-card .frame { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #eae6dc; }
.plan-card .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.8,.25,1); }
.plan-card:hover .frame img { transform: scale(1.045); }
.plan-card .frame-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, #16202fb3 0%, #16202f00 45%); pointer-events: none; }
.plan-card .frame-label { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; text-align: center; font-weight: 300; font-size: 17px; letter-spacing: .04em; color: #f5f3ec; text-shadow: 0 1px 10px #16202f80; }
.plan-card .meta { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #16202f17; }
.plan-card .meta .dims { font-size: 12px; color: #47536a; }
.plan-card .meta .tagline { font-size: 13px; font-style: italic; color: #5a6579; }
.plans-footnote { margin: clamp(28px,3.5vw,44px) 0 0; font-size: 12px; color: #5a6579; }
@media (max-width: 720px) { .plans-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 460px) { .plans-grid { grid-template-columns: 1fr; } }

/* ---------- An Bord tour ---------- */
.anbord-section { background: #fff; color: #16202f; }
/* Heading stays in the 1520px grid; the scroll tour sits outside it so the
   photos run edge to edge. */
.anbord-section .wrap { padding-top: clamp(72px,12vh,150px); }
.anbord-head { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end; padding-bottom: clamp(20px,2.6vw,30px); border-bottom: 1px solid #16202f1f; margin-bottom: clamp(34px,5vw,64px); }
.anbord-head h2 { margin: 0; font-weight: 200; font-size: clamp(30px,4.8vw,80px); line-height: 1; letter-spacing: -.035em; }
.anbord-head .eyebrow { color: #87511c; }
.anbord-scroll-wrap { position: relative; height: 400vh; }
.anbord-sticky { position: sticky; top: 84px; height: calc(100vh - 84px); overflow: hidden; }
.anbord-step { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.anbord-step.active { opacity: 1; pointer-events: auto; }
.anbord-step img { width: 100%; height: 100%; object-fit: cover; }
.anbord-step-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, #16202fe6 0%, #16202f66 32%, #16202f00 60%); }
/* Photos are full-bleed, but captions keep to the page's text edge: on wide
   screens the inset grows to where the 1520px grid starts. */
.anbord-step-text { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px,3.4vw,64px) clamp(16px,3vw,44px); padding-left: max(clamp(16px,3vw,44px), calc((100% - 1520px) / 2 + clamp(16px,3vw,44px))); }
.anbord-step-text .nr { margin: 0 0 6px; font-size: 11px; font-weight: 500; letter-spacing: .24em; color: #e6b389; }
.anbord-step-text h3 { margin: 0 0 14px; font-weight: 200; font-size: clamp(28px,3.6vw,52px); letter-spacing: -.03em; color: #f5f3ec; }
.anbord-step-text p { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.75; color: #e4e7ec; text-wrap: pretty; }

/* Vorschaubilder je Raum: ein Klick öffnet die Galerie genau bei diesem Foto. */
.anbord-thumbs { margin-top: 24px; display: flex; gap: 10px; }
.anbord-thumb {
  display: block; width: 144px; height: 101px; padding: 0; overflow: hidden;
  border: 1px solid #f5f3ec59; border-radius: 6px; background: #16202f;
  box-shadow: 0 2px 6px #0d131d40, 0 8px 20px #0d131d33;
  cursor: pointer; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.anbord-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.anbord-thumb:hover { transform: translateY(-3px); border-color: #c79463; }
.anbord-thumb:hover img { transform: scale(1.06); }
.anbord-thumb:focus-visible { outline: 2px solid #c79463; outline-offset: 3px; }
.anbord-thumb:active { transform: translateY(0); }
@media (max-width: 760px) {
  .anbord-thumbs { gap: 8px; }
  /* Vier Bilder füllen die Breite des Handys. */
  .anbord-thumb { flex: 1 1 0; width: auto; max-width: 110px; height: auto; aspect-ratio: 10 / 7; }
}
@media (prefers-reduced-motion: reduce) {
  .anbord-thumb, .anbord-thumb img { transition: none; }
}
/* No-JS / reduced-motion fallback: stack the steps as a normal flow instead of a scroll-driven sticky viewport */
.no-scrolltour .anbord-scroll-wrap { height: auto; }
.no-scrolltour .anbord-sticky { position: static; height: auto; overflow: visible; display: grid; gap: clamp(16px,2.2vw,32px); }
.no-scrolltour .anbord-step { position: relative; inset: auto; opacity: 1; pointer-events: auto; aspect-ratio: 16/10; }

/* ---------- Werft / Shipyard ---------- */
.werft-section .wrap { padding-top: clamp(72px,12vh,150px); padding-bottom: clamp(72px,12vh,150px); }
.werft-intro { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: clamp(28px,4vw,70px); align-items: center; }
.werft-section h2 { margin: 0 0 clamp(20px,2.8vw,34px); font-weight: 200; font-size: clamp(28px,4.4vw,72px); line-height: 1.02; letter-spacing: -.035em; color: #16202f; }
.werft-section .lead { margin: 0 0 clamp(26px,3.4vw,42px); max-width: 48ch; font-size: 15px; line-height: 1.78; color: #47536a; text-wrap: pretty; }
.werft-photo { position: relative; aspect-ratio: 4/3; overflow: hidden; min-width: 0; background: #eae6dc; }
.werft-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.2,.8,.25,1); }
.werft-photo:hover img { transform: scale(1.035); }

.videos-section .wrap { padding: clamp(56px,8vh,96px) clamp(16px,3vw,44px); }
.videos-section .eyebrow { text-align: center; }
.videos-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: clamp(20px,3vw,36px); max-width: 1100px; margin: 0 auto; }
.video-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #16202f; cursor: pointer; }
.video-frame img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity .4s ease; }
.video-frame:hover img { opacity: .95; }
/* Large overlay player for the click-to-play videos (see site.js): the size
   is what makes YouTube serve 1080p/4K instead of the tile's 480p. */
.video-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: clamp(56px,7vw,80px) clamp(16px,4vw,48px); background: #0d131df2; animation: video-lightbox-in .35s ease; }
.video-lightbox[hidden] { display: none; }
.video-lightbox__player { position: relative; width: min(100%, calc((100vh - 2 * clamp(56px,7vw,80px)) * 16 / 9)); aspect-ratio: 16/9; background: #000; }
.video-lightbox__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-lightbox__close { position: absolute; top: clamp(10px,1.6vw,20px); right: clamp(10px,1.6vw,20px); width: 44px; height: 44px; border-radius: 50%; border: 1px solid #f5f3ec59; background: transparent; color: #f5f3ec; font-size: 26px; line-height: 1; cursor: pointer; transition: border-color .3s ease, color .3s ease; }
.video-lightbox__close:hover { border-color: #c79463; color: #c79463; }
.video-lightbox__close:focus-visible { outline: 2px solid #c79463; outline-offset: 3px; }
@keyframes video-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .video-lightbox { animation: none; } }

.photo-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: clamp(56px,7vw,80px) clamp(48px,7vw,96px); background: #0d131df2; animation: video-lightbox-in .35s ease; }
.photo-lightbox[hidden] { display: none; }
.photo-lightbox__stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.photo-lightbox__img { cursor: pointer; max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s ease; }
.photo-lightbox__img.is-visible { opacity: 1; }
.photo-lightbox__caption { position: absolute; left: 0; right: 0; bottom: clamp(-36px,-3vw,-26px); margin: 0; text-align: center; font-size: 12px; letter-spacing: .08em; color: #e4e7ecb3; }
.photo-lightbox__close { position: absolute; top: clamp(10px,1.6vw,20px); right: clamp(10px,1.6vw,20px); width: 44px; height: 44px; border-radius: 50%; border: 1px solid #f5f3ec59; background: transparent; color: #f5f3ec; font-size: 26px; line-height: 1; cursor: pointer; transition: border-color .3s ease, color .3s ease; }
.photo-lightbox__close:hover { border-color: #c79463; color: #c79463; }
.photo-lightbox__close:focus-visible { outline: 2px solid #c79463; outline-offset: 3px; }
.photo-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid #f5f3ec59; background: #0d131d80; color: #f5f3ec; font-size: 22px; line-height: 1; cursor: pointer; transition: border-color .25s ease, color .25s ease, background-color .25s ease; }
.photo-lightbox__nav:hover { border-color: #c79463; color: #c79463; }
.photo-lightbox__nav:focus-visible { outline: 2px solid #c79463; outline-offset: 3px; }
.photo-lightbox__nav[hidden] { display: none; }
.photo-lightbox__prev { left: clamp(4px,1.5vw,16px); }
.photo-lightbox__next { right: clamp(4px,1.5vw,16px); }
.play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 76px; height: 76px; border-radius: 50%; border: none; background: #f5f3ece6; color: #16202f; font-size: 20px; display: flex; align-items: center; justify-content: center; padding-left: 4px; cursor: pointer; transition: transform .35s cubic-bezier(.2,.8,.25,1), background .3s ease; }
.video-frame:hover .play-btn { transform: translate(-50%,-50%) scale(1.08); background: #c79463; color: #16202f; }
.play-btn:focus-visible { outline: 2px solid #c79463; outline-offset: 3px; }
.video-caption { margin: 10px 0 0; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #47536a; text-align: center; }
/* 4 columns: the video sits in column 1 and spans both rows (grid-row:span 2),
   the 6 real photos keep their original 3×2 arrangement — CSS grid auto-flow
   fills them into columns 2-4 on its own since column 1/row 2 is already
   claimed by the spanning video, so no per-photo placement is needed. */
.werft-photos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 1fr; gap: clamp(14px,2vw,22px); max-width: 1200px; margin: clamp(20px,3vw,30px) auto 0; }
.werft-photos .frame { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #eae6dc; }
.werft-photos .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.8,.25,1); }
.werft-photos .frame:hover img { transform: scale(1.05); }
/* Portrait, spanning 2 rows in column 1 — the original layout, back from
   when this tile held the YouTube aerial video. Note: with 16:9 source
   footage, object-fit:cover crops away most of the frame width to fill this
   tall a box (only the center ~36% stays visible), which is fine for wide
   scenery but can cut a moving subject out of frame during side-to-side
   camera pans. */
.werft-photos .bg-video { grid-column: 1; grid-row: span 2; aspect-ratio: auto; background: #16202f; }
@media (max-width: 760px) { .werft-photos { grid-template-columns: repeat(2, minmax(0,1fr)); } .werft-photos .bg-video { grid-column: auto; grid-row: auto; aspect-ratio: 4/3; } }

/* Decorative muted/autoplay/looping background video tile (Werft drone) —
   self-hosted MP4, so it just fills the tile like a video-poster image. */
.bg-video { pointer-events: none; }
.bg-video-el { width: 100%; height: 100%; object-fit: cover; }

.werft-cta { margin-top: clamp(40px,5.5vw,60px); padding-top: clamp(28px,4vw,40px); border-top: 1px solid #16202f17; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.werft-cta p { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.7; color: #47536a; }

/* ---------- Konfigurator CTA band ---------- */
.konfig-band { position: relative; overflow: hidden; }
.konfig-band > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Two layers instead of a flat 90-95% cream wash: a light 45% veil over the
   whole photo (enough for the large heading and the navy buttons), plus a
   soft 88% glow sized to sit only behind the small text, which needs about
   80%+ to stay above 4.5:1 over the darkest parts of the photo. */
.konfig-band .scrim { position: absolute; inset: 0; background:
  radial-gradient(ellipse 34% 44% at 50% 50%, #f5f3ece0 0%, #f5f3ece0 60%, #f5f3ec00 100%),
  linear-gradient(#f5f3ec73, #f5f3ec73); }
@media (max-width: 760px) {
  .konfig-band .scrim { background:
    radial-gradient(ellipse 80% 50% at 50% 50%, #f5f3ece0 0%, #f5f3ece0 60%, #f5f3ec00 100%),
    linear-gradient(#f5f3ec73, #f5f3ec73); }
}
.konfig-band .inner { position: relative; max-width: 1520px; margin: 0 auto; padding: clamp(80px,14vh,180px) clamp(16px,3vw,44px); text-align: center; }
.konfig-band h2 { margin: 0 auto; max-width: 26ch; font-weight: 200; font-size: clamp(30px,4.8vw,82px); line-height: 1.02; letter-spacing: -.035em; color: #16202f; }
.konfig-band .lead { margin: clamp(22px,3vw,34px) auto 0; max-width: 56ch; font-size: 15px; line-height: 1.78; color: #47536a; text-wrap: pretty; }
.konfig-band .cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: clamp(28px,3.6vw,46px); }

/* ---------- Footer ---------- */
.dsd-footer { background: #e9e5db; }
.footer-grid { max-width: 1520px; margin: 0 auto; padding: clamp(56px,8vh,100px) clamp(16px,3vw,44px) 32px; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); gap: clamp(26px,3.4vw,56px); }
.footer-grid .brand { margin: 0 0 18px; font-weight: 500; font-size: 15px; letter-spacing: .36em; text-transform: uppercase; color: #16202f; }
.footer-grid .about { margin: 0 0 22px; font-size: 14px; line-height: 1.7; color: #47536a; }
.footer-grid .contact-list { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: #4a5468; }
/* Social icons: hand-drawn inline SVG (no icon font, no third-party script).
   Strokes inherit currentColor so the whole row recolors on hover from one
   rule; shapes that need a solid fill carry .fill instead. */
.footer-grid .social-list { display: flex; gap: 14px; margin-top: 20px; }
.footer-grid .social-list a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #16202f26; border-radius: 50%; color: #4a5468; transition: color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.8,.25,1); }
.footer-grid .social-list a:hover { color: #8a5518; border-color: #8a551859; transform: translateY(-2px); }
.footer-grid .social-list a:focus-visible { outline: 2px solid #8a5518; outline-offset: 3px; }
.footer-grid .social-list svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.footer-grid .social-list svg .fill { fill: currentColor; stroke: none; }
.footer-grid .col-title { margin: 0 0 18px; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #47536a; }
.footer-grid .link-list { display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: #4a5468; }
.footer-bottom { max-width: 1520px; margin: 0 auto; padding: 22px clamp(16px,3vw,44px) 36px; border-top: 1px solid #16202f21; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 11.5px; color: #47536a; }

/* ---------- Inner pages (Kontakt / Impressum / Konfigurator) ---------- */
.page-header { padding: clamp(150px,22vh,220px) 0 clamp(50px,7vh,90px); background: #16202f; color: #f5f3ec; }
.page-header .eyebrow { color: #c79463; }
.page-header h1 { margin: 0; font-weight: 200; font-size: clamp(32px,5.6vw,80px); line-height: 1.02; letter-spacing: -.035em; }
.page-header p.lead { margin: clamp(16px,2vw,24px) 0 0; max-width: 60ch; font-size: 15px; line-height: 1.75; color: #c3c8d3; }
.page-body { padding: clamp(56px,8vh,110px) 0; }

/* Kontakt */
.kontakt-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(32px,5vw,80px); align-items: start; }
@media (max-width: 860px) { .kontakt-grid { grid-template-columns: 1fr; } }
.kontakt-form { display: grid; gap: 18px; }
.kontakt-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .kontakt-form .row2 { grid-template-columns: 1fr; } }
.field label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #47536a; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border: 1px solid #16202f2b; background: #fff; color: #16202f;
  font-family: inherit; font-size: 14.5px; font-weight: 300;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus, .field input:focus-visible {
  outline: none; border-color: #8a5518; box-shadow: 0 0 0 3px #8a55181f;
}
.field.check { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.6; color: #47536a; }
.field.check input { width: auto; margin-top: 3px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-submit-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-note { font-size: 12.5px; color: #5a6579; }
.kontakt-info-card { background: #16202f; color: #f5f3ec; padding: clamp(28px,4vw,48px); }
.kontakt-info-card h3 { margin: 0 0 22px; font-weight: 200; font-size: 26px; letter-spacing: -.02em; }
.kontakt-info-card .item { margin-bottom: 22px; }
.kontakt-info-card .item .k { display: block; margin: 0 0 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #c79463; }
.kontakt-info-card .item a, .kontakt-info-card .item span { font-size: 14.5px; color: #d5d9e1; line-height: 1.7; }
.kontakt-info-card .item a:hover { color: #c79463; }

/* Impressum */
.legal-body { max-width: 74ch; }
.legal-body h2 { font-weight: 400; font-size: 22px; letter-spacing: -.01em; color: #16202f; margin: 46px 0 14px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { font-size: 14.5px; line-height: 1.8; color: #4a5468; }
.legal-body ul { padding-left: 20px; }
.legal-note { margin-top: 40px; padding: 18px 22px; background: #f4f2ec; border-left: 3px solid #c79463; font-size: 13px; line-height: 1.7; color: #5a6579; }

/* Konfigurator */
.konf-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: clamp(32px,4vw,60px); align-items: start; }
@media (max-width: 940px) { .konf-layout { grid-template-columns: 1fr; } }
.konf-model-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 16px; margin-bottom: 44px; }
.konf-model-card { border: 1px solid #16202f22; cursor: pointer; background: #fff; transition: border-color .2s, box-shadow .2s; }
.konf-model-card .frame { aspect-ratio: 16/10; overflow: hidden; background: #eae6dc; }
.konf-model-card .frame img { width: 100%; height: 100%; object-fit: cover; }
.konf-model-card .meta { padding: 14px 16px; }
.konf-model-card .meta h3 { margin: 0 0 4px; font-weight: 400; font-size: 16px; color: #16202f; }
.konf-model-card .meta span { font-size: 12px; color: #47536a; }
.konf-model-card.active { border-color: #8a5518; box-shadow: 0 0 0 1px #8a5518; }
.konf-model-card:focus-visible { outline: 2px solid #8a5518; outline-offset: 2px; }
.konf-group { margin-bottom: 34px; }
.konf-group h3 { margin: 0 0 4px; font-weight: 400; font-size: 18px; color: #16202f; }
.konf-group .hint { margin: 0 0 16px; font-size: 12.5px; color: #5a6579; }
.konf-option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid #16202f14; cursor: pointer; }
.konf-option:first-of-type { border-top: none; }
.konf-option input { margin-top: 3px; }
.konf-option .label { flex: 1; }
.konf-option .label .name { display: block; font-size: 14.5px; color: #26314a; }
.konf-option .label .desc { display: block; font-size: 12.5px; color: #5a6579; margin-top: 2px; }
.konf-option .price { font-size: 13.5px; color: #47536a; white-space: nowrap; }
.konf-summary { position: sticky; top: 90px; background: #16202f; color: #f5f3ec; padding: 30px 26px; }
.konf-summary h3 { margin: 0 0 20px; font-weight: 200; font-size: 22px; }
.konf-summary .line { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid #ffffff1a; font-size: 13px; color: #c3c8d3; }
.konf-summary .line:first-of-type { border-top: none; }
.konf-summary .total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 18px; border-top: 1px solid #ffffff33; }
.konf-summary .total .k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #c3c8d3; }
.konf-summary .total .v { font-weight: 200; font-size: 30px; color: #f4f2ec; }
.konf-summary .disclaimer { margin-top: 18px; font-size: 11px; line-height: 1.6; color: #8a93a6; }
.konf-summary .btn { width: 100%; text-align: center; margin-top: 18px; }

/* ---------- Modellseiten (modelle/<modell>/) ---------- */
.modell-kopf { padding-bottom: clamp(48px,7vh,80px); }
.modell-kopf__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: clamp(28px,4vw,64px); align-items: center; }
.modell-kopf .eyebrow a { color: inherit; border-bottom: 1px solid #c7946366; }
.modell-kopf .eyebrow a:hover { border-bottom-color: #c79463; }
.modell-kopf__fakten { margin: 18px 0 0; font-size: 13px; letter-spacing: .06em; color: #e6b389; }
.modell-preis { margin: 26px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #c3c8d3; }
.modell-preis strong { font-size: clamp(26px,2.6vw,36px); font-weight: 300; letter-spacing: -.01em; text-transform: none; color: #f5f3ec; }
.modell-preis span { font-size: 11px; letter-spacing: .08em; text-transform: none; color: #8f97a8; }
.modell-kopf__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.modell-kopf__bild { aspect-ratio: 4/3; overflow: hidden; background: #1c2840; }
.modell-kopf__bild img { width: 100%; height: 100%; object-fit: cover; }
.modell-block { margin-bottom: clamp(56px,8vh,96px); }
.modell-block:last-child { margin-bottom: 0; }
.modell-h2 { margin: 0 0 28px; font-weight: 200; font-size: clamp(26px,3vw,40px); letter-spacing: -.03em; color: #16202f; }
.modell-plan { margin: 0; background: #eae6dc; }
.modell-plan img { display: block; width: 100%; height: auto; }
.modell-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 12px 40px; }
.modell-spec__gruppe h3 { margin: 0 0 6px; padding-bottom: 10px; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #8a5518; border-bottom: 1px solid #16202f26; }
.modell-spec__gruppe dl { margin: 0 0 22px; }
.modell-spec__gruppe dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #16202f12; font-size: 14px; }
.modell-spec__gruppe dt { color: #5a6579; }
.modell-spec__gruppe dd { margin: 0; text-align: right; color: #16202f; font-weight: 500; }
.modell-cta { padding: clamp(32px,4vw,56px); background: #ebe7de; }
.modell-cta .modell-kopf__cta { margin-top: 0; }
@media (max-width: 860px) {
  .modell-kopf__grid { grid-template-columns: 1fr; }
  .modell-kopf__bild { order: -1; }
}
@media (max-width: 720px) { .modell-weitere { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 460px) { .modell-weitere { grid-template-columns: 1fr; } }