/* BLUESUN LUXURY YACHTS · Nuvalo Studio
   CI: Navy #073755 · BlueSun-Blau #009DDA (Logo) · eine Schrift: Roboto (seit 05.10.2026),
   Ueberschriften in 300, Text in 400, Zahlen und Knoepfe in 500.
   Seit 04.10.2026 tragen die frueheren Gold-Variablen (--gold, --gold-soft, --gold-deep)
   das Blau aus dem Logo. Die Namen sind geblieben, damit nichts bricht. */

:root{
  --navy:#073755;
  --ink:#0B2F4A;
  --azure:#009DDA;
  --azure-deep:#0B79AC;
  --gold:#009DDA;
  /* Rundungs-Familie: Regler-Spuren bleiben 2px, Kreise 50%, Pillen 60px */
  --r-ctl:10px;   /* Knoepfe, Chips, Eingaben */
  --r-card:14px;  /* Karten, Rahmen, Bildboxen */
  --r-panel:18px; /* Panels, Fenster, Dialoge */
  --gold-soft:#8FD3F0;
  --sun:#EC9422;
  --paper:#FFFFFF;
  --sky:#EAF6FC;
  --mist:#F4F9FC;
  --soft:#3D5E77;
  --gold-deep:#0B79AC;
  --line:rgba(7,55,85,.14);
  --plate:#062A42;
  --plate-2:#0A4266;
  --sh:0 30px 80px rgba(7,55,85,.16);
  --sh-soft:0 18px 50px rgba(7,55,85,.10);
  --ease:cubic-bezier(.22,.61,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  font-family:'Roboto',Arial,Helvetica,sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
h1,h2,h3,.serif{font-family:'Roboto',Arial,Helvetica,sans-serif;font-weight:500;line-height:1.12;color:var(--navy)}
em{font-style:normal}
::selection{background:rgba(0,157,218,.22)}

.wrap{width:min(1180px,92vw);margin:0 auto}
.kick{
  font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--azure-deep);margin-bottom:18px;
}
.kick.gold{color:var(--gold)}
.hairline{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);transform:scaleX(0);margin:44px 0}
.note-star{font-size:12px;color:var(--soft)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:var(--r-ctl);
  font-size:13px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s,color .35s,border-color .35s;
  border:1px solid transparent;
}
.btn i{font-style:normal;transition:transform .35s var(--ease)}
.btn:hover i{transform:translateX(5px)}
/* One primary action colour, taken from the brand's own claim artwork.
   Navy on gold measures 5.1:1, so it stays legible without shouting. */
.btn-gold{background:var(--gold);color:#fff;box-shadow:0 10px 26px rgba(0,70,110,.22)}
.btn-gold:hover{transform:translateY(-2px);background:#0A8FC7;box-shadow:0 16px 34px rgba(0,70,110,.3)}
.btn-ghost{border-color:rgba(255,255,255,.82);color:#fff;background:rgba(5,29,47,.4);backdrop-filter:blur(8px);text-shadow:0 1px 8px rgba(4,24,38,.6)}
.btn-ghost:hover{background:rgba(5,29,47,.6);border-color:#fff}
.btn-navy{border-color:var(--line);color:var(--navy);background:transparent}
.btn-navy:hover{border-color:var(--azure);color:var(--azure-deep)}
/* Gefuellter Verweis. Der nur umrandete Knopf unter den Revierkarten sah
   auf dem hellen Grund wie Text aus und lud nicht zum Klicken ein
   (19.09.2026). Gefuellt in Navy ist er eindeutig ein Weg, ohne der
   goldenen Hauptaktion die Aufmerksamkeit zu nehmen. */
.btn-voll{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 10px 26px rgba(4,24,38,.2)}
.btn-voll:hover{background:var(--azure-deep);border-color:var(--azure-deep);color:#fff;transform:translateY(-2px);box-shadow:0 16px 34px rgba(4,24,38,.28)}

/* ---------- splash ---------- */
#splash{
  position:fixed;inset:0;z-index:200;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  cursor:pointer;
}
#splash.done{display:none}
.sp-rule{width:0;height:1px;background:linear-gradient(90deg,transparent,var(--azure),transparent)}
.sp-mark{width:min(240px,52vw);opacity:0;transform:translateY(14px) scale(.97)}
.sp-sub{
  font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--soft);
  opacity:0;
}

/* ---------- header ---------- */
/* The header floats over the hero so the opening image stays full-bleed, and
   only becomes a glass bar once the reader has left it. */
#hd{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .55s var(--ease),box-shadow .55s,border-color .55s,backdrop-filter .55s;
}
#hd.on,body[data-kopf="fest"] #hd{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom-color:rgba(7,55,85,.09);
  box-shadow:0 10px 40px rgba(7,55,85,.09);
}
.hd-in{
  width:min(1320px,94vw);margin:0 auto;height:92px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  transition:height .55s var(--ease);
}
#hd.on .hd-in,body[data-kopf="fest"] #hd .hd-in{height:72px}
/* Sechs Punkte seit 11.10.2026 (Home und Blog dazu). Abstand, Schriftgroesse
   und Laufweite schrumpfen fliessend mit der Fensterbreite: ab 1500 px wie
   bisher (12px, .13em, 30px Abstand), bei 1061 px 10.5px, .08em, 14px. So
   bricht kein Punkt um, und zur mittigen Logotafel bleiben bei jeder Breite
   gut 30px Luft. */
.hd-nav{display:flex;gap:clamp(14px,calc(3.6vw - 24px),30px);align-items:center}
.hd-nav a{
  font-size:clamp(10.5px,calc(.45vw + 5.7px),12px);font-weight:500;
  letter-spacing:clamp(.84px,calc(.21vw - 1.4px),1.56px);text-transform:uppercase;white-space:nowrap;
  color:#fff;text-shadow:0 1px 10px rgba(4,24,38,.55);
  position:relative;padding:6px 0;transition:color .45s var(--ease),text-shadow .45s;
}
#hd.on .hd-nav a,body[data-kopf="fest"] #hd .hd-nav a{color:var(--navy);text-shadow:none}
.hd-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold-soft);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease),background .45s;
}
#hd.on .hd-nav a::after,body[data-kopf="fest"] #hd .hd-nav a::after{background:var(--azure)}
.hd-nav a:hover::after{transform:scaleX(1)}
/* two logo layers: a white mark over the image, the full-colour mark on glass */
.hd-logo{position:relative;display:block;width:98px;height:75px;transition:width .55s var(--ease),height .55s var(--ease)}
#hd.on .hd-logo,body[data-kopf="fest"] #hd .hd-logo{width:84px;height:64px}
.hd-logo img{width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .45s var(--ease)}
/* Ueber dem Titelbild: Sonne und Wellen in Nancys Blau (#009CD8), nur die
   Schrift weiss, damit sie auf dem Bild lesbar bleibt. Frueher war hier das
   ganze Logo eine weisse Maske und das Blau verschwand. */
.hd-logo-w{
  position:absolute;inset:0;
  background:none;
  filter:drop-shadow(0 1px 8px rgba(4,24,38,.35));
  transition:opacity .45s var(--ease);
}
#hd.on .hd-logo img,body[data-kopf="fest"] #hd .hd-logo img{opacity:1}
#hd.on .hd-logo-w,body[data-kopf="fest"] #hd .hd-logo-w{opacity:0}
.hd-right{display:flex;justify-content:flex-end;align-items:center;gap:18px}
.hd-cta{
  font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  background:var(--gold);color:#fff;padding:12px 22px;border-radius:var(--r-ctl);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;
  box-shadow:0 8px 22px rgba(0,70,110,.24);
}
.hd-cta:hover{background:#0A8FC7}
.hd-cta:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(11,121,172,.34)}
/* WhatsApp direkt in der Kopfleiste, wie auf ihrer heutigen Seite */
.hd-wa{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 14px 8px 11px;border-radius:60px;
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:12px;letter-spacing:.04em;color:#fff;white-space:nowrap;
  transition:background .35s,border-color .35s,color .45s,transform .3s var(--ease);
}
.hd-wa:hover{background:rgba(37,211,102,.18);border-color:#25D366;transform:translateY(-1px)}
/* Zwei Ebenen: geschlossene gruene Blase, darauf der weisse Hoerer.
   Eine einzelne Maske wuerde den Hoerer ausstanzen und den Hintergrund
   durchscheinen lassen, das Zeichen wechselt dann beim Scrollen die Farbe. */
.wa-ic{
  width:18px;height:18px;flex:none;position:relative;background:#25D366;
  -webkit-mask:var(--wa-b) center/contain no-repeat;mask:var(--wa-b) center/contain no-repeat;
  --wa-b:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.05 2A11.82 11.82 0 0 0 1.87 19.86L0 24l4.25-1.11A11.8 11.8 0 1 0 12.05 2z"/></svg>');
}
.wa-ic::after{
  content:"";position:absolute;inset:0;background:#fff;
  -webkit-mask:var(--wa-p) center/contain no-repeat;mask:var(--wa-p) center/contain no-repeat;
  --wa-p:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.5 14.4c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.65.07a8.2 8.2 0 0 1-2.4-1.49 9 9 0 0 1-1.66-2.07c-.17-.3-.02-.46.13-.61.14-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.5 0 1.47 1.07 2.9 1.22 3.1.15.2 2.1 3.2 5.1 4.49.71.3 1.27.49 1.7.63.72.23 1.37.2 1.88.12.58-.09 1.76-.72 2-1.42.25-.7.25-1.3.18-1.42-.08-.13-.28-.2-.58-.35z"/></svg>');
}
#hd.on .hd-wa,body[data-kopf="fest"] #hd .hd-wa{border-color:rgba(7,55,85,.2);background:rgba(7,55,85,.04);color:var(--navy)}
#hd.on .hd-wa:hover,body[data-kopf="fest"] #hd .hd-wa:hover{background:rgba(37,211,102,.12);border-color:#25D366}
@media (max-width:1240px){ .wa-no{display:none} .hd-wa{padding:9px 11px} }
@media (max-width:1060px){ .hd-wa{display:none} }

/* ---------- Sprachschalter ----------
   Ein echter Schalter statt zweier Kuerzel: Schiene mit zwei Seiten, der
   helle Knopf steht auf der aktiven Sprache, ein Klick fuehrt auf die
   andere Fassung derselben Seite (Lorenz, 26.09.2026). Die Flaggen sind
   gezeichnet, nicht als Bilddatei: Emoji-Flaggen zeigt Windows als
   Buchstaben, und eine Bilddatei waere ein zusaetzlicher Abruf. */
.hd-lang{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.hl-t{color:rgba(255,255,255,.72);transition:color .45s;white-space:nowrap}
#hd.on .hl-t,body[data-kopf="fest"] #hd .hl-t{color:var(--soft)}
.hl-sw{
  position:relative;display:inline-flex;align-items:stretch;
  padding:3px;border-radius:60px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  transition:background .45s,border-color .45s,box-shadow .35s;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
#hd.on .hl-sw,body[data-kopf="fest"] #hd .hl-sw{background:rgba(7,55,85,.07);border-color:var(--line)}
.hl-sw:hover{box-shadow:0 4px 14px rgba(4,24,38,.22)}
/* der Knopf: liegt auf der aktiven Haelfte und faehrt beim Wechsel hinueber */
.hl-sw::before{
  content:"";position:absolute;top:3px;bottom:3px;width:calc(50% - 3px);
  border-radius:60px;background:#fff;box-shadow:0 2px 8px rgba(4,24,38,.28);
  transition:transform .45s var(--ease);
}
.hl-de::before{transform:translateX(0)}
.hl-en::before{transform:translateX(100%)}
.hl-seite{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;font-size:10px;letter-spacing:.12em;font-weight:500;
  color:rgba(255,255,255,.8);transition:color .4s;
}
#hd.on .hl-seite,body[data-kopf="fest"] #hd .hl-seite{color:var(--soft)}
/* die aktive Seite steht auf Weiss, also immer in Navy */
.hl-de .hl-seite:first-child,.hl-en .hl-seite:last-child{color:var(--navy)}
#hd.on .hl-de .hl-seite:first-child,#hd.on .hl-en .hl-seite:last-child,
body[data-kopf="fest"] #hd .hl-de .hl-seite:first-child,
body[data-kopf="fest"] #hd .hl-en .hl-seite:last-child{color:var(--navy)}
.hl-f{
  width:16px;height:11px;border-radius:2px;flex:none;display:block;
  box-shadow:0 0 0 1px rgba(4,24,38,.18);background-size:cover;background-position:center;
}
.hl-f-de{background-image:linear-gradient(180deg,#000 0 33.34%,#DD0000 33.34% 66.67%,#FFCE00 66.67%)}
.hl-f-gb{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 v30M0,15 h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 v30M0,15 h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E")}
/* kleinere Fassung im Menue */
.mn-lang{gap:10px}
.mn-lang .hl-t{color:var(--soft)}
.mn-lang .hl-sw{background:rgba(7,55,85,.07);border-color:var(--line);backdrop-filter:none}
.mn-lang .hl-seite{color:var(--soft)}
.mn-lang .hl-de .hl-seite:first-child,.mn-lang .hl-en .hl-seite:last-child{color:var(--navy)}
@media (prefers-reduced-motion:reduce){ .hl-sw::before{transition:none} }
#burger{display:none;width:40px;height:40px;position:relative}
#burger span{
  position:absolute;left:8px;right:8px;height:1.6px;background:#fff;
  box-shadow:0 1px 6px rgba(4,24,38,.4);
  transition:transform .4s var(--ease),opacity .3s,background .45s,box-shadow .45s;
}
#hd.on #burger span,body[data-kopf="fest"] #hd #burger span{background:var(--navy);box-shadow:none}
#burger span:nth-child(1){top:15px}
#burger span:nth-child(2){top:24px}
#burger.x span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
#burger.x span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}

/* ---------- mobile menu ---------- */
#menu{
  position:fixed;inset:0;z-index:90;visibility:hidden;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  display:flex;align-items:center;
}
.mn-in{width:min(1180px,88vw);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:center}
#menu nav{display:flex;flex-direction:column;gap:6px}
.mn-msk{overflow:hidden}
#menu nav a{
  display:inline-block;font-family:'Roboto',Arial,Helvetica,sans-serif;font-weight:500;
  font-size:clamp(30px,4.6vw,52px);color:var(--navy);line-height:1.25;
}
#menu nav a:hover{color:var(--azure-deep)}
.mn-side{display:flex;flex-direction:column;gap:26px;font-size:14px;color:var(--soft)}
.mn-side .kick{margin-bottom:8px}
.mn-note{font-size:12px;opacity:.9;font-style:normal}

/* ---------- fixed sea layer ---------- */
#bgsea{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#bgsea .sea-img{width:100%;height:100%;object-fit:cover;transform-origin:center}
.sea-grade{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(5,29,47,.76) 0%,rgba(5,29,47,.52) 34%,rgba(5,29,47,.14) 64%,rgba(5,29,47,0) 80%),
    linear-gradient(180deg,rgba(6,36,58,.5) 0%,rgba(6,36,58,.34) 42%,rgba(5,29,47,.68) 100%);
}
.sea-veil{position:absolute;inset:0;background:var(--navy);opacity:0}

/* ---------- hero ---------- */
main{position:relative;z-index:1}
section{position:relative}
#hero{height:186vh}
.hero-stick{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.hero-body{width:min(1180px,92vw);margin:0 auto;color:#fff}
.hero-body .kick{color:#CFEFFC;text-shadow:0 1px 6px rgba(4,24,38,.85),0 2px 18px rgba(4,24,38,.7)}
.hero-h{
  color:#fff;font-size:clamp(44px,7vw,96px);font-weight:500;line-height:1.04;
  max-width:11em;text-shadow:0 2px 16px rgba(4,24,38,.55),0 6px 60px rgba(4,24,38,.5);
}
.hero-h em{color:#A8E0F7;text-shadow:0 2px 14px rgba(4,24,38,.78),0 6px 44px rgba(4,24,38,.6)}
.hero-sub{
  margin-top:26px;font-size:clamp(15px,1.45vw,18px);font-weight:400;
  letter-spacing:.03em;color:rgba(255,255,255,.97);max-width:38em;
  text-shadow:0 1px 14px rgba(4,24,38,.6);
}
.hero-cta{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap;opacity:0}
.hero-cue{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:18px;
  color:rgba(255,255,255,.92);
  font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;opacity:0;
  text-shadow:0 1px 10px rgba(4,24,38,.65);
  padding:8px 14px 4px;
  transition:color .4s var(--ease);
}
.hero-cue:hover{color:#fff}
/* der Anker fällt an seiner Kette: nautisch statt der üblichen Punkt-auf-Linie */
.cue-anchor{width:33px;height:102px;display:block;color:var(--gold-soft);overflow:visible}
.cue-chain{
  stroke-dasharray:3 4;
  animation:cueChain 3.4s linear infinite;
  opacity:.75;
}
.cue-hook{animation:cueDrop 3.4s var(--ease) infinite;transform-origin:12px 56px}
.hero-cue:hover .cue-chain,
.hero-cue:hover .cue-hook{animation-duration:2.2s}
@keyframes cueChain{ to{ stroke-dashoffset:-14 } }
@keyframes cueDrop{
  0%   {transform:translateY(-14px) rotate(0deg);opacity:0}
  18%  {opacity:1}
  55%  {transform:translateY(0) rotate(0deg)}
  70%  {transform:translateY(2px) rotate(-4deg)}
  82%  {transform:translateY(0) rotate(3deg)}
  92%  {opacity:1}
  100% {transform:translateY(6px) rotate(0deg);opacity:0}
}

/* ---------- inset floating panels over the sea layer ---------- */
section.inset{padding:clamp(40px,7vh,90px) 0}
.panel{
  width:min(1240px,94vw);margin:0 auto;position:relative;
  border-radius:var(--r-card);overflow:hidden;
}
.panel.paper{
  background:rgba(255,255,255,.96);
  box-shadow:var(--sh);
  padding:clamp(56px,8vh,110px) 0;
}
/* dunkles Glas nach Art des Finder-Fensters: die fixe See-Ebene schimmert
   sichtbar und gesättigt hindurch, Text läuft weiß mit Goldakzenten.
   Bewusst gewählt, kein Versehen. */
.panel.glass{
  background:linear-gradient(165deg,rgba(5,32,52,.58) 0%,rgba(8,49,77,.44) 100%);
  backdrop-filter:blur(22px) saturate(1.35) brightness(1.06);
  -webkit-backdrop-filter:blur(22px) saturate(1.35) brightness(1.06);
  border:1px solid rgba(238,246,252,.2);
  box-shadow:0 40px 110px rgba(2,14,26,.45),inset 0 1px 0 rgba(255,255,255,.18);
  color:#EAF4FB;
}
@supports not (backdrop-filter:blur(1px)){
  .panel.glass{background:linear-gradient(160deg,#062A42 0%,#0A4266 100%)}
}
.panel.glass h2{color:#fff}
.panel.glass .kick{color:var(--gold-soft)}
.panel.glass .pr-p{color:rgba(238,246,252,.88)}
.panel.glass .pr-foot div b{color:#fff}
.panel.glass .pr-foot div span{color:rgba(238,246,252,.66)}
.panel.glass .hairline{background:linear-gradient(90deg,transparent,rgba(143,211,240,.5),transparent)}
.panel.deep{
  background:linear-gradient(160deg,#062A42 0%,#0A4266 100%);
  box-shadow:var(--sh);
  padding:clamp(56px,8vh,100px) 0;
  color:#EAF4FB;
}
.panel.deep h2,.panel.deep h3{color:#fff}

/* ---------- promise ---------- */
.pr-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:60px;align-items:center}
.pr-h{font-size:clamp(30px,3.6vw,50px);max-width:15em}
.pr-p{margin-top:24px;color:var(--soft);font-size:16px;max-width:36em}
/* Trust block, set typographically instead of relying on the low-quality
   composite badge PNG whose lettering collided with the logos. */
/* die Trust-Karte schwebt als helles Glas auf dem dunklen Panel */
.pr-claim{
  background:rgba(255,255,255,.92);border-radius:var(--r-panel);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 24px 70px rgba(2,14,26,.35);
  padding:clamp(28px,3.4vw,40px) clamp(24px,3vw,36px);
  display:flex;flex-direction:column;align-items:center;gap:26px;
}
.pr-claim img.claim{width:min(300px,88%)}
.trust-note{font-size:12.5px;color:var(--soft);text-align:center;max-width:26em;margin:0}
/* echte Verbandslogos wirken stärker als gesetzte Schrift */
.tl-wrap{width:100%;text-align:center}
.tl-lbl{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:14px}
.tl-logos{display:flex;align-items:center;justify-content:center;gap:clamp(22px,3vw,38px)}
.tl-logos{flex-wrap:wrap;row-gap:16px}
.tl-logos img{
  height:58px;width:auto;
  transition:transform .45s var(--ease);
}
/* der MYBA-Schriftzug ist eine Wortmarke, kein Siegel: niedriger setzen */
.tl-logos img.tl-word{height:30px}
.tl-logos img:hover{transform:translateY(-3px)}
@media (max-width:600px){ .tl-logos img{height:46px} .tl-logos img.tl-word{height:24px} }

.pr-foot{display:flex;gap:40px;flex-wrap:wrap;margin-top:8px}
.pr-foot div b{font-family:'Roboto',Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:30px;font-weight:600;color:var(--navy);display:block}
.pr-foot div span{font-size:12px;color:var(--soft);letter-spacing:.06em}

/* ---------- pillars (pinned chapters) ---------- */
#pillars{height:340vh}
.pil-stick{
  position:sticky;top:clamp(14px,3vh,36px);height:calc(100svh - clamp(28px,6vh,72px));
  width:min(1240px,94vw);margin:0 auto;border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--sh);background:var(--plate);
}
.pil-media{position:absolute;inset:0}
.pil-media figure{position:absolute;inset:0;margin:0;opacity:0}
.pil-media img{width:100%;height:100%;object-fit:cover}
/* The chapter images run bright (night harbour, white hulls), so the scrim must
   carry the whole width: the copy column sits on the right, where the old
   gradient was thinnest. */
.pil-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,32,52,.93) 0%,rgba(5,32,52,.82) 52%,rgba(5,32,52,.70) 100%),
    linear-gradient(180deg,rgba(5,32,52,.34) 0%,rgba(5,32,52,0) 32%);
}
.pil-body{
  position:relative;z-index:2;height:100%;
  display:grid;grid-template-columns:1.1fr 1fr;gap:40px;
  padding:clamp(30px,5vh,60px) clamp(26px,4.5vw,64px);
}
.pil-idx{display:flex;flex-direction:column;gap:clamp(10px,2.4vh,26px);justify-content:center}
.pil-t{
  font-size:clamp(26px,3.4vw,46px);color:rgba(255,255,255,.64);
  display:flex;align-items:baseline;gap:18px;transition:color .5s;
  text-shadow:0 1px 12px rgba(3,20,34,.65);
}
.pil-t .n{font-size:12px;letter-spacing:.22em;color:var(--gold-soft);font-family:'Roboto';font-weight:400}
.pil-t.on{color:#fff}
.pil-copy{position:relative;display:flex;align-items:center}
.pil-copy .pc{position:absolute;inset:auto 0;opacity:0}
.pil-copy .kick{color:#F3E7C6;text-shadow:0 1px 10px rgba(3,20,34,.8)}
.pil-copy p:not(.kick){
  font-size:clamp(15.5px,1.4vw,19px);color:#fff;max-width:30em;
  text-shadow:0 1px 12px rgba(3,20,34,.75);
}
.pil-copy .ch{opacity:.3}
.pil-progress{
  position:absolute;left:clamp(26px,4.5vw,64px);bottom:clamp(22px,4vh,40px);z-index:3;
  display:flex;gap:10px;
}
.pil-progress i{width:56px;height:2px;background:rgba(255,255,255,.22);display:block;border-radius:2px;overflow:hidden}
.pil-progress b{display:block;height:100%;width:100%;background:var(--gold-soft);transform:scaleX(0);transform-origin:left}

/* ---------- painpoints: Nancys eigene Argumentation, sauber gesetzt ---------- */
/* Woran es scheitert: Nancys Gegenueberstellung (25.09.2026). Je Zeile ein
   Paar, links das Problem mit rotem Kreuz, rechts die Loesung mit goldenem
   Haken. Als Paar in einer Zeile, damit die beiden Seiten auf Augenhoehe
   stehen; am Telefon untereinander. */
.pp-lead{max-width:62ch;margin-bottom:clamp(26px,4vh,40px)}
.pp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px)}
.pp-kopf{
  margin:0;padding:0 0 10px 40px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft);border-bottom:1px solid var(--line);
}
.pp-paare{list-style:none;display:flex;flex-direction:column}
.pp-paare>li{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);
  padding:17px 0;border-bottom:1px solid var(--line);
}
.pp-paare>li:last-child{border-bottom:0}
.pp-paare .pp-bad,.pp-paare .pp-good{position:relative;padding-left:40px}
.pp-paare b{display:block;font-size:15.5px;font-weight:500;color:var(--navy);margin-bottom:3px}
.pp-paare span{display:block;font-size:14.5px;line-height:1.55;color:var(--soft)}
.pp-paare .pp-bad::before,.pp-paare .pp-good::before{
  position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;
}
.pp-paare .pp-bad::before{content:"×";background:rgba(179,38,30,.1);color:#B3261E;font-size:16px;font-weight:600}
.pp-paare .pp-good::before{content:"✓";background:rgba(23,122,78,.12);color:#17794E;font-size:13px;font-weight:600}
.pp-paare .pp-bad b{color:var(--soft)}
.pp-kopf.pp-good{color:#17794E}
/* Eckdaten der Beispielyacht unter Nancys Typentext */
.fl-bsp{margin-top:10px;font-size:14px;color:var(--soft)}
@media (max-width:860px){
  .pp-grid{display:none}
  .pp-paare>li{grid-template-columns:1fr;gap:12px}
}

/* ---------- yacht finder entry ---------- */
.fd-grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,70px);align-items:center}
.fi-h{font-size:clamp(30px,3.6vw,50px);color:#fff;max-width:12em}
.fi-p{margin-top:20px;color:rgba(238,246,252,.92);font-size:16px;max-width:34em}
/* Der Hinweis, dass die Empfehlung ohne Kontaktdaten zu sehen ist.
   Vorher: kursiv in Goldbeige mit Zierbalken. Auf dem hellen Panel stand
   damit heller Text auf fast weissem Grund, kaum lesbar (19.09.2026).
   Jetzt eine ruhige Zeile mit Haken, in den Farben der Seite. */
.fi-free{
  margin:20px 0 30px;max-width:34em;display:flex;gap:11px;align-items:flex-start;
  padding:13px 17px;border-radius:var(--r-card);
  background:rgba(255,255,255,.08);border:1px solid rgba(143,211,240,.38);
  color:rgba(238,246,252,.94);font-size:14.5px;line-height:1.55;
}
.fi-free::before{
  content:"";flex:none;width:17px;height:17px;margin-top:2px;background:var(--gold-soft);
  --haken:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>');
  -webkit-mask:var(--haken) center/contain no-repeat;mask:var(--haken) center/contain no-repeat;
}
.fi-steps{list-style:none;display:flex;flex-direction:column;gap:2px}
.fi-steps li{
  display:flex;align-items:baseline;gap:18px;padding:18px 4px;
  border-top:1px solid rgba(143,211,240,.28);
}
.fi-steps li:last-child{border-bottom:1px solid rgba(143,211,240,.28)}
.fi-steps b{font-family:'Roboto',Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:15px;letter-spacing:.16em;color:var(--gold-soft);font-weight:400}
.fi-steps span{font-size:14.5px;color:rgba(238,246,252,.9)}

/* ---------- fleet rows ---------- */
#fleet{padding:clamp(70px,11vh,130px) 0;background:var(--paper)}
.fl-h{font-size:clamp(30px,3.8vw,54px);max-width:14em}
.fl-row{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,5vw,70px);
  align-items:center;margin-top:clamp(60px,9vh,100px);
}
.fl-row.flip{grid-template-columns:1fr 1.15fr}
.fl-row.flip .fl-frame{order:2}
.fl-frame{
  display:block;position:relative;
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-soft);
  aspect-ratio:16/10;
}
.fl-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
/* Nur der Zoom, keine sich oeffnenden Raender: dieselbe Mechanik wie auf
   den Flottenkarten, damit das Bild sichtbar anklickbar ist. */
.fl-frame:hover img,.fl-frame:focus-visible img{transform:scale(1.05)}
.fl-lupe{
  position:absolute;left:0;right:0;bottom:0;padding:34px 22px 18px;
  background:linear-gradient(180deg,rgba(4,24,38,0),rgba(4,24,38,.72));
  color:#fff;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.fl-frame:hover .fl-lupe,.fl-frame:focus-visible .fl-lupe{opacity:1;transform:none}
@media (hover:none){ .fl-lupe{opacity:1;transform:none} }
.fl-name{font-size:clamp(30px,3vw,44px)}
.fl-specs{display:flex;gap:26px;flex-wrap:wrap;margin:18px 0 14px}
.fl-specs div b{font-family:'Roboto',Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:600;font-size:21px;color:var(--navy);display:block}
.fl-specs div span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.fl-p{color:var(--soft);max-width:34em;margin-bottom:22px}
.fl-price{font-size:13px;color:var(--navy);letter-spacing:.05em;margin-bottom:26px}
.fl-price b{font-weight:500}
.fl-more{text-align:center;margin-top:clamp(60px,8vh,90px)}
/* Kapiteltitel als Weg: Zeiger und Farbwechsel beim Darueberfahren */
.pil-t.pil-klick{cursor:pointer;transition:color .35s}
.pil-t.pil-klick:hover{color:var(--azure-deep)}
.pil-t.pil-klick:focus-visible{outline:2px solid var(--azure);outline-offset:6px}
/* Verweis je Yachttyp in die Yachtsuche, mit gesetztem Filter. Nancy
   fuerchtet, Gaeste haelten die fuenf Beispiele fuer das ganze Angebot
   (25.09.2026). Deshalb fuehrt jede Reihe in ihre Bauart. */
.fl-typ{
  display:inline-block;margin-left:22px;font-size:13px;letter-spacing:.06em;
  color:var(--gold-deep);text-decoration:underline;text-underline-offset:4px;
  transition:color .3s;
}
.fl-typ:hover{color:var(--azure-deep)}
/* Das Band unter den fuenf Beispielen: sechs Yachtfotos als Teppich,
   darueber der Weg in die ganze Auswahl. */
.fl-alle{
  display:block;position:relative;margin-top:clamp(50px,7vh,80px);
  border-radius:var(--r-card);overflow:hidden;background:var(--navy);
  box-shadow:var(--sh-soft);
}
.fa-bilder{display:grid;grid-template-columns:repeat(6,1fr);height:clamp(300px,38vh,420px)}
.fa-bilder img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)}
.fl-alle::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,24,38,.52),rgba(4,24,38,.78));
}
.fa-text{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:10px;
  padding:clamp(24px,4vw,48px);color:#fff;
}
.fa-text .kick{color:var(--gold-soft)}
.fa-text b{
  font-family:'Roboto',Arial,Helvetica,sans-serif;font-weight:500;color:#fff;
  font-size:clamp(26px,3.2vw,42px);line-height:1.1;
}
.fa-p{max-width:46ch;font-size:15px;line-height:1.6;color:rgba(238,246,252,.92)}
.fl-alle .btn{margin-top:8px;pointer-events:none}
.fl-alle:hover .btn{background:#0A8FC7}
@media (max-width:760px){
  .fa-bilder{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
  .fl-typ{display:block;margin:14px 0 0}
}

/* ---------- destinations strip ---------- */
#destinations{padding:clamp(70px,10vh,120px) 0 clamp(80px,12vh,140px);background:var(--mist)}
.ds-strip{
  display:flex;gap:14px;margin-top:clamp(40px,6vh,60px);
  height:clamp(380px,56vh,520px);
}
.ds-panel{
  position:relative;flex:1;border-radius:var(--r-card);overflow:hidden;cursor:pointer;
  transition:flex .85s var(--ease);box-shadow:var(--sh-soft);
}
.ds-panel:hover{flex:2.6}
.ds-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ds-panel:hover img{transform:scale(1.05)}
.ds-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,38,60,.42) 0%,rgba(6,38,60,0) 24%,rgba(7,55,85,0) 44%,rgba(6,38,60,.88) 100%);
}
.ds-name-v{
  position:absolute;top:22px;left:24px;
  font-family:'Roboto',Arial,Helvetica,sans-serif;font-size:21px;color:#fff;
  writing-mode:vertical-rl;letter-spacing:.06em;opacity:.96;
  text-shadow:0 1px 10px rgba(4,24,38,.65);
  transition:opacity .5s;
}
.ds-panel:hover .ds-name-v{opacity:0}
.ds-info{
  position:absolute;left:26px;right:26px;bottom:22px;color:#fff;
  text-shadow:0 1px 10px rgba(4,24,38,.6);
  opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease) .12s,transform .6s var(--ease) .12s;
}
.ds-panel:hover .ds-info{opacity:1;transform:none}
.ds-city{font-family:'Roboto',Arial,Helvetica,sans-serif;font-size:clamp(26px,2.6vw,38px);display:block;line-height:1.1}
.ds-tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);display:block;margin-bottom:6px}
.ds-meta{font-size:12.5px;color:rgba(255,255,255,.96);display:block;margin-top:6px}

/* ---------- founder ---------- */
#founder{padding:clamp(70px,11vh,130px) 0;background:var(--paper)}
.fd-grid{display:grid;grid-template-columns:.85fr 1.5fr;gap:clamp(40px,6vw,80px);align-items:center}
.fd-frame{display:flex;justify-content:center}
.fd-frame img{width:min(300px,70vw);border-radius:50%;box-shadow:var(--sh)}
.fd-q{
  font-family:'Roboto',Arial,Helvetica,sans-serif;font-size:clamp(26px,2.9vw,40px);
  font-weight:500;color:var(--navy);line-height:1.25;max-width:18em;
}
.fd-q .w{opacity:0;display:inline-block;transform:translateY(12px)}
.fd-att{margin-top:18px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.fd-p{margin-top:18px;color:var(--soft);max-width:38em}
.tr-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(50px,8vh,80px)}
.tr-n{border-top:1px solid var(--line);padding-top:18px}
.tr-n b{font-family:'Roboto',Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:clamp(34px,3.6vw,52px);font-weight:600;color:var(--navy);display:block;line-height:1}
.tr-n b i{font-style:normal;color:var(--azure)}
.tr-n span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);display:block;margin-top:8px}

/* ---------- activities ---------- */
#activities{padding:0 0 clamp(80px,12vh,140px);background:var(--paper)}

/* ---------- steps (the doors pattern, nautical) ---------- */
#steps{padding:clamp(40px,7vh,90px) 0}
#steps .panel{padding:clamp(50px,7vh,84px) 0}
.st-head{text-align:center;margin-bottom:clamp(40px,6vh,60px)}
.st-head h2{font-size:clamp(30px,3.6vw,50px);color:#fff}
.st-head .kick{color:var(--gold-soft)}
.st-frame{
  display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;gap:clamp(20px,3.5vw,48px);
  width:min(1040px,88%);margin:0 auto;align-items:stretch;
}
.st-div{background:linear-gradient(180deg,transparent,rgba(143,211,240,.5),transparent)}
.step{text-align:center;padding:10px clamp(4px,1vw,14px)}
.stnum{
  font-family:'Roboto',Arial,Helvetica,sans-serif;font-size:15px;letter-spacing:.3em;color:var(--gold-soft);
  display:inline-flex;width:52px;height:52px;border:1px solid rgba(143,211,240,.5);border-radius:50%;
  align-items:center;justify-content:center;text-indent:.3em;margin-bottom:20px;
}
.step h3{color:#fff;font-size:25px;margin-bottom:10px}
.step .ssub{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);display:block;margin-bottom:12px}
.step p{font-size:14.5px;color:rgba(238,246,252,.94);max-width:24em;margin:0 auto}
/* Die Kontaktzeile unter den drei Schritten (.st-foot) ist seit 11.10.2026 entfallen. */

/* ---------- ticker ---------- */
#ticker{padding:clamp(60px,9vh,100px) 0;background:var(--paper);overflow:hidden}
#ticker .kick{text-align:center}
.mq{position:relative;margin-top:26px}
.mq-track{
  display:flex;gap:64px;width:max-content;
  animation:mq 46s linear infinite;
  font-family:'Roboto',Arial,Helvetica,sans-serif;font-style:normal;font-size:clamp(24px,2.6vw,38px);
  color:var(--navy);white-space:nowrap;align-items:center;
}
.mq-track span{opacity:.9}
.mq-track i{font-style:normal;color:var(--gold);font-size:.5em;transform:translateY(-4px)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- newsletter ---------- */
#news{background:var(--mist);padding:clamp(50px,8vh,80px) 0}
.nw-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.nw-grid h2{font-size:clamp(24px,2.6vw,36px);max-width:16em}
.nw-form{display:flex;gap:10px}
.nw-form input{
  flex:1;border:1px solid var(--line);background:#fff;border-radius:var(--r-ctl);
  padding:14px 16px;font:inherit;font-size:14px;color:var(--ink);
}
.nw-form input:focus{outline:1.5px solid var(--azure)}
.nw-done{margin-top:12px;font-size:12.5px;color:var(--azure-deep);display:none}
.nw-done.on{display:block}

/* ---------- footer ---------- */
footer{background:var(--plate);color:rgba(238,246,252,.92);padding:clamp(60px,9vh,90px) 0 40px;position:relative;z-index:1}
.ft-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:clamp(30px,4vw,60px)}
.ft-brand img{width:210px;margin-bottom:20px}
.ft-brand .ft-logo{width:168px;height:auto;margin-bottom:18px}
/* the claim artwork carries dark navy lettering, which vanishes on the navy
   footer: render it as a gold mask instead of showing the raw PNG */
.ft-claim{
  display:block;width:214px;height:48px;margin-bottom:22px;
  background:var(--gold-soft);
  -webkit-mask:url("media/claim-gold.png") left center/contain no-repeat;
  mask:url("media/claim-gold.png") left center/contain no-repeat;
}
.ft-brand p{font-size:13.5px;line-height:1.8}
.ft-h{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:18px;font-weight:500}
.ft-col a{display:block;font-size:14px;padding:5px 0;color:rgba(238,246,252,.92)}
.ft-col a:hover{color:#fff}
.ft-soc{display:flex;gap:12px;margin-top:20px}
.soc{
  width:40px;height:40px;border:1px solid rgba(234,244,251,.28);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .4s,background .4s,transform .35s var(--ease);
}
.soc:hover{border-color:var(--gold-soft);background:rgba(143,211,240,.12);transform:translateY(-2px)}
.soc-ic{
  width:16px;height:16px;display:block;background:currentColor;color:#EAF4FB;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;
}
.ft-low{
  margin-top:clamp(40px,6vh,60px);padding-top:26px;border-top:1px solid rgba(234,244,251,.14);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:12px;color:rgba(238,246,252,.74);
}

/* ---------- dialogs ---------- */
dialog{
  border:0;border-radius:var(--r-panel);padding:0;
  /* der globale Margin-Reset frisst sonst die native Zentrierung */
  margin:auto;
  width:min(560px,92vw);
  /* laenger als der Bildschirm: im Fenster scrollen statt abgeschnitten */
  max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;
  background:rgba(255,255,255,.98);
  box-shadow:0 40px 120px rgba(6,33,53,.4);
  color:var(--ink);
}
dialog[open]{animation:dlgAuf .4s var(--ease)}
@keyframes dlgAuf{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
/* gleiches Glas wie Finder und Panels */
dialog::backdrop{
  background:rgba(224,239,249,.32);
  backdrop-filter:blur(14px) brightness(1.16) saturate(1.05);
}
.dlg-in{padding:clamp(30px,5vw,48px)}
.dlg-x{
  position:absolute;top:14px;right:16px;font-size:26px;color:var(--soft);
  width:40px;height:40px;line-height:1;border-radius:50%;
}
.dlg-x:hover{color:var(--navy)}
dialog h3{font-size:30px;margin:6px 0 6px}
dialog>div>p{color:var(--soft);font-size:14px}
.fld{margin-top:16px;display:flex;flex-direction:column;gap:7px}
.fld label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.fld input,.fld select,.fld textarea{
  border:1px solid var(--line);border-radius:var(--r-ctl);background:#fff;
  padding:12px 14px;font:inherit;font-size:14.5px;color:var(--ink);width:100%;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:1.5px solid var(--azure)}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dlg-note{font-size:12px;color:var(--soft);font-style:normal;margin-top:18px}
.dlg-note.on{color:var(--azure-deep)}
.line-btn{
  display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:var(--r-ctl);
  align-items:flex-start;text-align:left;width:100%;
  padding:16px 20px;margin-top:12px;transition:border-color .35s,transform .3s var(--ease);
}
.line-btn:hover{border-color:var(--azure);transform:translateY(-2px)}
.line-btn b{font-weight:500;color:var(--navy);font-size:15.5px}
.line-btn span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
/* der empfohlene Weg: das Anfrageformular, golden hervorgehoben */
.line-btn-gold{border-color:rgba(0,157,218,.55);background:rgba(143,211,240,.12)}
.line-btn-gold:hover{border-color:var(--gold);background:rgba(143,211,240,.2)}
.line-btn-gold span{color:var(--gold-deep)}

/* ---------- request journey: Fenster auf Glas ----------
   Der Fragebogen ist ein Fenster über der Seite; dahinter bleibt die Seite
   sichtbar, leicht aufgehellt und verschwommen wie durch ein Glas. Geschlossen
   wird nur bewusst: über das X oder einen echten Klick auf das Glas. */
#journey{
  position:fixed;inset:0;z-index:150;visibility:hidden;opacity:0;
  background:rgba(224,239,249,.32);
  backdrop-filter:blur(14px) brightness(1.16) saturate(1.05);
  -webkit-backdrop-filter:blur(14px) brightness(1.16) saturate(1.05);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vh,44px) clamp(12px,3vw,44px);
}
#journey.on{visibility:visible}
.jy-win{
  position:relative;width:min(1100px,100%);max-height:100%;
  display:flex;flex-direction:column;border-radius:var(--r-panel);overflow:hidden;
  background:linear-gradient(160deg,rgba(4,24,39,.97) 0%,rgba(8,49,77,.96) 100%);
  border:1px solid rgba(143,211,240,.3);
  box-shadow:0 46px 130px rgba(3,18,30,.5);
}
.jy-bar{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(143,211,240,.16);z-index:6}
.jy-bar i{display:block;height:100%;background:var(--gold-soft);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.jy-close,.jy-back{
  position:absolute;top:20px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(238,246,252,.35);color:#EAF4FB;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;z-index:5;
  transition:border-color .35s,background .35s,transform .3s var(--ease);
}
.jy-close{right:24px}
.jy-back{left:24px;opacity:0;pointer-events:none}
.jy-back.on{opacity:1;pointer-events:auto}
.jy-close:hover,.jy-back:hover{border-color:var(--gold-soft);background:rgba(143,211,240,.12);transform:translateY(-1px)}
.jy-stage{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;
  padding:84px clamp(22px,5vw,60px) 36px;
  /* Was nach oben wegscrollt, blendet unter Zurueck und Schliessen aus,
     statt sich mit ihnen zu ueberlagern. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 76px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 76px);
}
.jy-step{display:none;width:100%;max-width:960px}
.jy-step.on{display:block;margin:auto}
.jy-kick{font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:16px}
.jy-q{font-family:'Roboto',Arial,Helvetica,sans-serif;font-weight:500;font-size:clamp(30px,4.2vw,52px);color:#fff;line-height:1.1;margin-bottom:clamp(26px,4.5vh,44px)}
.jy-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.jy-card{
  position:relative;aspect-ratio:4/4.8;border-radius:var(--r-card);overflow:hidden;text-align:left;
  border:1px solid rgba(238,246,252,.22);
  background-image:linear-gradient(180deg,rgba(6,33,53,.16) 34%,rgba(4,24,38,.86) 100%),var(--im,linear-gradient(160deg,#0A4266,#062A42));
  background-size:cover;background-position:center;
  transition:transform .45s var(--ease),border-color .4s,box-shadow .45s var(--ease);
}
.jy-card:hover{transform:translateY(-4px);border-color:var(--gold-soft);box-shadow:0 18px 50px rgba(3,18,30,.5)}
.jy-card.on{border:1.5px solid var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 18px 50px rgba(3,18,30,.5)}
.jy-card-name{position:absolute;left:16px;bottom:30px;font-family:'Roboto',Arial,Helvetica,sans-serif;font-size:21px;color:#fff}
.jy-card-sub{position:absolute;left:16px;bottom:12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}
/* option cards: one tap per question, no dropdowns */
.jy-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:12px}
.jy-opt{
  text-align:left;padding:20px 18px 18px;border-radius:var(--r-card);
  border:1px solid rgba(238,246,252,.24);background:rgba(255,255,255,.045);
  transition:border-color .35s,background .35s,transform .35s var(--ease);
}
.jy-opt:hover{border-color:var(--gold-soft);background:rgba(143,211,240,.1);transform:translateY(-3px)}
.jy-opt.on{border-color:var(--gold);background:rgba(143,211,240,.16);box-shadow:0 0 0 1px var(--gold) inset}
.jy-opt b{display:block;font-family:'Roboto',Arial,Helvetica,sans-serif;font-weight:500;font-size:24px;color:#fff;line-height:1.2}
.jy-opt span{display:block;margin-top:6px;font-size:12.5px;color:rgba(238,246,252,.72)}
.jy-quiet{border-color:rgba(238,246,252,.28);color:rgba(238,246,252,.85)}
.jy-wide{width:min(1180px,94vw)}

/* the recommendation: the value the visitor gets before being asked for anything */
.rec{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(28px,4vw,56px);align-items:start}
.rec-h{font-family:'Roboto',Arial,Helvetica,sans-serif;font-weight:500;font-size:clamp(28px,3.6vw,46px);color:#fff;line-height:1.12;margin-bottom:10px}
.rec-sub{font-size:14px;letter-spacing:.02em;color:var(--gold-soft);margin-bottom:22px}
.rec-why{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.rec-why li{position:relative;padding-left:24px;font-size:14.5px;color:rgba(238,246,252,.94);max-width:44em}
.rec-why li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--gold-soft);
}
.rec-price{border-top:1px solid rgba(143,211,240,.35);padding-top:18px;margin-bottom:26px}
.rec-price-l{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(238,246,252,.62)}
.rec-price b{display:block;font-family:'Roboto',Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:600;font-size:clamp(26px,3vw,36px);color:#fff;margin:4px 0 4px}
.rec-price-n{display:block;font-size:11.5px;color:rgba(238,246,252,.66)}
.rec-actions{gap:14px;flex-wrap:wrap}
.rec-card{
  border-radius:var(--r-card);overflow:hidden;background:rgba(255,255,255,.05);
  border:1px solid rgba(238,246,252,.18);
}
.rec-card figure{margin:0;aspect-ratio:4/3;overflow:hidden;position:relative}
.rec-card figure img{width:100%;height:100%;object-fit:cover}
.rec-card figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 18px 13px;
  background:linear-gradient(180deg,rgba(5,29,47,0),rgba(5,29,47,.85));
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.rec-card-b{padding:20px 22px 24px}
.rec-card-k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}
.rec-card-n{display:block;font-family:'Roboto',Arial,Helvetica,sans-serif;font-weight:500;font-size:28px;color:#fff;letter-spacing:.04em;margin:4px 0 10px}
.rec-specs{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px}
.rec-specs span{font-size:12px;color:rgba(238,246,252,.8)}
.rec-card-l{font-size:13px;color:rgba(238,246,252,.72);line-height:1.6}
/* Drei Vorschlaege statt einem, jeder mit dem Foto seiner Yacht. */
.rec-karten{display:flex;flex-direction:column;gap:12px}
.rec-y{
  display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:center;
  border-radius:var(--r-card);overflow:hidden;background:rgba(255,255,255,.05);
  border:1px solid rgba(238,246,252,.18);transition:border-color .3s,transform .3s var(--ease);
}
.rec-y:hover{border-color:var(--gold-soft);transform:translateY(-2px)}
.rec-y-bild{display:block;aspect-ratio:4/3;overflow:hidden}
.rec-y-bild img{width:100%;height:100%;object-fit:cover;display:block}
.rec-y-b{display:block;padding:12px 16px 12px 0}
.rec-y b{
  display:block;font-family:'Roboto',Arial,Helvetica,sans-serif;font-weight:500;font-size:22px;
  color:#fff;letter-spacing:.03em;
}
.rec-y-eck{display:block;margin-top:4px;font-size:12px;color:rgba(238,246,252,.78)}
.rec-y-preis{display:block;margin-top:6px;font-size:12.5px;color:var(--gold-soft)}
.rec-y-tipp{
  display:inline-block;margin-top:8px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);border:1px solid rgba(143,211,240,.45);border-radius:60px;padding:3px 10px;
}
.rec-cta{margin-bottom:16px}

.jy-chips{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.jy-chip{
  border:1px solid rgba(238,246,252,.3);color:#EAF4FB;border-radius:60px;padding:14px 24px;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .35s,background .35s,transform .3s var(--ease);
}
.jy-chip:hover{border-color:var(--gold-soft);transform:translateY(-2px)}
.jy-chip.on{background:rgba(143,211,240,.18);border-color:var(--gold-soft);color:#fff}
.jy-input,.jy-area{
  width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(238,246,252,.26);
  color:#fff;border-radius:var(--r-ctl);padding:15px 16px;font:inherit;font-size:15px;
}
.jy-input::placeholder,.jy-area::placeholder{color:rgba(234,244,251,.45)}
.jy-input:focus,.jy-area:focus{outline:1.5px solid var(--gold-soft);border-color:transparent}
.jy-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.jy-row .jy-input{flex:1;min-width:240px}
.jy-next{
  display:inline-flex;align-items:center;gap:10px;margin-top:8px;
  border:1px solid rgba(143,211,240,.55);color:#fff;padding:15px 30px;border-radius:var(--r-ctl);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  transition:background .4s,border-color .4s,transform .3s var(--ease);
}
.jy-next:hover{background:rgba(143,211,240,.15);border-color:var(--gold-soft);transform:translateY(-2px)}
.jy-next i{font-style:normal}
/* Schieberegler, einzeln und als Von-bis-Paar. Die goldene Füllung der Spur
   zeigt die Auswahl; die Griffe sind bewusst groß genug für den Daumen. */
.jy-slide{max-width:540px;margin-bottom:30px}
.jy-count{font-family:'Roboto',Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:52px;color:#fff;margin-bottom:20px}
.jy-count small{display:block;font-family:'Roboto';font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin-top:2px}
#jy-bud-lbl{font-size:36px}
.jy-range{
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:2px;
  border-radius:var(--r-ctl);background:rgba(238,246,252,.25);cursor:pointer;margin:12px 0;
}
.jy-range::-webkit-slider-runnable-track{height:2px;background:transparent}
.jy-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-12px;
  border-radius:50%;border:none;background:var(--gold-soft);
  box-shadow:0 4px 14px rgba(3,18,30,.45);
}
.jy-range::-moz-range-track{height:2px;background:transparent}
.jy-range::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;border:none;background:var(--gold-soft);
  box-shadow:0 4px 14px rgba(3,18,30,.45);
}
.jy-dual{position:relative;height:26px;margin:12px 0 4px}
.jy-dual::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(238,246,252,.25);border-radius:2px}
.jy-dual i{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--gold-soft);border-radius:2px}
.jy-dual input{
  position:absolute;left:0;top:0;width:100%;height:26px;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;
}
.jy-dual input::-webkit-slider-runnable-track{height:26px;background:transparent}
.jy-dual input::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;width:26px;height:26px;margin-top:0;
  border-radius:50%;border:none;background:var(--gold-soft);cursor:pointer;
  box-shadow:0 4px 14px rgba(3,18,30,.45);
}
.jy-dual input::-moz-range-track{height:26px;background:transparent}
.jy-dual input::-moz-range-thumb{
  pointer-events:auto;width:26px;height:26px;border-radius:50%;border:none;
  background:var(--gold-soft);cursor:pointer;box-shadow:0 4px 14px rgba(3,18,30,.45);
}
.jy-scale{display:flex;justify-content:space-between;margin-top:8px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(238,246,252,.55)}
.jy-lbl{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(238,246,252,.7);margin:26px 0 12px}
.jy-grid5{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(28px,4vw,56px);align-items:start}
.jy-fld{margin-bottom:14px}
.jy-fld label{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(238,246,252,.7);margin-bottom:7px}
.jy-sum{border-left:1px solid rgba(143,211,240,.4);padding-left:26px}
.jy-sum-h{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:16px}
.jy-sum-row{margin-bottom:14px}
.jy-sum-row b{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(238,246,252,.55);font-weight:500;margin-bottom:2px}
.jy-sum-row span{font-family:'Roboto',Arial,Helvetica,sans-serif;font-size:19px;color:#fff}
.jy-note{margin-top:20px;font-size:11.5px;font-style:normal;color:rgba(238,246,252,.6);max-width:34em}
.jy-seal{
  width:96px;height:96px;border-radius:50%;border:1px solid rgba(143,211,240,.6);
  display:flex;align-items:center;justify-content:center;margin-bottom:30px;
  color:var(--gold-soft);
}
.jy-seal svg{width:38px;height:38px}
/* Frueher schwebte der Hinweis unten links ueber dem Inhalt und verdeckte
   bei 1280x600 und 1024x768 Knoepfe bis hin zu "Anfrage senden". Jetzt ist
   er die Fusszeile des Fensters und nimmt eigenen Platz ein. */
.jy-nancy{
  position:relative;flex:none;display:flex;gap:12px;align-items:center;
  padding:12px 26px 16px;border-top:1px solid rgba(143,211,240,.16);
  color:rgba(238,246,252,.85);font-size:12px;line-height:1.5;z-index:4;pointer-events:none;
}
.jy-nancy img{width:46px;height:46px;border-radius:50%;border:1px solid rgba(143,211,240,.5)}
.jy-nancy b{color:#fff;font-weight:500}
:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
@media (max-width:900px){
  .jy-cards{grid-template-columns:repeat(2,1fr)}
  .jy-opts{grid-template-columns:1fr}
  .jy-opt{padding:16px 18px}
  .jy-opt b{font-size:20px}
  .rec{grid-template-columns:1fr}
  .rec-card{order:-1}
  /* Am Handy: erst Einordnung und Ueberschrift, dann die drei Yachten,
     dann Begruendung, Preisrahmen und Anfrage. Vorher standen die Karten
     ueber der Ueberschrift. */
  .rec{display:flex;flex-direction:column;gap:0}
  .rec-main{display:contents}
  .rec-main > *{order:2}
  .rec-main > .jy-kick,.rec-main > .rec-h,.rec-main > .rec-sub{order:0}
  .rec-karten{order:1;margin-bottom:26px}
  .rec-card figure{aspect-ratio:16/9}
  .jy-grid5{grid-template-columns:1fr}
  .jy-sum{border-left:0;border-top:1px solid rgba(143,211,240,.4);padding:20px 0 0}
  .jy-nancy{display:none}
  #journey{padding:0}
  .jy-win{width:100%;height:100%;max-height:none;border-radius:0;border:0}
  .jy-stage{padding:80px 6vw 60px}
}

/* ---------- Revier- und Yacht-Panel ---------- */
#detail{
  position:fixed;inset:0;z-index:160;visibility:hidden;opacity:0;
  background:rgba(224,239,249,.32);
  backdrop-filter:blur(14px) brightness(1.16) saturate(1.05);
  -webkit-backdrop-filter:blur(14px) brightness(1.16) saturate(1.05);
  overflow-y:auto;overscroll-behavior:contain;padding:clamp(16px,4vh,60px) clamp(14px,4vw,40px);
}
#detail.on{visibility:visible}
.dt-close{
  position:fixed;top:20px;right:24px;z-index:5;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(7,55,85,.35);color:var(--navy);font-size:21px;background:rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .35s,background .35s;
}
.dt-close:hover{border-color:var(--gold-deep);background:rgba(255,255,255,.8)}
.dt-inner{
  width:min(1060px,100%);margin:0 auto;background:var(--paper);border-radius:var(--r-panel);overflow:hidden;
  display:grid;grid-template-columns:1.05fr 1fr;box-shadow:0 50px 120px rgba(2,14,26,.5);
}
.dt-fig{margin:0;position:relative;min-height:340px}
.dt-fig img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.dt-fig figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:30px 22px 16px;
  background:linear-gradient(180deg,rgba(5,29,47,0),rgba(5,29,47,.86));
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#fff;
}
.dt-body{padding:clamp(28px,3.4vw,44px)}
.dt-kick{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--azure-deep);margin-bottom:12px}
.dt-h{font-family:'Roboto',Arial,Helvetica,sans-serif;font-size:clamp(30px,3.4vw,44px);color:var(--navy);margin-bottom:14px}
.dt-lead{font-size:15px;color:var(--soft);line-height:1.7;margin-bottom:22px}
.dt-specs{display:flex;flex-wrap:wrap;gap:22px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dt-specs b{display:block;font-family:'Roboto',Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:22px;color:var(--navy);line-height:1.1}
.dt-specs span{display:block;margin-top:2px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--soft)}
.dt-block{margin-top:22px}
.dt-lbl{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px}
.dt-routes{list-style:none;display:flex;flex-direction:column;gap:7px}
.dt-routes li{font-size:14px;color:var(--navy);padding-left:16px;position:relative}
.dt-routes li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--gold)}
.dt-meta{margin-top:20px;font-size:13px;color:var(--soft);line-height:1.65}
.dt-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
/* stiller Ausweg zum Finder, unter den Hauptaktionen der Yacht-Ansicht */
.dt-alt{margin-top:14px;font-size:13px;color:var(--soft)}
.dt-alt-link{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:var(--navy);
  text-decoration:underline;text-underline-offset:3px;transition:color .3s}
.dt-alt-link:hover{color:var(--azure)}

@media (max-width:880px){
  .dt-inner{grid-template-columns:1fr}
  .dt-fig{min-height:0;aspect-ratio:16/10}
}

/* ---------- Chat ---------- */
/* unter der Yacht-Suche (150), damit der Knopf sie am Handy nicht verdeckt */
#chat{position:fixed;right:22px;bottom:22px;z-index:140}
#chat-fab{
  width:58px;height:58px;border-radius:50%;position:relative;margin-left:auto;
  background:var(--navy);box-shadow:0 14px 34px rgba(4,24,40,.4);
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s var(--ease),background .35s;
}
#chat-fab:hover{transform:translateY(-2px);background:var(--plate-2)}
.cf-bubble{
  width:24px;height:24px;background:#fff;
  -webkit-mask:var(--b) center/contain no-repeat;mask:var(--b) center/contain no-repeat;
  --b:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4v4l5-4h7a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/></svg>');
  transition:opacity .25s;
}
#chat-fab.x .cf-bubble{opacity:0}
#chat-fab::after{
  content:"\00d7";position:absolute;color:#fff;font-size:26px;line-height:1;opacity:0;transition:opacity .25s;
}
#chat-fab.x::after{opacity:1}
.cf-dot{
  position:absolute;top:12px;right:13px;width:9px;height:9px;border-radius:50%;
  background:#25D366;border:2px solid var(--navy);
}
/* Ungelesen-Zähler: erscheint, wenn der Gast den selbst geöffneten Chat
   geschlossen hat, ohne zu schreiben. Verschwindet beim nächsten Öffnen. */
.cf-unread{
  position:absolute;top:-5px;right:-5px;min-width:21px;height:21px;border-radius:11px;
  background:var(--gold);color:#fff;font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
  box-shadow:0 4px 12px rgba(3,18,30,.4);
  opacity:0;transform:scale(.4);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
#chat-fab.unread .cf-unread{opacity:1;transform:scale(1);animation:cfPulse 2.6s ease-in-out infinite}
@keyframes cfPulse{
  0%,100%{box-shadow:0 4px 12px rgba(3,18,30,.4),0 0 0 0 rgba(0,157,218,.45)}
  50%{box-shadow:0 4px 12px rgba(3,18,30,.4),0 0 0 8px rgba(0,157,218,0)}
}
#chat-panel{
  position:absolute;right:0;bottom:72px;width:min(348px,calc(100vw - 44px));
  background:var(--paper);border-radius:var(--r-panel);overflow:hidden;
  box-shadow:0 30px 80px rgba(2,14,26,.42);border:1px solid var(--line);
  opacity:0;transform:translateY(12px) scale(.98);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
#chat-panel.on{opacity:1;transform:none;pointer-events:auto}
.ch-head{display:flex;align-items:center;gap:11px;padding:14px 16px;background:var(--navy);color:#fff}
.ch-head img{width:38px;height:38px;border-radius:50%;flex:none;border:1px solid rgba(143,211,240,.5)}
.ch-head b{display:block;font-size:14px;font-weight:500}
.ch-head span{display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(234,244,251,.8);margin-top:1px}
.ch-on{width:7px;height:7px;border-radius:50%;background:#25D366;display:inline-block}
.ch-x{margin-left:auto;color:#fff;font-size:22px;line-height:1;opacity:.8}
.ch-x:hover{opacity:1}
.ch-log{padding:16px;display:flex;flex-direction:column;gap:9px;max-height:290px;overflow-y:auto;background:var(--mist)}
.ch-msg{max-width:84%;padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.55}
.ch-msg.them{background:#fff;border:1px solid var(--line);color:var(--navy);border-bottom-left-radius:3px}
.ch-msg.me{background:var(--navy);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.ch-typing{display:flex;gap:4px;align-items:center;padding:13px}
.ch-typing i{width:6px;height:6px;border-radius:50%;background:var(--soft);opacity:.5;animation:chdot 1.1s infinite}
.ch-typing i:nth-child(2){animation-delay:.16s}
.ch-typing i:nth-child(3){animation-delay:.32s}
@keyframes chdot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ch-wa{
  align-self:flex-start;font-size:12px;letter-spacing:.06em;color:#0E8F45;
  border:1px solid rgba(37,211,102,.5);background:rgba(37,211,102,.1);
  padding:8px 12px;border-radius:60px;
}
.ch-wa:hover{background:rgba(37,211,102,.18)}
.ch-quick{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px 0}
.ch-quick button{
  font-size:11.5px;color:var(--navy);border:1px solid var(--line);border-radius:60px;padding:7px 12px;
  transition:border-color .3s,background .3s;
}
.ch-quick button:hover{border-color:var(--azure);background:var(--sky)}
.ch-form{display:flex;gap:8px;padding:12px 16px}
.ch-form input{
  flex:1;border:1px solid var(--line);border-radius:60px;padding:10px 14px;
  font:inherit;font-size:13.5px;color:var(--ink);
}
.ch-form input:focus{outline:1.5px solid var(--azure)}
.ch-form button{
  width:38px;height:38px;border-radius:50%;flex:none;background:var(--gold);color:#fff;
  font-size:16px;transition:background .3s;
}
.ch-form button:hover{background:#0A8FC7}
.ch-note{padding:0 16px 14px;font-size:10.5px;color:var(--soft);line-height:1.5;font-style:normal}
/* Einwilligung vor dem Laden von Tidio */
.ch-einw{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.ch-einw p{font-size:11.5px;line-height:1.55;color:var(--soft);margin:0}
.ch-einw p a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.ch-einw .ch-start{justify-content:center;width:100%}
.ch-einw .ch-wa{align-self:center;text-align:center}
#chat[hidden]{display:none !important}
@media (max-width:600px){
  #chat{right:14px;bottom:14px}
  #chat-panel{bottom:68px}
}


/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(26px)}
/* .ds-info bleibt hier bewusst draussen: am Rechner erscheint sie beim
   Ueberfahren, sonst ueberlagern sich in den schmalen Kacheln Name und Text. */
body.static .rv,body.static .hero-cta,body.static .hero-cue,body.static .fd-q .w,body.static .pil-copy .pc{opacity:1;transform:none}
/* the cue is centred by its own transform, so it must keep it */
body.static .hero-cue{transform:translateX(-50%)}
body.static .hairline{transform:none}
body.static #splash{display:none}
body.static .pil-copy .ch{opacity:1}

/* ---------- subpage head ---------- */
.sub-head{
  position:relative;padding:clamp(150px,24vh,220px) 0 clamp(60px,9vh,90px);
  background:var(--plate);overflow:hidden;color:#fff;
}
.sub-head .bg{position:absolute;inset:0;opacity:.42}
.sub-head .bg img{width:100%;height:100%;object-fit:cover}
.sub-head::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,42,66,.5),rgba(6,42,66,.88))}
.sub-head .wrap{position:relative;z-index:2}
.sub-head h1{color:#fff;font-size:clamp(36px,5vw,64px);max-width:14em}
.sub-head .kick{color:var(--gold-soft)}
.sub-head p.lead{margin-top:18px;max-width:44em;color:rgba(240,247,252,.97);font-size:16.5px}

/* ---------- fleet page ---------- */
.filters{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--line);margin-bottom:clamp(36px,5vh,50px);
}
.f-chip{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:60px;padding:10px 20px;color:var(--soft);
  transition:all .35s var(--ease);
}
.f-chip:hover{border-color:var(--azure);color:var(--azure-deep)}
.f-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.f-note{margin-left:auto;font-size:12px;color:var(--soft);font-style:normal}
.yacht-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-bottom:clamp(70px,10vh,110px)}
.y-card{
  border-radius:var(--r-card);overflow:hidden;background:#fff;box-shadow:var(--sh-soft);
  cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.y-card:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.y-card figure{margin:0;aspect-ratio:16/10;overflow:hidden;position:relative}
.y-card figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.y-card:hover figure img{transform:scale(1.06)}
.y-type{
  position:absolute;top:14px;left:14px;z-index:2;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(255,255,255,.92);color:var(--navy);border-radius:var(--r-ctl);padding:6px 10px;
}
.y-body{padding:20px 22px 24px}
.y-name{font-size:26px}
.y-specs{display:flex;gap:16px;margin:10px 0 8px;font-size:12.5px;color:var(--soft);flex-wrap:wrap}
.y-yard{font-size:12px;color:var(--soft);margin-bottom:6px}
.y-price{font-size:13px;color:var(--navy)}
.y-price b{font-weight:500}

/* ---------- destinations page ---------- */
.dest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-bottom:clamp(70px,10vh,110px)}
.d-card{border-radius:var(--r-card);overflow:hidden;background:#fff;box-shadow:var(--sh-soft);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.d-card:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.d-card figure{margin:0;aspect-ratio:16/11;overflow:hidden}
.d-card figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.d-card:hover figure img{transform:scale(1.06)}
.d-body{padding:20px 22px 26px}
.d-body h2,.d-body h3{font-size:26px}
.d-season{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);display:block;margin:6px 0 8px}
.d-body p{font-size:14px;color:var(--soft)}

/* ---------- contact page ---------- */
.ct-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,5vw,70px);padding:clamp(50px,8vh,80px) 0}
.ct-card{background:var(--mist);border-radius:var(--r-card);padding:clamp(26px,3.5vw,40px)}
.ct-card .line-btn{background:#fff}
.ct-addr{margin-top:26px;font-size:14.5px;color:var(--soft);line-height:1.9}
.ct-addr b{color:var(--navy);font-weight:500}
.ct-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(26px,3.5vw,40px)}
.faq{background:var(--paper);padding:0 0 clamp(70px,10vh,110px)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 4px;font-size:17px;font-weight:400;color:var(--navy);
}
.faq-q i{font-style:normal;color:var(--azure);font-size:22px;transition:transform .4s var(--ease)}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-a p{padding:0 4px 22px;color:var(--soft);font-size:15px;max-width:44em}
/* Laengere Antworten (FAQ der Kontaktseite, 11.10.2026): mehrere Absaetze,
   Listen, eine Preisformel und eine Steuertabelle. Abstaende als padding
   statt margin, weil das Akkordeon die Hoehe ueber scrollHeight misst. */
.faq-a p:not(:last-child){padding-bottom:12px}
.faq-a strong{font-weight:500;color:var(--navy)}
.faq-a ul{list-style:none;padding:0 4px 14px;max-width:44em}
.faq-a ul:last-child{padding-bottom:22px}
.faq-a li{position:relative;padding-left:20px;color:var(--soft);font-size:15px}
.faq-a li + li{margin-top:9px}
.faq-a li::before{content:"";position:absolute;left:4px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--azure)}
.faq-a p.faq-formel{
  width:fit-content;max-width:calc(100% - 8px);margin:2px 4px 14px;padding:11px 16px;
  background:var(--mist);border-radius:var(--r-ctl);text-wrap:balance;
}
.faq-tab{
  border-collapse:collapse;width:calc(100% - 8px);max-width:26em;margin:2px 4px 16px;
  font-size:15px;color:var(--soft);font-variant-numeric:tabular-nums;
}
.faq-tab th{
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azure-deep);text-align:left;padding:0 0 8px;border-bottom:1px solid var(--line);
}
.faq-tab td{padding:8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.faq-tab th:last-child,.faq-tab td:last-child{text-align:right;padding-left:18px;white-space:nowrap}

/* ---------- legal ---------- */
.legal{padding:clamp(50px,8vh,80px) 0 clamp(80px,11vh,120px)}
.legal h2{font-size:24px;margin:34px 0 10px}
.legal p,.legal li{font-size:15px;color:var(--soft);max-width:44em}
.legal .note{background:var(--sky);border-radius:var(--r-card);padding:18px 22px;font-size:13.5px;color:#08587B;margin-bottom:30px}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .hd-nav{display:none}
  #burger{display:block}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  #pillars{height:auto}
  .pil-stick{position:static;height:auto;background:var(--plate)}
  .pil-media{position:relative;height:240px}
  .pil-media figure{opacity:0}
  .pil-media figure:first-child{opacity:1}
  .pil-body{grid-template-columns:1fr;padding:26px 22px 60px;gap:16px}
  .pil-copy{display:block}
  .pil-copy .pc{position:static;opacity:1;margin-top:18px}
  .pil-copy .ch{opacity:1}
  .pil-t{color:#fff;font-size:24px}
  .pil-copy .ch{opacity:1}
  .pil-progress{display:none}
  .pr-grid,.fd-grid,.fd-grid2,.nw-grid,.ct-grid{grid-template-columns:1fr}
  .fl-row,.fl-row.flip{grid-template-columns:1fr}
  .fl-row.flip .fl-frame{order:0}
  .ds-strip{flex-direction:column;height:auto}
  .ds-panel{height:150px;flex:none !important}
  .ds-panel .ds-info{opacity:1;transform:none}
  .ds-name-v{display:none}
  .ac-grid,.yacht-grid,.dest-grid{grid-template-columns:1fr}
  .tr-nums{grid-template-columns:1fr 1fr}
  .st-frame{grid-template-columns:1fr;gap:34px}
  .st-div{display:none}
  .mn-in{grid-template-columns:1fr;gap:40px}
  .hd-lang:not(.mn-lang){display:none}   /* im Menue bleibt er sichtbar */
  .fld-row{grid-template-columns:1fr}
  .nw-form{flex-direction:column}
  .ft-low{flex-direction:column}
}
@media (max-width:600px){
  .hd-cta{padding:10px 14px;font-size:10.5px}
  .hd-logo img{height:44px}
  .yacht-grid,.dest-grid{grid-template-columns:1fr}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .mq-track{animation:none}
  .cue-chain,.cue-hook{animation:none}
  .cue-hook{opacity:1}
}

/* ---------- Yacht-Seite (aus dem Charterbuch erzeugt) ---------- */
/* KEIN overflow:hidden hier: das wuerde position:sticky beim Kind aufheben.
   Der Beschnitt sitzt in .yd-hero-fix. */
.yd-hero{position:relative;background:var(--navy)}
.yd-hero-b{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(28px,6vh,64px) 0 clamp(22px,4vh,44px);
  background:linear-gradient(180deg,rgba(4,24,38,0) 0%,rgba(4,24,38,.55) 38%,rgba(4,24,38,.9) 78%,rgba(4,24,38,.96) 100%);
  color:#fff;
}
.yd-hero-b .kick{color:#CFEFFC;text-shadow:0 1px 8px rgba(4,24,38,.9)}
.yd-hero-b h1{text-shadow:0 2px 20px rgba(4,24,38,.55)}
.yd-hero-b h1{font-size:clamp(38px,6.5vw,78px);color:#fff;line-height:1;margin:6px 0 0}
.yd-vor{margin-top:10px;font-size:13px;color:rgba(238,246,252,.7);font-style:normal}

.yd-fakt{
  display:grid;grid-template-columns:1.5fr .9fr .9fr;gap:clamp(24px,3vw,48px);
  align-items:center;padding:clamp(30px,5vh,56px) 0;border-bottom:1px solid var(--line);
}
.yd-eck{display:flex;gap:clamp(20px,3vw,42px);flex-wrap:wrap}
.yd-eck b{display:block;font-family:'Roboto',Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:32px;font-weight:600;color:var(--navy);line-height:1}
.yd-eck span{display:block;margin-top:4px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.yd-preis b{display:block;font-family:'Roboto',Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:27px;color:var(--navy)}
.yd-preis span{display:block;font-size:12px;color:var(--soft)}
.yd-preis small{display:block;margin-top:6px;font-size:11px;color:var(--soft);font-style:normal}
.yd-cta{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.yd-cta .btn{justify-content:center}

.yd-txt{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(30px,4vw,64px);padding:clamp(38px,6vh,72px) 0}
.yd-p{color:var(--soft);font-size:16px;line-height:1.75;max-width:38em;margin-bottom:18px}
.yd-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-top:26px}
.yd-dl>div{background:var(--paper);padding:14px 16px;box-shadow:0 0 0 1px var(--line)}
.yd-dl dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.yd-dl dd{margin-top:3px;font-size:15px;color:var(--navy)}
.yd-tags{margin-bottom:26px}
.yd-tags-t{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:12px}
.yd-tags span{
  display:inline-block;margin:0 6px 6px 0;padding:6px 12px;border:1px solid var(--line);
  border-radius:var(--r-ctl);font-size:12.5px;color:var(--navy);background:var(--paper);
}
.yd-gal{padding-bottom:clamp(38px,6vh,72px)}
.yd-gal-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:22px}
.yd-gal-g figure{border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/10;box-shadow:var(--sh-soft)}
.yd-gal-g img{width:100%;height:100%;object-fit:cover}
.yd-crew{padding-bottom:clamp(38px,6vh,72px)}
.yd-crew-l{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-top:22px}
.yd-crew-l li{background:var(--paper);padding:15px 18px;box-shadow:0 0 0 1px var(--line)}
.yd-crew-l b{display:block;font-family:'Roboto',Arial,Helvetica,sans-serif;font-size:19px;color:var(--navy);font-weight:500}
.yd-crew-l span{display:block;margin-top:2px;font-size:11.5px;color:var(--soft)}
.yd-schluss{padding:clamp(38px,6vh,72px) 0 clamp(52px,8vh,96px);border-top:1px solid var(--line)}
.yd-schluss h2{margin-bottom:14px}
@media (max-width:900px){
  .yd-fakt{grid-template-columns:1fr;gap:26px}
  .yd-txt{grid-template-columns:1fr}
  .yd-hero{height:min(58vh,460px)}
}

/* ---------- Bildlupe ---------- */
#lb{
  position:fixed;inset:0;z-index:170;visibility:hidden;opacity:0;
  background:rgba(4,22,38,.55);
  backdrop-filter:blur(18px) saturate(1.05);-webkit-backdrop-filter:blur(18px) saturate(1.05);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,4vh,56px) clamp(14px,7vw,96px);
  touch-action:pan-y;
}
#lb.on{visibility:visible}
.lb-buehne{
  max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;
  margin:0;pointer-events:none;
}
.lb-buehne img{
  max-width:100%;max-height:calc(100svh - clamp(28px,8vh,112px));
  width:auto;height:auto;object-fit:contain;
  border-radius:var(--r-card);box-shadow:0 40px 110px rgba(2,14,26,.6);
  pointer-events:auto;
}
.lb-x,.lb-nav{
  position:fixed;width:52px;height:52px;border-radius:50%;z-index:2;
  border:1px solid rgba(238,246,252,.35);background:rgba(4,22,38,.5);color:#fff;
  display:flex;align-items:center;justify-content:center;line-height:1;
  backdrop-filter:blur(6px);
  transition:background .3s,border-color .3s,transform .3s var(--ease);
}
.lb-x{top:22px;right:24px;font-size:24px}
.lb-nav{top:50%;margin-top:-26px;font-size:34px;padding-bottom:4px}
.lb-vor{left:clamp(10px,2.5vw,34px)}
.lb-zur{right:clamp(10px,2.5vw,34px)}
.lb-x:hover,.lb-nav:hover{background:rgba(143,211,240,.22);border-color:var(--gold-soft);transform:scale(1.06)}
.lb-zahl{
  position:fixed;left:50%;transform:translateX(-50%);bottom:20px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(238,246,252,.75);
}
@media (max-width:700px){
  .lb-nav{display:none}          /* am Telefon wird gewischt */
  .lb-x{top:14px;right:14px;width:44px;height:44px}
  #lb{padding:56px 12px 46px}
}
.yd-hero img{cursor:zoom-in}
.yd-mehr{
  margin-top:14px;display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);
  text-shadow:0 1px 8px rgba(4,24,38,.9);
}
.yd-mehr::before{content:"";width:26px;height:1px;background:var(--gold-soft);display:inline-block}

/* ---------- Heldenbild bleibt stehen, der Inhalt schiebt sich darueber ----------
   Dasselbe Muster wie die fixe See-Ebene der Startseite: hohe Sektion,
   klebende innere Ebene. Die Yacht bewegt sich beim Scrollen nicht, die
   Schrift zieht langsam mit, und der helle Inhalt legt sich als oberste
   Schicht darueber. Deshalb MUSS .yd-inhalt einen deckenden Grund haben. */
/* Das Bild liegt fest hinter der Seite und fuellt bewusst NICHT den ganzen
   Schirm: Beim ersten Blick sollen Bild, Titel und der helle Block mit den
   Eckdaten zusammen sichtbar sein. .yd-hero ist nur der Platzhalter dafuer. */
.yd-hero{height:var(--yd-h);padding:0}
.yd-hero-fix{
  position:fixed;top:0;left:0;width:100%;height:var(--yd-h);
  z-index:0;overflow:hidden;display:block;
}
.yd-hero-fix>img{width:100%;height:100%;object-fit:cover}
/* deckender Grund ist Pflicht, sonst schimmert das feste Bild durch */
.yd-inhalt{position:relative;z-index:2;background:var(--paper)}
:root{--yd-h:72svh}
@media (max-width:900px){ :root{--yd-h:58svh} }
/* Kopfzeile faehrt beim Abwaertsscrollen nach oben aus dem Bild */
#hd{transition:background .55s var(--ease),box-shadow .55s,border-color .55s,backdrop-filter .55s,transform .45s var(--ease)}
#hd.weg{transform:translateY(-100%)}
#menu.on ~ #hd, body:has(#menu.on) #hd{transform:none}
.yd-gal-n{margin-top:6px;font-size:12.5px;color:var(--soft);font-style:normal}

/* ---------- Verfuegbarkeitsanfrage zu einer Yacht ---------- */
#dlg-yacht h3{margin:6px 0 2px}
.yq-eck{font-size:12.5px;color:var(--soft);letter-spacing:.02em;margin-bottom:22px}
.yq-frage{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);
  padding-top:18px;border-top:1px solid var(--line);margin-bottom:4px;
}
.yq-in{
  border:1px solid var(--line);border-radius:var(--r-ctl);background:#fff;
  padding:12px 14px;font:inherit;font-size:14.5px;color:var(--ink);width:100%;
}
.yq-in:focus{outline:1.5px solid var(--azure);border-color:transparent}
.yq-hinweis{margin-top:12px;font-size:12.5px;color:#B4472F}
@media (max-width:560px){ #dlg-yacht .fld-row{grid-template-columns:1fr} }

/* ---------- Abschlussband statt der zwei Tueren ---------- */

/* Das Logo fuehrt zur Startseite. Beim Darueberfahren hebt es sich leicht
   und die Sonne bekommt einen warmen Schein, damit erkennbar ist, dass es
   ein Weg ist und keine Verzierung. */
.hd-logo{transition:width .55s var(--ease),height .55s var(--ease),transform .4s var(--ease)}
.hd-logo:hover{transform:translateY(-2px) scale(1.035)}
.hd-logo:hover .hd-logo-w{filter:drop-shadow(0 1px 10px rgba(4,24,38,.45)) drop-shadow(0 0 12px rgba(143,211,240,.7))}
#hd.on .hd-logo:hover img,body[data-kopf="fest"] #hd .hd-logo:hover img{filter:drop-shadow(0 2px 10px rgba(0,157,218,.45))}
.hd-logo img{transition:opacity .45s var(--ease),filter .4s var(--ease)}
.hd-logo-w{transition:opacity .45s var(--ease),filter .4s var(--ease)}

/* Heldenbild ohne harten Beschnitt.
   Die Fotos sind 16:9, der Heldenbereich ist deutlich breiter. Ein
   formatfuellender Zuschnitt wuerde bei hohen Motiven wie einem Schoner
   die Masten abschneiden. Deshalb steht das ganze Bild scharf und
   ungeschnitten darin, dahinter dasselbe Bild unscharf als Fuellung. */
.yd-hero-fix>.yd-hero-grund{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Nur so viel Unschaerfe, dass die Raender neben dem eingepassten Bild
     ruhig wirken. Aufgehellt statt abgedunkelt: gemessen war die unscharfe
     Fuellung nur halb so hell wie das scharfe Bild darueber, was wie ein
     dunkler Rahmen wirkte (19.09.2026). Mit 1.35 liegen beide nah
     beieinander. Die weisse Schrift steht ueber dem Verlauf in
     .yd-hero-b, nicht ueber dieser Fuellung. */
  filter:blur(20px) saturate(1.06) brightness(1.35);transform:scale(1.08);
}
.yd-hero-fix>.yd-hero-bild{
  position:relative;width:100%;height:100%;object-fit:contain;object-position:center;
}

/* ---------- Flottensuche ---------- */
.fl-such{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:clamp(20px,2.6vw,30px);margin-bottom:clamp(24px,3vh,38px);box-shadow:var(--sh-soft);
}
.fl-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(16px,2vw,28px)}
.fl-regler{margin-top:clamp(18px,2.4vh,26px);padding-top:clamp(18px,2.4vh,26px);border-top:1px solid var(--line)}
.fl-feld label{
  display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);margin-bottom:8px;
}
.fl-feld label b{color:var(--navy);font-weight:500;letter-spacing:.02em;text-transform:none;font-size:13px}
.fl-sel{
  width:100%;border:1px solid var(--line);border-radius:var(--r-ctl);background:#fff;
  padding:11px 34px 11px 13px;font:inherit;font-size:14.5px;color:var(--ink);
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6270' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;background-size:16px;
}
.fl-sel:focus{outline:1.5px solid var(--azure);border-color:transparent}
/* helle Fassung der Regler aus dem Finder */
.fl-such .jy-range{background:rgba(7,55,85,.16)}
.fl-such .jy-dual::before{background:rgba(7,55,85,.16)}
.fl-such .jy-dual i{background:var(--gold)}
.fl-such .jy-scale{color:var(--soft)}
.fl-such .jy-range::-webkit-slider-thumb,.fl-such .jy-dual input::-webkit-slider-thumb{
  background:var(--gold);box-shadow:0 3px 10px rgba(0,70,110,.3)}
.fl-such .jy-range::-moz-range-thumb,.fl-such .jy-dual input::-moz-range-thumb{
  background:var(--gold);box-shadow:0 3px 10px rgba(0,70,110,.3)}
.fl-fuss{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(16px,2vh,24px);padding-top:16px;border-top:1px solid var(--line);
}
.fl-zahl{font-family:'Roboto',Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:20px;color:var(--navy);margin:0}
.fl-reset{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
  border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .3s,border-color .3s;
}
.fl-reset:hover{color:var(--azure-deep);border-color:var(--azure)}
.fl-mehr-wrap{display:flex;justify-content:center;margin-top:clamp(26px,4vh,44px)}
.fl-leer{grid-column:1/-1;text-align:center;color:var(--soft);padding:clamp(40px,8vh,80px) 0;font-size:16px}
.fl-quelle{margin-top:clamp(26px,4vh,42px);font-size:12px;color:var(--soft);font-style:normal;max-width:52em}
a.y-card{display:block;color:inherit}
@media (max-width:700px){ .fl-such{padding:18px} }

/* ---------- Vorschau-Popup einer Yacht ---------- */
#yv{
  position:fixed;inset:0;z-index:165;visibility:hidden;opacity:0;
  background:rgba(224,239,249,.32);
  backdrop-filter:blur(14px) brightness(1.16) saturate(1.05);
  -webkit-backdrop-filter:blur(14px) brightness(1.16) saturate(1.05);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vh,44px) clamp(12px,3vw,44px);
}
#yv.on{visibility:visible}
.yv-fenster{
  position:relative;width:min(1080px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;
  background:var(--paper);border-radius:var(--r-panel);
  box-shadow:0 46px 130px rgba(3,18,30,.45);
}
.yv-x{
  position:absolute;top:16px;right:18px;z-index:3;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(7,55,85,.28);background:rgba(255,255,255,.85);color:var(--navy);
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);transition:background .3s,border-color .3s;
}
.yv-x:hover{background:#fff;border-color:var(--gold)}
.yv-buehne{position:relative;background:var(--navy);aspect-ratio:16/9;overflow:hidden}
.yv-gross{width:100%;height:100%;object-fit:cover;display:block}
.yv-mini{
  position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;
  padding:clamp(12px,2vw,20px);
  background:linear-gradient(180deg,rgba(4,24,38,0) 0%,rgba(4,24,38,.62) 62%,rgba(4,24,38,.8) 100%);
}
.yv-t{
  position:relative;flex:1 1 0;max-width:118px;aspect-ratio:16/10;overflow:hidden;
  border-radius:var(--r-ctl);border:1.5px solid rgba(255,255,255,.35);
  opacity:.55;filter:saturate(.7);cursor:pointer;
  transition:opacity .35s var(--ease),border-color .35s,filter .35s,transform .35s var(--ease);
}
.yv-t img{width:100%;height:100%;object-fit:cover;display:block}
.yv-t:hover{opacity:.85;transform:translateY(-2px)}
.yv-t.on{opacity:1;filter:none;border-color:var(--gold);box-shadow:0 6px 20px rgba(3,18,30,.45)}
.yv-mehr{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(4,24,38,.55);color:#fff;font-size:13px;letter-spacing:.06em;
}
/* Blaetterpfeile auf der Buehne. Die Flaeche reicht bis an den Rand,
   damit man sie auch mit dem Daumen trifft; sichtbar ist nur der Winkel. */
.yv-pfeil{
  position:absolute;top:0;bottom:64px;width:clamp(56px,9%,88px);
  display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;cursor:pointer;z-index:2;
  overflow:hidden;
}
.yv-zurueck{left:0;justify-content:flex-start;padding-left:14px}
.yv-vor{right:0;justify-content:flex-end;padding-right:14px}
.yv-pfeil i{
  display:block;width:17px;height:17px;
  border-top:1.6px solid #fff;border-right:1.6px solid #fff;
  opacity:.72;filter:drop-shadow(0 1px 6px rgba(3,18,30,.6));
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  position:relative;z-index:1;
}
.yv-zurueck i{transform:rotate(-135deg)}
.yv-vor i{transform:rotate(45deg)}
/* Der Schatten liegt auf einer eigenen Ebene und wird ueber die Deckkraft
   eingeblendet. Ein Verlauf laesst sich als background nicht weich
   ueberblenden, er wuerde hart umspringen. */
.yv-pfeil::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:0;transition:opacity .55s var(--ease);
}
.yv-zurueck::before{background:linear-gradient(90deg,rgba(4,24,38,.38),rgba(4,24,38,0))}
.yv-vor::before{background:linear-gradient(270deg,rgba(4,24,38,.38),rgba(4,24,38,0))}
.yv-pfeil:hover::before,.yv-pfeil:focus-visible::before{opacity:1}
.yv-zurueck:hover i{opacity:1;transform:rotate(-135deg) translate(3px,-3px)}
.yv-vor:hover i{opacity:1;transform:rotate(45deg) translate(3px,-3px)}
.yv-pfeil:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.yv-zaehler{
  position:absolute;top:14px;left:16px;z-index:2;
  padding:5px 11px;border-radius:999px;
  background:rgba(4,24,38,.5);backdrop-filter:blur(6px);
  color:rgba(255,255,255,.92);font-size:11px;letter-spacing:.08em;
}
@media (max-width:600px){
  .yv-pfeil{bottom:52px}
  .yv-zaehler{font-size:10px;padding:4px 9px}
}
.yv-ohne{padding:64px 24px;text-align:center;color:rgba(238,246,252,.8);font-size:14px}
.yv-text{padding:clamp(22px,3vw,34px)}
.yv-kick{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--azure-deep);margin-bottom:8px}
.yv-h{font-family:'Roboto',Arial,Helvetica,sans-serif;font-size:clamp(28px,3.4vw,42px);color:var(--navy);margin:0 0 18px}
.yv-eck{display:flex;gap:clamp(18px,3vw,40px);flex-wrap:wrap;margin-bottom:16px}
.yv-eck b{display:block;font-family:'Roboto',Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:26px;font-weight:600;color:var(--navy);line-height:1}
.yv-eck span{display:block;margin-top:3px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.yv-werft{font-size:13.5px;color:var(--soft);margin-bottom:6px}
.yv-preis{font-size:15px;color:var(--navy);margin-bottom:22px}
.yv-preis b{font-family:'Roboto',Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:22px}
.yv-cta{display:flex;gap:12px;flex-wrap:wrap}
/* der Verweis in der Karte ist fuer Google da, sichtbar ist die ganze Karte */
.y-verweis{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.y-card{position:relative}
@media (max-width:760px){
  .yv-buehne{aspect-ratio:4/3}
  .yv-t{max-width:none}
}

/* ---------- Revierseiten ----------
   Eine Vorlage fuer alle Reviere (worker/revierseite.js). Der Aufbau folgt
   der Yacht-Seite: Bild im Fenster, darunter die Zahlen, dann Text, dann
   die Flotte des Reviers mit derselben Filterleiste wie /fleet. */
.rev-hero{position:relative;height:clamp(320px,52vh,540px)}
.rev-hero-fix{position:absolute;inset:0;overflow:hidden;border-radius:0}
.rev-hero-bild{width:100%;height:100%;object-fit:cover;display:block}
.rev-hero-b{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(28px,6vh,64px) 0;
  /* Die Revierbilder sind hell und kleinteilig. Der Verlauf muss deshalb
     kraeftiger sein als bei den Yachtbildern, sonst verschwindet der
     Kicker in Hausdaechern und Wellen. */
  background:linear-gradient(180deg,rgba(4,24,38,0),rgba(4,24,38,.42) 38%,rgba(4,24,38,.88));
  color:#fff;
}
.rev-hero-b h1{
  font-family:'Roboto',Arial,Helvetica,sans-serif;font-weight:500;color:#fff;
  font-size:clamp(30px,4.6vw,60px);line-height:1.07;max-width:18em;margin:6px 0 0;
}
.rev-inhalt{position:relative;z-index:1;background:var(--paper)}
.rev-kopf{padding:clamp(34px,5vh,58px) 0 0}
.rev-kopf .lead{max-width:52em}
.rev-eck{
  display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,54px);
  margin-top:clamp(20px,3vh,30px);padding-bottom:clamp(24px,3.5vh,36px);
  border-bottom:1px solid var(--line);
}
.rev-eck b{
  display:block;font-family:'Roboto',Arial,Helvetica,sans-serif;font-size:clamp(20px,2.1vw,27px);
  font-weight:600;color:var(--navy);line-height:1.15;max-width:14em;
}
.rev-eck span{display:block;margin-top:4px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.rev-txt{
  display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(28px,5vw,70px);
  padding:clamp(34px,5vh,56px) 0;align-items:start;
}
.rev-txt h2{font-size:clamp(24px,2.7vw,36px);margin-bottom:14px}
.rev-routen{
  background:var(--mist);border-radius:var(--r-card);padding:clamp(20px,2.6vw,30px);
}
.rev-routen .dt-routes{margin-top:10px}
.rev-flotte{padding-bottom:clamp(40px,6vh,72px)}
.rev-flotte h2{font-size:clamp(24px,2.7vw,36px);margin-bottom:10px}
.rev-flotte .fl-such{margin-top:clamp(20px,3vh,28px)}
.rev-faq{padding-bottom:clamp(40px,6vh,72px)}
.rev-faq h2{font-size:clamp(24px,2.7vw,36px);margin-bottom:20px}
@media (max-width:860px){
  .rev-txt{grid-template-columns:1fr;gap:24px}
  .rev-eck{gap:18px 26px}
  .rev-eck b{font-size:18px}
}

/* ---------- Meldungsseiten (404, 503) ----------
   Kein Sonderdesign: dieselbe Seite wie jede andere, nur mit einer
   Erklaerung statt einer Yacht, und immer mit einem Weg weiter. */
.md-seite{
  padding:clamp(70px,14vh,150px) 0 clamp(60px,10vh,110px);
  max-width:44em;
}
.md-seite h1{
  font-family:'Roboto',Arial,Helvetica,sans-serif;font-weight:500;color:var(--navy);
  font-size:clamp(30px,4vw,52px);line-height:1.1;margin:8px 0 18px;
}
.md-seite .lead{margin-bottom:10px}
.md-cta{margin:26px 0 30px}
.md-klein{font-size:13.5px;color:var(--soft);line-height:1.7}
.md-klein a{color:var(--azure-deep);text-decoration:underline;text-underline-offset:3px}


/* ---------- Leistungen ----------
   Zwoelf Wuensche, die BlueSun ueber die Yacht hinaus erfuellt. Nur Bild
   und Titel: die Aufzaehlung stammt von Nancy, erfundene Erklaertexte gibt
   es hier bewusst nicht. */
/* Einleitung seit 11.10.2026 fuenf Saetze lang: Zeile auf rund 90 Zeichen
   begrenzt. Die neue Ueberschrift steht am Rechner in einer Zeile, statt
   "bestimmen" allein in die zweite zu schieben. */
#activities .fl-h{max-width:18em;text-wrap:balance}
.lk-lead{font-size:clamp(16px,1.4vw,18px);color:var(--soft);margin-top:10px;max-width:44em;text-wrap:pretty}
.lk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(30px,5vh,48px)}
.lk{margin:0}
.lk-bild{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;background:var(--sky);box-shadow:var(--sh-soft)}
.lk-bild img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.lk:hover .lk-bild img{transform:scale(1.05)}
.lk figcaption{margin-top:12px;font-family:'Roboto',Arial,Helvetica,sans-serif;font-size:clamp(19px,1.6vw,22px);line-height:1.2;color:var(--navy)}
@media (max-width:1100px){ .lk-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .lk-grid{grid-template-columns:repeat(2,1fr);gap:14px} .lk figcaption{font-size:17px} }

/* ==================== Helle Fassung (Nancy, 11.09.2026) ====================
   "Die gesamte Praesenz soll heller und freundlicher werden." Die dunklen
   Flaechen (Finder-Fenster, tiefe Panels, Glaskarte, Fusszeile) werden hell,
   Text wird Navy, Goldakzente eine Stufe dunkler, damit sie auf Hell lesbar
   bleiben. Bildflaechen mit Text darauf (Titelbild, Karten, Kapitel) behalten
   ihre Abdunklung, sonst waere der weisse Text dort nicht lesbar.
   Alles an einer Stelle, damit es sich im Ganzen zuruecknehmen laesst. */

/* Glaskarte ueber der See: hell und gefrostet statt dunkel */
.panel.glass{
  background:linear-gradient(165deg,rgba(255,255,255,.80) 0%,rgba(234,246,252,.70) 100%);
  border-color:rgba(255,255,255,.7);
  box-shadow:0 30px 90px rgba(7,55,85,.16),inset 0 1px 0 rgba(255,255,255,.8);
  color:var(--ink);
}
@supports not (backdrop-filter:blur(1px)){ .panel.glass{background:#F4F9FC} }
.panel.glass h2{color:var(--navy)}
.panel.glass .kick{color:var(--gold-deep)}
.panel.glass .pr-p{color:var(--soft)}
.panel.glass .pr-foot div b{color:var(--navy)}
.panel.glass .pr-foot div span{color:var(--soft)}

/* tiefe Panels (Yacht-Suche auf der Startseite, drei Schritte) */
.panel.deep{
  background:linear-gradient(160deg,#EAF6FC 0%,#F7FBFE 100%);
  border:1px solid rgba(0,156,216,.12);box-shadow:var(--sh-soft);color:var(--ink);
}
.panel.deep h2,.panel.deep h3{color:var(--navy)}
.panel.deep .kick{color:var(--gold-deep) !important}
.fi-h{color:var(--navy)}
.fi-p{color:var(--soft)}
.fi-free{background:var(--mist);border-color:var(--line);color:var(--ink)}
.fi-free::before{background:var(--gold-deep)}
.fi-steps li,.fi-steps li:last-child{border-color:rgba(0,157,218,.35)}
.fi-steps b{color:var(--gold-deep)}
.fi-steps span{color:var(--soft)}
.st-head h2{color:var(--navy)}
.st-head .kick{color:var(--gold-deep)}
.stnum{color:var(--gold-deep)}
.step h3{color:var(--navy)}
.step .ssub{color:var(--gold-deep)}
.step p{color:var(--soft)}
.st-div{background:linear-gradient(180deg,transparent,rgba(0,157,218,.45),transparent)}

/* Unterseitenkopf: mehr Bild, weniger Nacht */
.sub-head .bg{opacity:.85}
.sub-head::after{background:linear-gradient(180deg,rgba(6,42,66,.18),rgba(6,42,66,.62))}

/* Fusszeile hell, mit dem farbigen Logo */
footer{background:var(--sky);color:var(--ink)}
.ft-h{color:var(--gold-deep)}
.ft-brand p{color:var(--soft)}
.ft-col a{color:var(--soft)}
.ft-col a:hover{color:var(--navy)}
.ft-low,.ft-low a{color:var(--soft)}
.ft-low{border-color:var(--line)}
.soc{border-color:rgba(7,55,85,.2);color:var(--navy)}
.soc:hover{border-color:var(--gold);background:rgba(0,157,218,.10)}

/* Fenster der Yacht-Suche: hell */
.jy-win{
  background:linear-gradient(160deg,rgba(255,255,255,.98) 0%,rgba(241,248,253,.98) 100%);
  border-color:rgba(0,156,216,.16);box-shadow:0 40px 120px rgba(7,55,85,.22);
}
.jy-bar{background:rgba(0,156,216,.12)}
.jy-bar i{background:var(--gold)}
.jy-close,.jy-back{border-color:rgba(7,55,85,.22);color:var(--navy);background:rgba(255,255,255,.7)}
.jy-close:hover,.jy-back:hover{border-color:var(--gold);background:rgba(0,157,218,.12)}
.jy-kick{color:var(--gold-deep)}
.jy-q{color:var(--navy)}
.jy-opt{border-color:rgba(7,55,85,.16);background:#fff}
.jy-opt:hover{border-color:var(--gold);background:rgba(0,157,218,.07)}
.jy-opt.on{border-color:var(--gold);background:rgba(0,157,218,.12)}
.jy-opt b{color:var(--navy)}
.jy-opt span{color:var(--soft)}
.jy-quiet{border-color:rgba(7,55,85,.2);color:var(--soft)}
.jy-chip{border-color:rgba(7,55,85,.2);color:var(--navy);background:#fff}
.jy-chip:hover{border-color:var(--gold);background:rgba(0,157,218,.07)}
.jy-chip.on{border-color:var(--gold);background:rgba(0,157,218,.14);color:var(--navy)}
.rec-h{color:var(--navy)}
.rec-sub{color:var(--gold-deep)}
.rec-why li{color:var(--ink)}
.rec-why li::before{background:var(--gold)}
.rec-price{border-top-color:rgba(0,157,218,.4)}
.rec-price-l,.rec-price-n{color:var(--soft)}
.rec-price b{color:var(--navy)}
.rec-card{background:#fff;border-color:var(--line)}
.rec-y{background:#fff;border-color:var(--line)}
.rec-y b{color:var(--navy)}
.rec-y-eck{color:var(--soft)}
.rec-y-preis{color:var(--gold-deep)}
.rec-y-tipp{color:var(--gold-deep);border-color:rgba(0,157,218,.5)}
.rec-card-k{color:var(--gold-deep)}
.rec-card-n{color:var(--navy)}
.rec-specs span{color:var(--soft)}
.jy-next{border-color:rgba(0,157,218,.75);color:var(--navy)}
.jy-next:hover{background:rgba(0,157,218,.12);border-color:var(--gold)}
.jy-count{color:var(--navy)}
.jy-count small{color:var(--gold-deep)}
.jy-range{background:rgba(7,55,85,.14)}
.jy-range::-webkit-slider-thumb{background:var(--gold)}
.jy-range::-moz-range-thumb{background:var(--gold)}
.jy-dual::before{background:rgba(7,55,85,.14)}
.jy-dual i{background:var(--gold)}
.jy-dual input::-webkit-slider-thumb{background:var(--gold);box-shadow:0 4px 12px rgba(7,55,85,.25)}
.jy-dual input::-moz-range-thumb{background:var(--gold);box-shadow:0 4px 12px rgba(7,55,85,.25)}
.jy-scale,.jy-lbl,.jy-fld label{color:var(--soft)}
.jy-input,.jy-area{background:#fff;color:var(--ink);border-color:rgba(7,55,85,.2)}
.jy-sum{border-left-color:rgba(0,157,218,.45)}
.jy-sum-h{color:var(--gold-deep)}
.jy-sum-row b{color:var(--soft)}
.jy-sum-row span{color:var(--navy)}
.jy-note{color:var(--soft)}
.jy-seal{border-color:var(--gold);color:var(--gold-deep)}
.jy-step[data-step="11"] p{color:var(--soft) !important}
.jy-nancy{color:var(--soft);border-top-color:rgba(7,55,85,.1)}
.jy-nancy b{color:var(--navy)}

/* Revierseite ohne belegte Routen: der Text nimmt die volle Breite. */
.rev-txt-voll{grid-template-columns:1fr;max-width:52em}
.soc-ic{color:var(--navy)}
.jy-input::placeholder,.jy-area::placeholder{color:rgba(61,94,119,.55)}
.jy-input:focus,.jy-area:focus{outline-color:var(--gold)}

/* ---------- Pflichtfelder und Anfrageversand ---------- */
input.fehlt,select.fehlt,textarea.fehlt{border-color:#C0392B !important;box-shadow:0 0 0 3px rgba(192,57,43,.14)}
.fld.fehlt label,.jy-fld.fehlt label{color:#B3261E}
.fehlt-text{display:block;margin-top:6px;font-size:12px;color:#B3261E}
.fehlt-hinweis{margin-top:12px;font-size:13px;font-weight:500;color:#B3261E}
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0}
.jy-fld-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){ .jy-fld-row{grid-template-columns:1fr} }
.yq-danke{padding:8px 0 4px}
.yq-danke p{color:var(--ink);font-size:15px;margin-top:8px}
.yq-danke .yq-trocken,.jy-note#jy-trocken{color:var(--azure-deep);font-style:normal}

/* ---------- Vorschau-Popup auf breiten Bildschirmen: zwei Spalten ----------
   Vorher lag der Text unter einem 16:9-Bild ueber die volle Breite. Bei
   1080 Pixel Breite war das Bild rund 600 hoch, die Knoepfe rutschten unter
   den Rand, und rechts neben dem Text blieb die halbe Breite leer. Jetzt
   steht das Bild links, Angaben und Knoepfe rechts daneben, alles auf einen
   Blick. Schmale Bildschirme behalten die gestapelte Anordnung. */
@media (min-width:900px){
  .yv-fenster{
    width:min(1240px,100%);
    display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);align-items:stretch;
  }
  .yv-buehne{aspect-ratio:16/9;align-self:center}
  .yv-text{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,2.6vw,40px)}
  .yv-eck{gap:18px 26px}
  .yv-cta{flex-direction:column;align-items:stretch;margin-top:4px}
  .yv-cta .btn{justify-content:center}
}

/* Titelbild: die Abdunklung 10 % durchsichtiger (Rueckmeldung 11.09.2026).
   Die Schrift behaelt ihren Schatten und bleibt lesbar. */
.sea-grade{opacity:.9}

/* ---------- Logo auf weisser Tafel (wie auf der alten Seite, 11.09.2026) ----------
   Immer das Originallogo mit dunkler Schrift und Nancys Blau, auf einer
   weissen Tafel, die von der Oberkante herabhaengt, auch ueber dem
   Titelbild. Die weisse Logovariante fuer dunklen Grund entfaellt. */
.hd-logo{
  align-self:start;width:132px;height:104px;padding:10px 17px 13px;
  background:#fff;border-radius:0 0 var(--r-card) var(--r-card);
  box-shadow:0 12px 34px rgba(7,55,85,.16);transform-origin:top center;
}
#hd.on .hd-logo,body[data-kopf="fest"] #hd .hd-logo{width:112px;height:86px;padding:8px 15px 11px}
.hd-logo img,#hd.on .hd-logo img,body[data-kopf="fest"] #hd .hd-logo img{opacity:1}
.hd-logo-w{display:none}
.hd-logo:hover{transform:scale(1.03)}
@media (max-width:600px){
  .hd-logo,#hd.on .hd-logo,body[data-kopf="fest"] #hd .hd-logo{width:92px;height:74px;padding:7px 11px 9px;margin-right:14px}
  .hd-logo img{height:100%}
}
/* Die Logotafel ist hoeher als die Leiste. Beim Verstecken um -100% blieb
   ihr unteres Stueck samt Schatten stehen; darum weiter hinauf schieben. */
#hd.weg{transform:translateY(calc(-100% - 64px))}

/* ==================== Sonniger Tag (11.09.2026) ====================
   "Die Seite wirkt wie ein bewoelkter Tag, nicht wie ein perfekter Tag auf
   der Yacht." Bisher wurde flaechig abgedunkelt, damit Text irgendwo lesbar
   bleibt. Jetzt bleibt das Bild hell, und abgeschirmt wird nur, wo Text liegt.
   Alle Inhaltsabschnitte haben ohnehin eigenen hellen Grund. */

/* das Meer selbst: ein wenig mehr Sonne */
#bgsea .sea-img{filter:saturate(1.12) brightness(1.06)}

/* Titelbild: nur hinter der Ueberschrift links, weich auslaufend; oben ein
   Hauch fuer die Kopfleiste, unten ein Hauch fuer "Entdecken". Rechts, wo
   Yacht und Wasser liegen, keine Toenung mehr. */
.sea-grade{
  opacity:1;
  background:
    linear-gradient(100deg,rgba(5,29,47,.50) 0%,rgba(5,29,47,.30) 30%,rgba(5,29,47,.08) 54%,rgba(5,29,47,0) 68%),
    linear-gradient(180deg,rgba(6,36,58,.24) 0%,rgba(6,36,58,0) 22%,rgba(6,36,58,0) 70%,rgba(5,29,47,.30) 100%);
}
/* die Schrift traegt ihre Lesbarkeit selbst */
.hero-h{text-shadow:0 2px 18px rgba(4,24,38,.6),0 8px 60px rgba(4,24,38,.45)}
.hero-body .kick{text-shadow:0 1px 6px rgba(4,24,38,.9),0 2px 18px rgba(4,24,38,.7)}

/* Kapitel Motoryachten, Segelyachten, Crew: leichte Toenung statt Nacht,
   der Beschreibungstext bekommt eine eigene Glaskarte */
.pil-media::after{
  background:
    linear-gradient(90deg,rgba(5,32,52,.52) 0%,rgba(5,32,52,.30) 44%,rgba(5,32,52,.18) 100%),
    linear-gradient(180deg,rgba(5,32,52,.22) 0%,rgba(5,32,52,0) 30%);
}
.pil-t{text-shadow:0 1px 14px rgba(3,20,34,.75),0 0 30px rgba(3,20,34,.35)}
.pil-copy .pc{
  padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px);
  border-radius:var(--r-card);
  background:rgba(5,32,52,.34);
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(255,255,255,.18);
}
@supports not (backdrop-filter:blur(1px)){ .pil-copy .pc{background:rgba(5,32,52,.62)} }
/* "Entdecken" groesser, Linie und Anker behalten ihre Groesse */
.hero-cue{font-size:clamp(15px,1.1vw,19px);letter-spacing:.34em}

/* ---------- Kapitel Motor, Segel, Crew: sonniger Tag ----------
   Das Bild bleibt hell und ungetoent. Kapitelliste und Text sitzen auf
   einer weissen Glasleiste am unteren Rand, Navy auf Weiss, Gold fuer
   Nummern und Kicker. Ersetzt die dunkle Abdunklung und die graue Karte. */
.pil-media img{filter:saturate(1.1) brightness(1.05)}
/* helle Grundflaeche, bis das erste Bild eingeblendet ist */
.pil-stick{background:var(--sky)}
.pil-media figure:first-child{opacity:1}
.pil-media::after{
  background:linear-gradient(180deg,rgba(6,36,58,.14) 0%,rgba(6,36,58,0) 24%,rgba(6,36,58,0) 62%,rgba(6,36,58,.18) 100%);
}
.pil-body{
  align-content:end;align-items:stretch;gap:0;
  grid-template-columns:.85fr 1.15fr;
  padding:clamp(30px,5vh,60px) clamp(26px,4.5vw,64px) clamp(58px,8vh,84px);
}
.pil-idx,.pil-copy{
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 24px 70px rgba(7,55,85,.18);
}
@supports not (backdrop-filter:blur(1px)){ .pil-idx,.pil-copy{background:rgba(255,255,255,.96)} }
.pil-idx{
  border-radius:var(--r-card) 0 0 var(--r-card);border-right:0;
  padding:clamp(22px,3vh,34px) clamp(22px,2.6vw,36px);
  gap:clamp(8px,1.6vh,16px);
}
.pil-copy{
  border-radius:0 var(--r-card) var(--r-card) 0;border-left:1px solid rgba(7,55,85,.10);
  padding:clamp(22px,3vh,34px) clamp(24px,2.8vw,40px);min-height:230px;
}
.pil-copy .pc{
  padding:0;border:0;border-radius:0;background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  inset:auto clamp(24px,2.8vw,40px);
}
.pil-t{color:rgba(7,55,85,.42);text-shadow:none;font-size:clamp(24px,2.8vw,38px)}
.pil-t.on{color:var(--navy)}
.pil-t .n{color:var(--gold-deep)}
.pil-copy .kick{color:var(--gold-deep);text-shadow:none}
.pil-copy p:not(.kick){color:var(--ink);text-shadow:none;font-size:clamp(15px,1.25vw,17.5px)}
.pil-progress{bottom:clamp(20px,3vh,32px)}
.pil-progress i{background:rgba(255,255,255,.45)}
.pil-progress b{background:var(--gold)}
@media (max-width:860px){
  .pil-stick{background:var(--sky)}
  .pil-body{grid-template-columns:1fr;padding:18px 16px 40px}
  .pil-idx,.pil-copy{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-soft);backdrop-filter:none}
  .pil-idx{border-radius:var(--r-card) var(--r-card) 0 0;border-bottom:0;padding:22px 22px 8px}
  .pil-copy{border-radius:0 0 var(--r-card) var(--r-card);border-top:0;min-height:0;padding:8px 22px 24px}
  .pil-copy .pc{margin-top:0;padding:0}
  .pil-t{color:var(--navy);font-size:24px}
}

/* Unterseitenkopf im sonnigen Schema: Bild voll, Schatten nur hinter dem
   Text links und schwach am unteren Rand. */
.sub-head .bg{opacity:1}
.sub-head .bg img{filter:saturate(1.08) brightness(1.04)}
.sub-head::after{
  background:
    linear-gradient(100deg,rgba(5,29,47,.58) 0%,rgba(5,29,47,.36) 36%,rgba(5,29,47,.06) 66%,rgba(5,29,47,0) 80%),
    linear-gradient(180deg,rgba(6,36,58,.22) 0%,rgba(6,36,58,0) 26%,rgba(6,36,58,0) 70%,rgba(5,29,47,.28) 100%);
}
.sub-head h1{text-shadow:0 2px 18px rgba(4,24,38,.55)}
.sub-head .lead{text-shadow:0 1px 12px rgba(4,24,38,.55)}

/* hidden muss gewinnen, auch gegen .btn{display:inline-flex}: sonst stand
   "Weitere 0 Yachten anzeigen" sichtbar unter einem vollstaendigen Raster */
[hidden]{display:none !important}

/* ---------- Titelbild am Telefon (Rueckmeldung 12.09.2026) ----------
   Drei volle Knoepfe uebereinander plus "Entdecken" mit Anker passten nicht
   in eine Bildschirmhoehe: der Anker lag ueber dem dritten Knopf. Jetzt:
   kleinere Ueberschrift, die beiden Nebenknoepfe nebeneinander, der dritte
   entfaellt, weil "Yacht anfragen" oben rechts ohnehin steht, und der
   Inhalt sitzt oberhalb des Ankers statt in der Mitte. */
@media (max-width:600px){
  .hero-stick{align-items:flex-end}
  .hero-body{padding:110px 0 clamp(150px,22svh,190px)}
  .hero-body .kick{font-size:10.5px;letter-spacing:.2em}
  .hero-h{font-size:clamp(36px,11vw,46px);max-width:none}
  .hero-cta{margin-top:26px;gap:10px}
  .hero-cta .btn{width:100%;justify-content:center}
  .hero-cta .btn-ghost:last-child{display:none}
  .hero-cue{bottom:18px;gap:8px;font-size:13px;letter-spacing:.3em}
  .cue-anchor{height:64px;width:24px}
}

/* ---------- Willkommen-Karte am Telefon (Rueckmeldung 12.09.2026) ----------
   Das gefrostete Glas wirkte auf dem Handy trueb, weil das Meer samt
   Schleier durchschimmerte. Dort jetzt eine feste helle Karte, weniger
   Text, kompakte Kennzahlen. */
@media (max-width:860px){
  .panel.glass{
    background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
    border:1px solid var(--line);box-shadow:var(--sh-soft);
    padding:34px 0 30px;
  }
  .pr-grid{gap:26px}
  .pr-h{font-size:clamp(26px,7.4vw,32px);line-height:1.12}
  .pr-p{margin-top:14px;font-size:14.5px;line-height:1.6}
  .panel.glass .hairline{margin:22px 0}
  .pr-foot{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-top:0}
  .pr-foot div b{font-size:22px}
  .pr-foot div span{font-size:11px}
  .pr-claim img.claim{width:min(240px,70%)}
  .trust-note{font-size:12px}
}

/* ---------- Kapitel am Telefon: Titel, Text, Titel, Text ----------
   Im Markup stehen erst die drei Titel, dann die drei Texte (die
   Desktop-Choreografie braucht das). Am Telefon werden die beiden
   Huellen aufgeloest und die Kinder per order verschraenkt. Die weisse
   Karte wandert dafuer auf .pil-body. */
@media (max-width:860px){
  .pil-idx,.pil-copy{display:contents}
  .pil-body{
    display:grid;grid-template-columns:1fr;gap:0;
    margin:18px 16px 40px;padding:8px 22px 6px;
    background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-soft);
  }
  .pil-t:nth-child(1){order:1} .pil-copy .pc:nth-child(1){order:2}
  .pil-t:nth-child(2){order:3} .pil-copy .pc:nth-child(2){order:4}
  .pil-t:nth-child(3){order:5} .pil-copy .pc:nth-child(3){order:6}
  .pil-t{margin:16px 0 4px;font-size:25px}
  .pil-copy .pc{margin:0 0 6px;padding:0 0 16px;border-bottom:1px solid var(--line)}
  .pil-copy .pc:nth-child(3){border-bottom:0}
  .pil-copy .kick{font-size:10.5px;margin-bottom:6px}
  .pil-copy p:not(.kick){font-size:15px}
}

/* ---------- Schieberegler (Rueckmeldung 12.09.2026) ----------
   Am Handy war der Knopf schwer zu treffen, die Spur kaum zu sehen und
   die Endwerte zu klein. Gilt fuer Yacht-Suche und Filterleiste, beide
   nutzen dieselben Klassen. */
.jy-range{height:6px;background:rgba(7,55,85,.16);margin:16px 0 10px}
.jy-range::-webkit-slider-runnable-track{height:6px}
.jy-range::-webkit-slider-thumb{width:32px;height:32px;margin-top:-13px;border:3px solid #fff;box-shadow:0 3px 12px rgba(7,55,85,.35)}
.jy-range::-moz-range-track{height:6px}
.jy-range::-moz-range-thumb{width:32px;height:32px;border:3px solid #fff;box-shadow:0 3px 12px rgba(7,55,85,.35)}
.jy-dual{height:36px;margin:14px 0 6px}
.jy-dual::before{height:6px;margin-top:-3px;background:rgba(7,55,85,.16)}
.jy-dual i{height:6px;margin-top:-3px}
.jy-dual input{height:36px}
.jy-dual input::-webkit-slider-runnable-track{height:36px}
.jy-dual input::-webkit-slider-thumb{width:32px;height:32px;margin-top:2px;border:3px solid #fff;box-shadow:0 3px 12px rgba(7,55,85,.35)}
.jy-dual input::-moz-range-track{height:36px}
.jy-dual input::-moz-range-thumb{width:32px;height:32px;border:3px solid #fff;box-shadow:0 3px 12px rgba(7,55,85,.35)}
.jy-scale{font-size:13px;letter-spacing:.08em;text-transform:none;color:var(--navy);margin-top:10px}
@media (max-width:600px){
  .jy-range{height:8px}
  .jy-range::-webkit-slider-runnable-track{height:8px}
  .jy-range::-webkit-slider-thumb{width:38px;height:38px;margin-top:-15px}
  .jy-range::-moz-range-thumb{width:38px;height:38px}
  .jy-dual{height:44px}
  .jy-dual input{height:44px}
  .jy-dual input::-webkit-slider-runnable-track{height:44px}
  .jy-dual input::-webkit-slider-thumb{width:38px;height:38px;margin-top:3px}
  .jy-dual input::-moz-range-thumb{width:38px;height:38px}
  .jy-dual::before,.jy-dual i{height:8px;margin-top:-4px}
  .jy-scale{font-size:14px}
}

/* ---------- Empfehlung: die Anfrage sitzt auf der Yachtkarte ----------
   Vorher standen WhatsApp und "Schriftlich anfragen" am Ende der
   Begruendung, am Handy also weit unter der Karte. Jetzt direkt unter den
   Eckdaten der Yacht; "Auswahl aendern" bleibt unten. */
.rec-card-cta{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.rec-card-cta .btn{width:100%;justify-content:center;gap:10px}
.rec-card-cta .wa-ic{width:20px;height:20px}
.rec-card-cta .wa-ic::after{display:none}
.rec-card-l{color:var(--soft)}

/* ---------- Unterseitenkopf am Telefon: Bild, darunter Textbalken ----------
   Weisse Schrift ueber dem weissen Rumpf war unleserlich (12.09.2026).
   Am Telefon steht das Bild jetzt fuer sich, der Text darunter auf hellem
   Grund in Navy. Gilt fuer Yachtsuche, Reviere, Kontakt, Impressum,
   Datenschutz und die einzelnen Revierseiten. */
@media (max-width:600px){
  .sub-head{padding:0;background:var(--sky);color:var(--navy)}
  .sub-head .bg{position:relative;height:44svh;min-height:250px;max-height:380px;opacity:1}
  .sub-head::after{display:none}
  .sub-head .wrap{padding:22px 0 26px}
  .sub-head .kick{color:var(--gold-deep)}
  .sub-head h1{color:var(--navy);text-shadow:none;font-size:clamp(27px,7.4vw,34px);line-height:1.12}
  .sub-head .lead,.sub-head p.lead{color:var(--soft);text-shadow:none;font-size:15px;margin-top:12px}

  .rev-hero{height:auto}
  /* die Huelle beschneidet sonst den Textbalken, deshalb Hoehe aufs Bild */
  .rev-hero-fix{position:relative;height:auto;overflow:visible}
  .rev-hero-bild{height:44svh;min-height:250px;max-height:380px}
  .rev-hero-b{position:relative;background:var(--sky);color:var(--navy);padding:20px 0 24px}
  .rev-hero-b .kick{color:var(--gold-deep)}
  .rev-hero-b h1{color:var(--navy);text-shadow:none;font-size:clamp(27px,7.4vw,34px)}
  .rev-inhalt{margin-top:0}
}

/* ---------- Pruefbericht 27.09.2026 ---------- */
/* Sprunglink: erst sichtbar, wenn er per Tastatur den Fokus bekommt */
.skip{position:fixed;left:16px;top:-80px;z-index:400;padding:10px 16px;border-radius:6px;
  background:var(--navy);color:#fff;font-size:14px;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}
/* Revierkacheln der Startseite sind jetzt echte Verweise */
a.ds-panel{display:block;color:inherit;text-decoration:none}
/* Bauarten und weitere Reviere als Wege */
.fl-intro{max-width:46em;margin:0 0 clamp(18px,3vh,28px);padding-top:clamp(34px,6vh,64px)}
.fl-arten{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(20px,3vh,30px)}
.fl-arten a{font-size:13px;letter-spacing:.02em;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);color:var(--navy);text-decoration:none;background:#fff;
  transition:border-color .25s,background .25s,color .25s}
.fl-arten a:hover{border-color:var(--gold);color:var(--azure-deep)}
.fl-arten a[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}
.rev-weitere{padding-top:clamp(20px,4vh,40px)}
.rev-weitere h2{margin-bottom:16px}
/* Blaettern ohne Skript */
.fl-seiten{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:clamp(22px,3vh,36px);font-size:14px;color:var(--soft)}
.fl-seiten a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
/* Revier und Bauart auf der Yachtseite */
.yd-wege a{color:var(--azure-deep);text-decoration:underline;text-underline-offset:3px}

/* ---------- Nancys Rueckmeldung vom 04.10.2026 ----------
   Eine Linie: zunaechst Cormorant nur fuer Ueberschriften, seit 05.10.2026
   ganz Roboto (siehe Ende der Datei). Akzente im Blau aus dem Logo. Abschnitte mit einem Abstandsmass. */
:root{--abschnitt:clamp(34px,6vh,64px)}

/* Kopf: auf Yachtseiten fuehrt "Yacht anfragen" oben nicht in die Yacht-Suche */
body[data-seite="yacht"] .hd-cta{display:none}

/* Yachtseite: Eckdaten zentriert, eine ruhige Reihe */
.yd-fakt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;padding-block:var(--abschnitt);grid-template-columns:none}
.yd-eck{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 10px;width:100%;max-width:820px;justify-items:center}
@media (min-width:900px){ .yd-eck{grid-template-columns:repeat(8,minmax(0,1fr))} }
.yd-eck b{font-size:clamp(19px,4.6vw,26px);font-weight:500;line-height:1.1;white-space:nowrap}
.yd-eck span{font-size:10px;letter-spacing:.14em;margin-top:6px}
.yd-preis b{font-size:clamp(21px,4.8vw,26px);font-weight:500}
.yd-preis span{margin-top:2px}
.yd-cta{width:100%;max-width:400px}
.yd-cta .btn{width:100%}
/* Fotos direkt nach den Eckdaten, am Telefon untereinander zum Wischen */
.yd-gal{padding-bottom:var(--abschnitt)}
.yd-gal-g{grid-template-columns:1fr;gap:10px;margin-top:0}
@media (min-width:760px){ .yd-gal-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} }
.yd-gal-g figure{aspect-ratio:3/2;box-shadow:none}
/* Text knapp, Ausstattung als ruhige Zeile statt Rahmen */
.yd-txt{display:block;max-width:46em;padding:0 0 var(--abschnitt)}
.yd-name{font-size:clamp(24px,4vw,32px);margin-bottom:10px}
.yd-txt .yd-p{font-size:15.5px;margin-bottom:14px}
.yd-tags{margin:22px 0 0}
.yd-tags-t{font-size:10.5px;letter-spacing:.18em;margin-bottom:6px;color:var(--gold-deep)}
.yd-tags-l{font-size:14.5px;line-height:1.7;color:var(--soft);margin:0}
.yd-crew{padding-bottom:var(--abschnitt)}
.yd-crew h2,.yd-schluss h2{font-size:clamp(22px,3.4vw,30px)}
.yd-schluss{padding:var(--abschnitt) 0 calc(var(--abschnitt) + 40px)}
.yd-schluss .btn{margin-top:6px}

/* Mitlaufender Knopf unten in der Mitte, neben der Chatblase */
.yd-leiste{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:135;
  transform:translate(-50%,160%);transition:transform .35s var(--ease);pointer-events:none}
.yd-leiste.on{transform:translate(-50%,0);pointer-events:auto}
.yd-leiste .btn{white-space:nowrap;box-shadow:0 12px 30px rgba(0,70,110,.35)}
@media (max-width:420px){ .yd-leiste{left:calc(50% - 30px)} }

/* Anfragefenster: drei Wege, dann das Formular */
.yq-wege{display:grid;gap:8px;margin:16px 0 4px}
.yq-wege .line-btn{margin:0}
.yq-oder{margin:18px 0 6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}

/* Yachtsuche: Suchfeld vorn, Filter eingeklappt */
.fl-kopf{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.fl-text{flex:1 1 260px}
.fl-text .fl-sel{background-image:none;padding-right:13px;cursor:text}
.fl-auf{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border:1px solid var(--line);
  border-radius:var(--r-ctl);background:#fff;font:inherit;font-size:14px;color:var(--navy);cursor:pointer}
.fl-auf i{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s}
.fl-auf[aria-expanded="true"] i{transform:rotate(-135deg) translate(-2px,-2px)}
.fl-auf-n{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:var(--gold);
  color:#fff;font-size:11.5px;font-weight:500;padding:0 6px}
.fl-filter{margin-top:clamp(16px,2.2vh,22px);padding-top:clamp(16px,2.2vh,22px);border-top:1px solid var(--line)}
/* Ueberschrift und Einleitung der Flotte nicht aneinanderkleben */
.fl-h + .lead{margin-top:14px}
/* Saison auf den Revierkacheln: auf hellen Fotos war das helle Blau kaum lesbar */
.ds-tag{color:rgba(255,255,255,.92)}
/* Panels am Telefon: der Inhalt stand bisher direkt am Panelrand, weil
   .wrap (92vw) fast so breit ist wie das Panel (94vw). Nancy, 04.10.2026:
   "Willkommen an Bord, fehlt der Rand zum Text". */
@media (max-width:900px){ .panel > .wrap{width:auto;padding-inline:22px} }

/* Runde 1 nach Nancys Rueckmeldung: Zahlen in Roboto 500 statt fett, Preis
   in der Grundschrift, letzte Daten-Reste aus der Zierschrift */
.fl-specs div b{font-weight:500;font-size:20px}
.pr-foot div b{font-weight:500;font-size:clamp(22px,2.4vw,28px)}
.fl-price{font-size:14px;letter-spacing:0;color:var(--soft)}
.fl-price b{font-size:16px;font-weight:500;color:var(--navy)}
.rev-eck b{font-family:'Roboto',Arial,sans-serif;font-weight:500;font-size:clamp(17px,1.8vw,21px)}
.jy-sum-row span{font-family:'Roboto',Arial,sans-serif;font-size:16px}
/* Yachtseite am Rechner: Textblock buendig mit den anderen Abschnitten,
   nur die Zeilen bleiben schmal */
.yd-txt.wrap{max-width:none}
.yd-txt > *{max-width:46em}
/* Ein Hauptknopf-Stil: Blau aus dem Logo, auch fuer "Alle Reviere" */
.btn-voll{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:0 10px 26px rgba(0,70,110,.22)}
.btn-voll:hover{background:#0A8FC7;border-color:#0A8FC7;color:#fff}

/* ---------- Eine Schrift (Nancy, 04.10.2026) ----------
   Roboto ueberall. Ueberschriften in der leichten Schnittstaerke, damit sie
   ruhig bleiben; die Groessen sind kleiner als zuvor bei Cormorant, weil
   Roboto bei gleicher Pixelgroesse deutlich breiter laeuft. */
h1,h2,h3,.serif{font-weight:300;letter-spacing:-.012em;line-height:1.16}
.hero-h{font-size:clamp(36px,5.4vw,72px);font-weight:300;line-height:1.08}
.hero-h em{font-style:normal}
.sub-head h1{font-size:clamp(30px,3.9vw,50px)}
.yd-hero-b h1{font-size:clamp(32px,5vw,60px);font-weight:300}
.rev-hero-b h1{font-size:clamp(28px,3.7vw,48px);font-weight:300}
.fl-h,.pr-h,.st-head h2{font-size:clamp(26px,2.9vw,40px)}
.fl-name{font-size:clamp(23px,2.3vw,32px);letter-spacing:.01em}
.ds-city{font-size:clamp(21px,2vw,29px);font-weight:300}
.ds-name-v{font-weight:300}
/* Zitat der Gruenderin seit 19.10.2026 wieder nur ein Satz ("erster Satz
   gross"), deshalb wieder groesser. Der zweite Satz steht darunter als
   Einleitung .fd-lead: kleiner als das Zitat, groesser als der Fliesstext,
   in Navy und leichtem Schnitt wie das Zitat, damit das Zitat fuehrt.
   Die Wort-Animation (.fd-q .w) betrifft nur das Zitat; balance verhindert
   am Telefon ein einzelnes Wort in der zweiten Zeile. */
.fd-q{font-size:clamp(25px,2.6vw,36px);font-weight:300;max-width:22em;text-wrap:balance}
.fd-lead{margin-top:16px;font-size:clamp(18px,1.45vw,21px);font-weight:300;line-height:1.5;color:var(--navy);max-width:30em;text-wrap:pretty}
.jy-q{font-size:clamp(24px,3.2vw,38px);font-weight:300}
.rec-h{font-size:clamp(22px,2.8vw,34px);font-weight:300}
.jy-opt b{font-size:19px;font-weight:400}
.rev-txt h2,.rev-flotte h2,.rev-faq h2,.rev-weitere h2{font-size:clamp(21px,2.2vw,29px)}
.d-body h2,.d-body h3{font-size:22px}
.legal h2{font-size:20px}
.yd-name{font-size:clamp(21px,2.6vw,27px)}
.yd-crew h2,.yd-schluss h2{font-size:clamp(20px,2.4vw,26px)}
.yv-h,.dt-h{font-size:clamp(24px,2.6vw,32px);font-weight:300}
.dlg-in h3{font-weight:300}
@media (max-width:900px){
  .hero-h{font-size:clamp(30px,8.6vw,38px)}
  .pr-h{font-size:clamp(23px,6.4vw,28px)}
  .sub-head h1,.rev-hero-b h1{font-size:clamp(23px,6.4vw,29px)}
}

/* Ausnahme von der einheitlichen Schrift: nur die grosse Zeile auf dem
   Startbild bleibt in Cormorant, wie zuvor, mit kursiver zweiter Zeile.
   "mieten" und "Freiheit" im Blau aus dem Logo (Lorenz, 05.10.2026). */
.hero-h{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:0;
  font-size:clamp(44px,7vw,96px);line-height:1.04}
.hero-h em{font-style:italic;color:#fff}
.hero-blau{color:#14A9E3;text-shadow:0 2px 14px rgba(4,24,38,.7),0 6px 40px rgba(4,24,38,.55)}
@media (max-width:900px){ .hero-h{font-size:clamp(36px,11vw,46px)} }

/* ---------- Galerie der Yachtseite als Slider (05.10.2026) ---------- */
.yd-gal-g{display:none}
.yd-slider{position:relative}
.yd-spur{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:auto;
  overscroll-behavior-x:contain;scrollbar-width:none;border-radius:var(--r-card)}
.yd-spur::-webkit-scrollbar{display:none}
.yd-spur figure{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:3/2;border-radius:var(--r-card);overflow:hidden;margin:0;background:var(--mist)}
.yd-spur img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
@media (min-width:900px){ .yd-spur figure{aspect-ratio:16/9} }
/* am Telefon lugt das naechste Bild hervor */
@media (max-width:899px){ .yd-spur figure{flex-basis:88%} }
.yd-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  border:0;background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(4,24,38,.22);cursor:pointer;
  display:grid;place-items:center;transition:opacity .2s}
.yd-pfeil i{width:11px;height:11px;border-top:2px solid var(--navy);border-right:2px solid var(--navy)}
.yd-zurueck{left:14px}.yd-zurueck i{transform:translateX(2px) rotate(-135deg)}
.yd-vor{right:14px}.yd-vor i{transform:translateX(-2px) rotate(45deg)}
.yd-pfeil:disabled{opacity:0;pointer-events:none}
@media (max-width:899px){ .yd-pfeil{display:none} }
.yd-zaehler{position:absolute;right:14px;bottom:12px;margin:0;padding:4px 10px;border-radius:999px;
  background:rgba(4,24,38,.62);color:#fff;font-size:12.5px;font-variant-numeric:tabular-nums}
@media (max-width:899px){ .yd-zaehler{right:calc(12% + 10px)} }
.yd-daumen{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding-bottom:4px;scrollbar-width:thin}
.yd-daumen button{flex:0 0 auto;width:96px;aspect-ratio:3/2;border:2px solid transparent;border-radius:8px;
  overflow:hidden;padding:0;cursor:pointer;opacity:.6;background:none;transition:opacity .2s,border-color .2s}
.yd-daumen button.on,.yd-daumen button:hover{opacity:1;border-color:var(--gold)}
.yd-daumen img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:899px){ .yd-daumen{display:none} }

/* Startbild: Lesbarkeit der Ueberschrift (Lorenz, 05.10.2026). Ein weicher
   dunkler Verlauf hinter dem Text, ein helleres Blau fuer "mieten" und
   "Freiheit". Am Telefon steht der Text unten, dort laeuft der Verlauf von
   unten nach oben. */
.hero-stick{position:sticky}
.hero-stick::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,rgba(4,24,38,.62) 0%,rgba(4,24,38,.42) 38%,rgba(4,24,38,0) 68%)}
.hero-stick > .hero-body{position:relative;z-index:1}
@media (max-width:900px){
  .hero-stick::before{background:linear-gradient(0deg,rgba(4,24,38,.7) 0%,rgba(4,24,38,.45) 45%,rgba(4,24,38,0) 75%)}
}
.hero-blau{color:#5CCBF5;text-shadow:0 2px 10px rgba(4,24,38,.75),0 4px 32px rgba(4,24,38,.6)}
/* Bei niedrigen Fenstern rutschte "Entdecken" in die Knoepfe. Frueher wurde
   der Anker dort ganz ausgeblendet und fehlte damit auf fast jedem Laptop.
   Seit 11.10.2026 steht er in einer kompakten Fassung: kuerzere Kette,
   kleinere Schrift, naeher am Rand. Nur auf sehr flachen Fenstern (Telefon
   quer) entfaellt er, dort reicht die Hoehe nicht einmal fuer die Knoepfe. */
@media (min-width:601px) and (max-height:780px){
  .hero-cue{bottom:12px;gap:6px;padding:6px 12px 2px;font-size:13px;letter-spacing:.3em}
  .cue-anchor{width:24px;height:62px}
}
@media (max-height:480px){ .hero-cue{display:none} }
/* Blur-up hinter jedem Slider-Foto */
.yd-spur figure{position:relative;background:var(--mist)}
.yd-spur figure::before{content:"";position:absolute;inset:-12px;background:var(--vorschau) center/cover no-repeat;
  filter:blur(14px);transform:scale(1.05)}
.yd-spur img{position:relative;z-index:1;transition:opacity .45s ease}
/* Pfeile und Zaehler ueber den Fotos (die Fotos liegen wegen Blur-up auf Ebene 1) */
.yd-pfeil,.yd-zaehler{z-index:3}

/* Yachtsuche (Lorenz, 05.10.2026): Abstand der Bauart-Leiste zum Bild,
   Regler auf einer Linie, Filterknopf deutlich sichtbar */
.fl-arten{margin-top:clamp(28px,4.5vh,44px)}
.fl-intro + .fl-arten,.rev-weitere .fl-arten{margin-top:0}
.fl-such .fl-regler .fl-feld{display:grid;grid-template-rows:auto 48px auto}
.fl-such .fl-regler .jy-range,.fl-such .fl-regler .jy-dual{align-self:center;margin:0}
.fl-such .fl-regler .jy-scale{margin-top:4px}
.fl-auf{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:500;letter-spacing:.02em;padding:0 18px}
.fl-auf:hover{background:#0A4266}
.fl-auf-ic{width:16px;height:12px;display:inline-block;
  background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,
             linear-gradient(currentColor,currentColor) 0 50%/70% 2px no-repeat,
             linear-gradient(currentColor,currentColor) 0 100%/40% 2px no-repeat}
.fl-auf-n{background:var(--gold)}
@media (max-width:600px){ .fl-kopf{flex-direction:column;align-items:stretch} .fl-text{flex:none} .fl-auf{justify-content:center} }

/* Startbild (Lorenz, 06.10.2026): keine Verdunkelung des Bildes. Lesbarkeit
   nur ueber einen kleinen Schatten an den Buchstaben. Zweite Zeile blau,
   erste weiss. */
.hero-stick::before{content:none;display:none}
.hero-h{text-shadow:0 1px 2px rgba(4,24,38,.55),0 2px 10px rgba(4,24,38,.45)}
.hero-h em.hero-blau,.hero-blau{color:#3FC1F2;text-shadow:0 1px 2px rgba(4,24,38,.6),0 2px 10px rgba(4,24,38,.5)}
.hero-h{text-shadow:0 0 1px rgba(4,24,38,.7),0 1px 3px rgba(4,24,38,.6),0 2px 12px rgba(4,24,38,.45)}

/* ---------- Kopfband der Yachtseite (06.10.2026) ----------
   Foto ohne Text und ohne Verlauf; Name und Preis darunter auf Weiss. */
.yd-hero-b{display:none}
.yd-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap;
  padding-top:clamp(28px,5vh,52px);padding-bottom:clamp(20px,3vh,28px);border-bottom:1px solid var(--line)}
.yd-kopf .kick{color:var(--gold-deep);margin:0}
.yd-kopf h1{color:var(--navy);font-size:clamp(32px,4.2vw,54px);font-weight:300;line-height:1.05;margin:8px 0 0;text-shadow:none}
.yd-kopf .yd-vor{margin-top:6px;font-size:14px;color:var(--soft)}
.yd-kopf .yd-preis{text-align:right}
.yd-kopf .yd-preis b{font-size:clamp(22px,2.4vw,30px);font-weight:500}
.yd-kopf .yd-preis span{display:block;margin-top:4px;font-size:13px;color:var(--soft)}
.yd-fakt{padding-top:clamp(24px,4vh,40px)}
@media (max-width:700px){
  .yd-kopf{flex-direction:column;align-items:flex-start}
  .yd-kopf .yd-preis{text-align:left}
}
/* "Sprache"/"Language" im Kopf weglassen, die Flaggen erklaeren sich selbst (06.10.2026) */
.hd-lang:not(.mn-lang) .hl-t{display:none}

/* ==================== Yachtseite, finale Fassung (06.10.2026) ====================
   Aus den Konzepten 02 und 04 (Auswahl Lorenz, 06.10.2026), gebaut fuer alle
   rund 1.800 Yachten. Grundlage war eine Stichprobe von 88 Yachten:
   alle Fotos kommen als 16:9 (1280 oder 1920 breit), Namen haben 1 bis 17
   Zeichen, Galerien 2 bis 29 Bilder, 0 bis 8 eigene Revierseiten.
   Diese Regeln stehen bewusst am Ende und loesen die aelteren
   Yachtseiten-Regeln weiter oben ab. */

/* Heldenbild randlos (Lorenz, 06.10.2026: "ganz fullsize", keine
   unscharfen Streifen links und rechts mehr). Das Foto fuellt die Flaeche
   immer ganz. Ist das Fenster flacher als 16:9, wird oben und unten etwas
   abgeschnitten, unten mehr als oben, damit Masten moeglichst ganz
   bleiben. Das ganze Foto zeigt die Bildlupe. Kein Abdunkeln. */
:root{--yd-h:min(100svh,56.25vw)}
.yd-hero-fix>.yd-hero-bild{object-fit:cover;object-position:50% 35%}
.yd-hero-fix>.yd-hero-grund{display:none}
@media (max-width:900px){ :root{--yd-h:56.25vw} }
/* Am Telefon waere 16:9 nur 220 px hoch. Dort fuellt das Foto ein Quadrat;
   beschnitten werden nur die Seiten, Masten bleiben ganz. Das ganze Foto
   zeigt die Bildlupe beim Antippen. */
@media (max-width:700px){
  :root{--yd-h:min(100vw,72svh)}
  .yd-hero-fix>.yd-hero-bild{object-position:50% 50%}
}
.yd-hero{background:#041A29}

/* Name, Angaben und Preisbox ueber dem unteren Bildrand (Konzept 02) */
.yd-hero-b{display:block;position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:0 0 clamp(28px,5.5vh,60px);background:none;color:#fff}
.yd-hero-in{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px}
.yd-hero-t{flex:1 1 auto;min-width:0}
/* Groesse nach Namenslaenge: --zeichen aus der Vorlage, Breite des
   Textraums geteilt durch die Zeichen. Roboto 300 in Versalien braucht
   etwa 0,66 em je Zeichen. */
.yd-hero-b .yd-gross{
  margin:0;color:#fff;font-weight:300;letter-spacing:.01em;line-height:.92;text-wrap:balance;
  font-size:min(clamp(56px,10.5vw,184px),calc((min(1180px,92vw) - 400px) / var(--zeichen) / .66));
  text-shadow:0 0 1px rgba(4,24,38,.7),0 1px 4px rgba(4,24,38,.55),0 4px 28px rgba(4,24,38,.45);
}
/* Am Rechner steht die Infozeile im selben Milchglas wie die Preisbox:
   kleine weisse Schrift war auf hellen Fotos (heller Rumpf, Dunst) nicht
   lesbar, und ein Schatten allein reicht bei 12 px nicht. */
@media (min-width:901px){
  .yd-hero-b .yd-info{display:inline-block;max-width:100%;padding:11px 18px;border-radius:12px;color:var(--navy);text-shadow:none;
    background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.75);
    backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
    box-shadow:0 14px 40px rgba(4,24,38,.16)}
  .yd-hero-b .yd-info-i span::before{background:rgba(7,55,85,.25)}
}
/* Angaben unter dem Namen zwischen zwei feinen Linien */
.yd-info{overflow:hidden;margin:clamp(16px,2.4vh,26px) 0 0;padding:12px 0;
  border-top:1px solid rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.6);
  font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;
  text-shadow:0 0 1px rgba(4,24,38,.7),0 1px 3px rgba(4,24,38,.65),0 2px 12px rgba(4,24,38,.5)}
/* Jeder Eintrag traegt vorn einen Strich; die Striche am Zeilenanfang
   liegen links ausserhalb und werden abgeschnitten */
.yd-info-i{display:flex;flex-wrap:wrap;row-gap:6px;margin-left:-33px}
.yd-info-i span{display:inline-flex;align-items:center}
.yd-info-i span::before{content:"";flex:none;width:1px;height:12px;margin:0 16px;background:rgba(255,255,255,.6)}
/* Glaeserne Preisbox: helles Milchglas, Text in Navy, damit sie auf jedem
   Foto lesbar ist, ob Nacht oder heller Himmel */
.yd-glas{flex:0 0 auto;width:340px;padding:22px 22px 20px;border-radius:16px;color:var(--navy);
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 24px 60px rgba(4,24,38,.22)}
.yd-glas .yd-preis b{display:block;font-size:30px;font-weight:400;line-height:1.15;color:var(--navy);font-variant-numeric:tabular-nums}
.yd-glas .yd-preis span{display:block;margin-top:4px;font-size:13px;color:var(--soft)}
.yd-glas .btn{width:100%;justify-content:center;margin-top:16px}

/* Telefon und Tablet: Name auf dem Foto, Angaben und Preisbox darunter
   auf dem dunklen Band, das sich ueber das stehende Foto schiebt */
@media (max-width:900px){
  .yd-hero{height:auto;padding-top:var(--yd-h)}
  .yd-hero-b{position:relative;padding:20px 0 30px;background:#041A29}
  .yd-hero-in{flex-direction:column;align-items:stretch;gap:20px}
  .yd-hero-b .yd-gross{position:absolute;left:4vw;right:4vw;bottom:calc(100% + 16px);
    font-size:min(64px,calc((92vw) / var(--wort) / .66))}
  .yd-info{margin:0;border-color:rgba(255,255,255,.22);text-shadow:none;font-size:11.5px;letter-spacing:.14em}
  .yd-info-i{margin-left:-25px}
  .yd-info-i span::before{background:rgba(255,255,255,.3);margin:0 12px}
  .yd-glas{width:auto;color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);
    backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding:18px}
  .yd-glas .yd-preis b{color:#fff;font-size:26px}
  .yd-glas .yd-preis span{color:rgba(232,242,248,.72)}
}

/* Kopfzeile (Konzept 04): ueber dem Foto eine feine Linie, beim Scrollen
   Milchglas. Die Logotafel bleibt (Entscheidung 11.09.2026). */
body[data-seite="yacht"] #hd::after{content:"";position:absolute;z-index:-1;left:50%;bottom:0;transform:translateX(-50%);
  width:min(1320px,94vw);height:1px;background:rgba(255,255,255,.42);transition:opacity .45s}
body[data-seite="yacht"] #hd.on::after,body[data-seite="yacht"][data-kopf="fest"] #hd::after{opacity:0}
/* Heller Bildgrund hinter dem Namen (gemessen in js/main.js): Name in Navy
   mit hellem Hof statt Weiss mit Schatten. Das Foto bleibt unveraendert. */
.yd-hell .yd-hero-b .yd-gross{color:var(--navy);text-shadow:0 0 1px rgba(255,255,255,.7),0 1px 3px rgba(255,255,255,.6),0 2px 22px rgba(255,255,255,.55)}

/* Eckdaten (Konzept 04): eine ruhige Reihe, getrennt durch Haarlinien */
.yd-fakt{padding-block:clamp(34px,6vh,64px);border-bottom:1px solid var(--line)}
.yd-eck{display:flex;flex-wrap:wrap;justify-content:center;gap:0;width:100%;max-width:1100px;margin:0 auto}
.yd-eck>div{flex:1 1 0;min-width:0;padding:6px clamp(6px,1vw,16px);text-align:center;border-left:1px solid var(--line)}
.yd-eck>div:first-child{border-left:0}
.yd-eck b{font-size:clamp(24px,2.2vw,34px);font-weight:300;line-height:1.1;color:var(--navy);white-space:nowrap}
.yd-eck span{font-size:10.5px;letter-spacing:.18em;margin-top:8px}
@media (max-width:900px){
  .yd-eck{row-gap:18px}
  .yd-eck>div{flex:0 0 calc(100% / var(--sp,4));border-left:0;padding:4px 2px}
  .yd-eck b{font-size:clamp(21px,5.6vw,28px)}
}

/* Galerie: unveraendert der Slider vom 05.10.2026, nur mit Abstand oben */
.yd-gal{padding-top:var(--abschnitt)}

/* Ausstattung nach Bereichen, ohne Rahmen, ohne Kappung */
.yd-klein{font-size:clamp(21px,2.6vw,27px);margin-bottom:18px}
.yd-aus{padding-bottom:var(--abschnitt)}
.yd-aus-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:26px clamp(20px,3vw,40px);align-items:start}
.yd-aus-g h3{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:var(--gold-deep);margin:0 0 8px}
.yd-aus-g ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.yd-aus-g li{padding:7px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.45;color:var(--ink)}
@media (max-width:520px){ .yd-aus-g{grid-template-columns:1fr 1fr;gap:22px 16px} .yd-aus-g li{font-size:14px} }

/* Crew ebenfalls ohne Kacheln */
.yd-crew-l{background:none;border:0;border-radius:0;gap:0 32px}
.yd-crew-l li{background:none;box-shadow:none;padding:12px 0;border-bottom:1px solid var(--line)}

/* Reviere als Karten (Konzept 02) */
.yd-rev{background:#041A29;color:#fff;padding:clamp(56px,10vh,110px) 0}
.yd-rev .kick{color:#8FD3F0;margin-bottom:10px}
.yd-rev h2{color:#fff;font-size:clamp(26px,3vw,40px);margin:0 0 clamp(20px,3vh,30px)}
.yd-rev-spur{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.yd-rev-k{display:block;border-radius:var(--r-card);overflow:hidden;background:#0A2A40;color:#fff;transition:transform .45s var(--ease)}
.yd-rev-k:hover{transform:translateY(-4px)}
.yd-rev-b{display:block;aspect-ratio:4/5;overflow:hidden;background:#0A2A40}
.yd-rev-b img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.yd-rev-k:hover .yd-rev-b img{transform:scale(1.04)}
.yd-rev-t{display:block;padding:14px 16px 16px}
.yd-rev-t b{display:block;font-size:19px;font-weight:400;line-height:1.25}
.yd-rev-t span{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:rgba(232,242,248,.72)}
@media (max-width:900px){
  .yd-rev-spur{display:flex;width:auto;margin:0;padding:0 4vw 6px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-left:4vw;scrollbar-width:none;overscroll-behavior-x:contain}
  .yd-rev-spur::-webkit-scrollbar{display:none}
  .yd-rev-k{flex:0 0 min(70vw,300px);scroll-snap-align:start}
}

/* Ansprechpartnerin (Konzept 02): Foto der Yacht links, Nancy rechts */
.yd-nancy{display:grid;grid-template-columns:1fr 1fr;min-height:min(80svh,760px);background:var(--paper)}
.yd-nancy-b{position:relative;overflow:hidden;background:var(--mist)}
.yd-nancy-b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yd-nancy-t{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(40px,7vw,96px)}
.yd-nancy-p{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--mist);margin-bottom:22px}
.yd-nancy-t .kick{margin-bottom:10px}
.yd-nancy-satz{max-width:24em;margin:0 0 26px;font-size:clamp(21px,2.1vw,28px);font-weight:300;line-height:1.4;color:var(--navy)}
.yd-wege-k{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.yd-wege-k a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;
  font-size:14px;color:var(--navy);transition:border-color .25s,color .25s}
.yd-wege-k a:hover{border-color:var(--azure);color:var(--azure-deep)}
@media (max-width:800px){
  .yd-nancy{grid-template-columns:1fr;min-height:0}
  .yd-nancy-b{aspect-ratio:16/9}
  .yd-nancy-t{padding:36px 4vw calc(56px + env(safe-area-inset-bottom,0px))}
}

/* ---------- Yachtseite: Saisons (11.10.2026) ----------
   Knappe Liste unter dem Beschreibungssatz: Saison, Gebiete, Preis. Die
   Ueberschrift wie die Bereiche der Ausstattung, Haarlinien statt Rahmen.
   Am Telefon steht jede Zeile untereinander. */
.yd-sai{margin:24px 0 18px}
.yd-sai h3{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:var(--gold-deep);margin:0 0 8px}
.yd-sai ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.yd-sai li{display:grid;grid-template-columns:6em minmax(0,1fr) auto;gap:2px 24px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.45;color:var(--ink)}
.yd-sai li b{font-weight:500;color:var(--navy)}
.yd-sai-p{color:var(--soft);text-align:right;font-size:13.5px;max-width:19em}
@media (max-width:600px){
  .yd-sai li{grid-template-columns:1fr;padding:10px 0}
  .yd-sai-p{white-space:normal;text-align:left}
}

/* Preiszusatz in der glaesernen Preisbox: "zzgl. APA und ggf. lokale
   Steuer" darf umbrechen, die Zeilen bleiben dabei eng beieinander */
.yd-glas .yd-preis span{line-height:1.4}

/* ---------- Yachtsuche /fleet: lange Ueberschrift (11.10.2026) ----------
   Nur die Hauptseite (.fl-start), die Bauartseiten behalten ihre Groesse.
   Etwas kleiner und breiter, damit der Satz in drei Zeilen steht statt in
   fuenf; darunter der Untertitel. */
@media (min-width:901px){
  .fl-start h1{max-width:19em;font-size:clamp(30px,3.2vw,44px);line-height:1.14}
}
.fl-start p.lead{max-width:38em}

/* ---------- Blog (11.10.2026) ----------
   Uebersicht /blog und Beitraege /blog/<slug> aus worker/blogseite.js.
   Kein Foto hinter der Kopfzeile (body data-kopf="fest"), deshalb beginnt
   der Inhalt unter dem Balken samt Logotafel. Bilder ohne Verlauf und ohne
   Abdunkeln, nur abgerundet. Eigene Klassen mit "bl-". */

/* Kopfbereich der Uebersicht */
.bl-kopf{padding:clamp(124px,17vh,172px) 0 clamp(30px,5vh,52px)}
.bl-kopf .kick{margin-bottom:12px}
.bl-kopf h1{font-size:clamp(32px,4.2vw,54px);font-weight:300;line-height:1.08;max-width:16em;text-wrap:balance}
.bl-lead{margin-top:16px;max-width:40em;font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:var(--soft);text-wrap:pretty}

/* Karten: 3 Spalten am Rechner, 2 am Tablet, 1 am Telefon */
.bl-liste{padding-bottom:clamp(64px,11vh,128px)}
.bl-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,5vh,52px) clamp(20px,2.4vw,32px)}
@media (max-width:1000px){ .bl-raster{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .bl-raster{grid-template-columns:minmax(0,1fr);gap:40px} }

.bl-karte{position:relative;display:flex;flex-direction:column;min-width:0}
.bl-bild{aspect-ratio:3/2;border-radius:var(--r-card);overflow:hidden;background:var(--mist)}
.bl-bild img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.bl-karte:hover .bl-bild img{transform:scale(1.04)}
/* Ohne Beitragsbild: ruhige Flaeche mit einem Strich im Logo-Blau */
.bl-ohne{display:grid;place-items:center}
.bl-ohne::before{content:"";width:56px;height:2px;border-radius:2px;background:var(--azure)}
.bl-meta{margin-top:16px;font-size:13px;line-height:1.5;color:var(--soft)}
.bl-meta span{font-weight:500;color:var(--azure-deep)}
.bl-titel{margin-top:8px;font-size:clamp(20px,1.7vw,23px);font-weight:400;line-height:1.25;letter-spacing:0;text-wrap:pretty}
.bl-titel a{color:var(--navy);transition:color .3s}
/* Der Verweis des Titels deckt die ganze Karte ab */
.bl-titel a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-card)}
.bl-titel a:focus-visible{outline:none}
.bl-titel a:focus-visible::after{outline:2px solid var(--azure);outline-offset:6px}
.bl-karte:hover .bl-titel a{color:var(--azure-deep)}
.bl-beschr{margin-top:10px;font-size:15px;line-height:1.6;color:var(--soft);overflow-wrap:break-word}
.bl-weiter{align-self:flex-start;margin-top:auto;padding-top:14px;font-size:12.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--azure-deep);text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:5px;transition:text-decoration-color .3s}
.bl-karte:hover .bl-weiter{text-decoration-color:currentColor}

/* Beitrag: eine Lesespalte von rund 68 Zeichen, das Titelbild breiter */
.bl-spalte{width:min(37rem,92vw);margin-inline:auto}
.bl-beitrag-kopf{padding-top:clamp(118px,16vh,164px)}
.bl-krumen ol{display:flex;list-style:none;margin:0 0 clamp(22px,3.5vh,34px);padding:0;font-size:13px;line-height:1.5;color:var(--soft)}
.bl-krumen li{flex:none;white-space:nowrap}
.bl-krumen li + li::before{content:"/";margin:0 .6em;color:var(--soft);opacity:.55}
.bl-krumen li:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.bl-krumen a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;transition:color .3s,text-decoration-color .3s}
.bl-krumen a:hover{color:var(--azure-deep);text-decoration-color:currentColor}
.bl-beitrag-kopf .kick{margin-bottom:12px}
.bl-beitrag-kopf h1{font-size:clamp(30px,3.8vw,48px);font-weight:300;line-height:1.1;text-wrap:balance;overflow-wrap:break-word}
.bl-zeile{margin-top:16px;font-size:14px;color:var(--soft)}
.bl-titelbild{width:min(60rem,92vw);margin:clamp(28px,4.5vh,44px) auto 0}
.bl-titelbild img{width:100%;height:auto;max-height:min(72svh,640px);object-fit:cover;border-radius:var(--r-card);background:var(--mist)}

/* Lesetypografie */
.bl-text{padding:clamp(30px,5vh,52px) 0 clamp(48px,8vh,88px);font-size:18px;line-height:1.75;color:var(--ink);overflow-wrap:break-word}
.bl-text > :first-child{margin-top:0}
.bl-text p,.bl-text ul,.bl-text ol,.bl-text blockquote,.bl-text table{margin:0 0 1.15em}
.bl-text h2{margin:1.9em 0 .55em;font-size:clamp(23px,2.3vw,28px);font-weight:300;line-height:1.22}
.bl-text h3{margin:1.6em 0 .45em;font-size:19px;font-weight:500;line-height:1.35;letter-spacing:0}
.bl-text h2 + h3{margin-top:.4em}
.bl-text strong{font-weight:500;color:var(--navy)}
.bl-text a{color:var(--azure-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.bl-text a:hover{color:var(--navy)}
.bl-text ul,.bl-text ol{padding-left:1.35em}
.bl-text li{margin-bottom:.45em;padding-left:.2em}
.bl-text li::marker{color:var(--azure-deep)}
.bl-text ol li::marker{font-weight:500}
.bl-text figure{margin:1.9em 0}
.bl-text figure img{width:100%;height:auto;border-radius:var(--r-card);background:var(--mist)}
.bl-text figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--soft)}
.bl-text blockquote{margin-block:1.6em;padding:4px 0 4px 1.2em;border-left:2px solid var(--azure);
  font-size:clamp(19px,1.8vw,22px);font-weight:300;line-height:1.55;color:var(--navy)}
.bl-text blockquote p:last-child{margin-bottom:0}
/* Breite Tabellen scrollen in sich, die Seite bleibt ruhig */
.bl-text table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:16px;line-height:1.5}
.bl-text th,.bl-text td{padding:10px 18px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.bl-text th{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
@media (max-width:640px){
  .bl-text{font-size:17px;line-height:1.7;hyphens:auto}
  .bl-text figure{margin:1.6em 0}
}

/* Schluss: Anfrage, ruhig auf --mist */
.bl-schluss{width:min(60rem,92vw);margin:0 auto;padding:clamp(30px,5vw,56px);border-radius:var(--r-card);background:var(--mist)}
.bl-schluss h2{font-size:clamp(23px,2.6vw,32px);font-weight:300;line-height:1.2}
.bl-schluss p{margin:10px 0 24px;max-width:34em;font-size:16.5px;line-height:1.65;color:var(--soft)}
.bl-schluss .btn-navy{background:var(--paper)}
@media (max-width:480px){
  .bl-schluss .jy-row{flex-direction:column;align-items:stretch}
  .bl-schluss .btn{justify-content:center}
}

/* Weitere Beitraege */
.bl-weitere{padding:clamp(56px,9vh,96px) 0 clamp(64px,11vh,128px)}
.bl-weitere > h2{margin-bottom:clamp(22px,3.5vh,34px);font-size:clamp(23px,2.6vw,32px);font-weight:300}

/* ---------- Korrekturen nach der Gegenpruefung (11.10.2026) ---------- */
/* Preiszusatz unter dem Kartenpreis (Yachtsuche, Bauarten, Reviere) */
.y-price span{display:block;margin-top:2px;font-size:11.5px;line-height:1.4;color:var(--soft)}
/* Der Scroll-Anker lag am Telefon unter .hero-body (z-index 1) und liess
   sich nicht antippen */
.hero-cue{z-index:2}
/* Mobiles Menue in flachen Fenstern (Telefon quer): unter der Kopfleiste
   beginnen und scrollbar, sonst lagen die ersten Punkte unter der Leiste
   und der Sprachschalter ausserhalb */
@media (max-height:560px){
  #menu{align-items:flex-start;overflow-y:auto;padding:116px 0 24px}
  #menu nav a{font-size:clamp(22px,3.4vw,30px);line-height:1.2}
  .mn-in{gap:28px}
}
/* Unter 1061 px ist die Navigation ausgeblendet; ohne sie rutschten
   Anfrage-Knopf und Burger in die mittlere Spalte statt an den Rand */
@media (max-width:1060px){ .hd-right{grid-column:3} }

/* ---------- Rueckmeldung 19.10.2026 ---------- */
/* Startbild: die kleine Zeile ueber der Ueberschrift und "mieten" gingen vor
   dem weissen Yachtrumpf unter. Das Foto bleibt unangetastet, keine
   Abdunklung. Lesbarkeit nur ueber Schatten an den Buchstaben: ein enger
   dunkler Rand zieht die Kontur gegen Weiss, ein weicher Hof traegt sie.
   Die kleine Zeile dazu in reinem Weiss und etwas groesser. Die erste
   Zeile der Ueberschrift im kraeftigeren Cormorant-Schnitt 600, weil die
   Haarstriche von 500 auf Weiss verschwinden. "Freiheit erleben." bleibt
   kursiv in 500 (einen kursiven 600er gibt es nicht, der Browser wuerde
   ihn kuenstlich fetten) und behaelt Blau und Schatten aus .hero-blau. */
.hero-body .kick{color:#fff;font-size:13px;letter-spacing:.18em;
  text-shadow:0 0 1px rgba(4,24,38,.95),0 0 2px rgba(4,24,38,.85),0 1px 3px rgba(4,24,38,.8),0 2px 12px rgba(4,24,38,.6),0 0 26px rgba(4,24,38,.4)}
.hero-h{font-weight:600;
  text-shadow:0 0 1px rgba(4,24,38,.95),0 0 2px rgba(4,24,38,.9),0 0 4px rgba(4,24,38,.7),0 1px 8px rgba(4,24,38,.6),0 3px 22px rgba(4,24,38,.55),0 0 54px rgba(4,24,38,.4)}
.hero-h em{font-weight:500}
@media (max-width:600px){ .hero-body .kick{font-size:11.5px;letter-spacing:.16em} }
/* Die kleine Zeile verschwand dort, wo sie ueber den weissen Rumpf lief
   (Lorenz, 19.10.2026; Milchglas dahinter gefiel nicht). Deshalb zweizeilig:
   so endet sie auf dem dunklen Wasser vor der Yacht. Am Telefon liegt die
   Yacht hinter dem oberen Teil des Textes, dort steht die Zeile unter der
   Ueberschrift, wo wieder freies Wasser ist. */
.hero-body .kick{font-weight:500;line-height:1.7;font-size:13px;letter-spacing:.18em}
.hero-body .kick .k1,.hero-body .kick .k2{display:block}
@media (max-width:600px){
  .hero-body{display:flex;flex-direction:column}
  .hero-body .hero-h{order:1}
  .hero-body .kick{order:2;margin:14px 0 0;font-size:11.5px;letter-spacing:.16em}
  .hero-body .hero-cta{order:3}
}
/* Scroll-Anker "Entdecken": Schrift und Anker weiss und kraeftiger, beide mit
   Schatten. Die Strichstaerken im SVG gelten in Einheiten der viewBox (24 x 74),
   CSS ueberschreibt die Attribute im Markup. Hover beschleunigt weiter die
   Animation (Regel oben bei .cue-anchor). */
.hero-cue{color:#fff;font-weight:500;
  text-shadow:0 0 1px rgba(4,24,38,.9),0 1px 3px rgba(4,24,38,.75),0 2px 12px rgba(4,24,38,.55)}
.cue-anchor{color:#fff;filter:drop-shadow(0 0 1px rgba(4,24,38,.85)) drop-shadow(0 1px 4px rgba(4,24,38,.55))}
.cue-chain{stroke-width:1.5;opacity:1}
.cue-hook{stroke-width:2}
/* "Unser Service" klebte direkt an der Bildkante darueber */
#activities{padding-top:20px}
/* FAQ der Start- und der Kontaktseite: die ganze Liste steckt in <details>
   und startet eingeklappt. Der Knopf ist das <summary> im Stil der
   Linienknoepfe, ohne Pfeil und ohne das Dreieck des Browsers; sein Text
   wechselt mit [open]. */
.faq-auf{list-style:none;cursor:pointer;user-select:none;-webkit-user-select:none}
.faq-auf::-webkit-details-marker{display:none}
.faq-auf::marker{content:""}
.faq-alle[open] .faq-zeigen,.faq-alle:not([open]) .faq-verbergen{display:none}
.faq-alle[open] > .faq-auf{margin-bottom:22px}
.faq-liste{border-top:1px solid var(--line)}


/* ---------- Seitenkopf mit Nancys Fotos (19.10.2026) ----------
   Yachtsuche (Bug bei Sonnenuntergang) und Kontakt (Katamarane vor den
   Bahamas). Ab 901 px liegt das Foto ueber die volle Breite, unverdunkelt
   und ungefiltert. Der Text steht dort, wo das Bild ruhig ist: bei der Yacht
   oben links ueber dem Wasser, beim Kontakt unten links neben den Booten.
   Lesbar durch Buchstabenschatten. Bis 900 px Bild oben, Text darunter auf
   hellem Grund wie am Telefon, sonst laege der Text auf dem Deck.
   Ein geteilter Kopf (Text auf Navy, Foto daneben) war kurz live und ist
   verworfen. */
@media (min-width:901px){
  .sub-head.kopf-foto{min-height:max(460px,min(74vh,66vw,780px));padding-top:clamp(150px,20vh,200px)}
  .sub-head.kopf-foto::after{display:none}
  .sub-head.kopf-foto .bg img{filter:none}
  .sub-head.kopf-foto .kick{color:#fff}
  .sub-head.kopf-foto .kick,.sub-head.kopf-foto h1,.sub-head.kopf-foto p.lead{
    text-shadow:0 0 1px rgba(4,24,38,.85),0 1px 3px rgba(4,24,38,.6),0 2px 18px rgba(4,24,38,.5)
  }
  .sub-head.kopf-foto p.lead{color:#fff;line-height:1.5;text-wrap:pretty}

  /* Yachtsuche: das kurze Wort gross, Nancys Satz eine Stufe groesser */
  .sub-head.fl-start.kopf-foto h1{font-size:clamp(40px,4.6vw,68px);line-height:1.04;max-width:none}
  .sub-head.fl-start.kopf-foto p.lead{font-size:clamp(17px,1.45vw,21px);max-width:24em}
  .fl-start.kopf-foto .bg img{object-position:50% 0%}

  /* Kontakt: Text unten links. Die Ueberschrift bricht fest in drei Zeilen
     (br.br-breit im HTML), so bleibt die letzte kurz und laeuft nicht in den
     linken Katamaran; laengere Zeilen kreuzen hoechstens einen Mast. Der
     Untertitel endet vor den Booten, sie beginnen bei rund 39 % der
     Bildbreite. */
  .sub-head.kopf-kontakt{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(44px,7vh,76px)}
  .sub-head.kopf-kontakt .wrap{width:min(1180px,92vw)}
  .sub-head.kopf-kontakt h1{font-size:clamp(34px,3.1vw,50px);line-height:1.08;max-width:none}
  .sub-head.kopf-kontakt p.lead{font-size:clamp(16.5px,1.25vw,19px);max-width:calc(39vw - (100vw - min(1180px,92vw)) / 2 - 20px)}
  .kopf-kontakt .bg img{object-position:50% 80%}

  /* Kopfleiste: auf der Yachtsuche liegt sie auf cremefarbenem Abendhimmel,
     dort Navy statt Weiss (wie die Schrift der Logotafel), solange sie
     durchsichtig ist. Beim Kontakt liegt sie auf Inseln und Wasser, dort
     bleibt sie weiss mit Buchstabenschatten (unten). */
  body:has(.fl-start.kopf-foto) #hd:not(.on) .hd-nav a,
  body:has(.fl-start.kopf-foto) #hd:not(.on) .hd-wa,
  body:has(.fl-start.kopf-foto) #hd:not(.on) .wa-no,
  body:has(.fl-start.kopf-foto) #hd:not(.on) .hl-de .hl-seite:last-child,
  body:has(.fl-start.kopf-foto) #hd:not(.on) .hl-en .hl-seite:first-child{color:var(--navy);text-shadow:none}
  body:has(.fl-start.kopf-foto) #hd:not(.on) .hd-nav a::after{background:var(--azure)}
  body:has(.fl-start.kopf-foto) #hd:not(.on) .hd-wa,
  body:has(.fl-start.kopf-foto) #hd:not(.on) .hl-sw{border-color:rgba(7,55,85,.28)}
  body:has(.fl-start.kopf-foto) #hd:not(.on) #burger span{background:var(--navy);box-shadow:none}
  body:has(.fl-start.kopf-foto) #hd:not(.on) #burger{filter:none}
}
/* Ab 1921 px waechst die Kopfhoehe mit der Breite (Seitenverhaeltnis wie
   bei 1920 x 780), sonst schnitte das Bild auf 2560 px den Bug bzw. die
   Katamarane ab. Text wandert relativ zum Foto mit. Beim Kontakt rueckt der
   Block in den Wasserstreifen zwischen den beiden Bootsgruppen, dort darf
   der Untertitel bis vor die Masten der vorderen Boote laufen. */
@media (min-width:1921px){
  .sub-head.kopf-foto{min-height:min(40.625vw,74vh)}
  .sub-head.fl-start.kopf-foto{padding-top:10.4vw}
  .sub-head.kopf-kontakt{padding-bottom:12.7vw}
  .sub-head.kopf-kontakt p.lead{max-width:calc(43.75vw - (100vw - 1180px) / 2 - 24px)}
}
/* Zwischen 1600 und 1920 px rueckt der Kontakt-Text etwas hoeher, sonst
   stuende das Komma nach "beantwortet," knapp ueber dem Bimini des linken
   Katamarans. */
@media (min-width:1600px) and (max-width:1920px){
  .sub-head.kopf-kontakt{padding-bottom:clamp(76px,5.6vw,108px)}
}
@media (min-width:601px) and (max-width:900px){
  .sub-head.kopf-foto{padding:0;background:var(--sky);color:var(--navy)}
  .sub-head.kopf-foto .bg{position:relative;height:clamp(300px,52vw,460px)}
  .sub-head.kopf-foto::after{display:none}
  .sub-head.kopf-foto .bg img{filter:none}
  .sub-head.kopf-foto .wrap{padding:30px 0 36px}
  .sub-head.kopf-foto .kick{color:var(--gold-deep)}
  .sub-head.kopf-foto h1{color:var(--navy);text-shadow:none}
  .sub-head.kopf-foto .lead,.sub-head.kopf-foto p.lead{color:var(--soft);text-shadow:none;margin-top:12px}
  .sub-head.fl-start.kopf-foto h1{font-size:clamp(36px,5.4vw,46px)}
}
@media (max-width:900px){
  .kopf-foto .br-breit{display:none}
  .sub-head.kopf-foto p.lead{max-width:36em;text-wrap:pretty}
  .fl-start.kopf-foto .bg img{object-position:60% 60%}
  .kopf-kontakt .bg img{object-position:50% 75%}
  /* Reviere (23.10.2026): weite Landschaft statt der Katamarane im
     Vordergrund. Ausschnitt oben links, 35 % groesser gezogen (ohne
     transform, damit iOS das Bild nicht als Ebene verkleinert rastert);
     am Telefon fallen die Boote heraus, am Tablet stehen sie klein im
     Hintergrund. Am Rechner bleibt der Ausschnitt wie bei Kontakt. */
  .kopf-reviere .bg{overflow:hidden}
  .sub-head.kopf-reviere .bg img{width:135%;height:135%;max-width:none;object-position:0% 0%}
}
/* Kopfleiste ueber dem Foto: Navigation, Nummer, nicht gewaehlte Sprache
   (weiss statt grau) und Menuezeichen mit Buchstabenschatten. Sobald die
   Leiste fest wird (#hd.on), entfaellt er. Auf der Yachtsuche gilt ab 901 px
   die Navy-Regel oben. */
body:has(.kopf-foto) #hd:not(.on) .hd-nav a,
body:has(.kopf-foto) #hd:not(.on) .wa-no,
body:has(.kopf-foto) #hd:not(.on) .hl-de .hl-seite:last-child,
body:has(.kopf-foto) #hd:not(.on) .hl-en .hl-seite:first-child{
  text-shadow:0 0 1px rgba(4,24,38,.8),0 1px 3px rgba(4,24,38,.6),0 1px 10px rgba(4,24,38,.45)
}
body:has(.kopf-foto) #hd:not(.on) .hl-de .hl-seite:last-child,
body:has(.kopf-foto) #hd:not(.on) .hl-en .hl-seite:first-child{color:#fff}
body:has(.kopf-foto) #hd:not(.on) #burger{filter:drop-shadow(0 1px 2px rgba(4,24,38,.7)) drop-shadow(0 0 6px rgba(4,24,38,.35))}

/* ---------- Yacht-Suche, Frage 5 "Wohin soll es gehen?" (23.10.2026) ----------
   Reviere als Kacheln mit Foto, Name und Saison, im Stil der Antwortkarten.
   Am Rechner zwei Reihen zu sieben: oben "Ohne Praeferenz" und das
   Mittelmeer (Zwischenzeile nur ueber den Mittelmeer-Kacheln), unten
   "Weltweit". Bis 900 px kompakte Zeilen mit kleinem Foto in zwei Spalten.
   Passt die Saison zur Reisezeit aus Frage 4, steht sie blau mit Punkt
   (.passt). Fotos unverdunkelt. */
.jy-wunsch-weiter{margin:-10px 0 22px}
.jy-rw-legende{margin:-16px 0 18px}
.jy-rw{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.jy-rw-lbl{grid-column:1/-1;margin:12px 0 0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.jy-rw-lbl-mm{grid-column:2/-1;margin-top:0}
.jy-rw-ohne{grid-column:1;grid-row:2}
.jy-rw-k{
  display:flex;flex-direction:column;text-align:left;padding:5px 5px 12px;border-radius:14px;
  border:1px solid rgba(7,55,85,.14);background:#fff;color:var(--navy);
  transition:border-color .3s,box-shadow .3s,transform .3s var(--ease);
}
.jy-rw-k:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 10px 24px rgba(7,55,85,.1)}
.jy-rw-k.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 10px 24px rgba(0,157,218,.14)}
.jy-rw-bild{display:block;position:relative;aspect-ratio:3/2;border-radius:10px;overflow:hidden;background:var(--sky)}
.jy-rw-bild img{display:block;width:100%;height:100%;object-fit:cover}
.jy-rw-text{display:block;padding:10px 7px 0}
.jy-rw-k b{display:block;font-weight:500;font-size:14px;line-height:1.25;color:var(--navy)}
.jy-rw-zeit{display:block;margin-top:4px;font-size:11.5px;line-height:1.35;color:var(--soft)}
.jy-rw-k.passt .jy-rw-zeit{color:var(--gold-deep)}
.jy-rw-k.passt .jy-rw-zeit::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 1px 0;border-radius:50%;background:var(--gold);vertical-align:middle}
/* "Ohne Praeferenz": statt Foto eine helle Flaeche mit Kompass */
.jy-rw-ohne .jy-rw-bild{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--sky),#fff);color:var(--gold-deep)}
.jy-rw-ohne .jy-rw-bild svg{width:46%;height:auto}
/* ausgewaehlt: Haken oben rechts im Bild */
.jy-rw-k.on .jy-rw-bild::after{
  content:"";position:absolute;top:7px;right:7px;width:22px;height:22px;border-radius:50%;
  background:var(--gold) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>") center/14px no-repeat;
  box-shadow:0 2px 6px rgba(4,24,38,.25);
}
@media (max-width:900px){
  .jy-rw{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .jy-rw-lbl,.jy-rw-lbl-mm{grid-column:1/-1}
  .jy-rw-lbl-mm{margin-top:10px}
  .jy-rw-ohne{grid-column:1/-1;grid-row:auto;order:-1}
  .jy-rw-fern:last-child{grid-column:1/-1}
  .jy-rw-k{flex-direction:row;align-items:center;gap:9px;padding:5px 7px 5px 5px}
  .jy-rw-k:hover{transform:none}
  .jy-rw-bild{width:42px;flex:none;aspect-ratio:1/1;border-radius:8px}
  .jy-rw-text{padding:0;min-width:0}
  .jy-rw-k b{font-size:13.5px}
  .jy-rw-zeit{margin-top:2px;font-size:10.5px;letter-spacing:-.005em}
  .jy-rw-k.on .jy-rw-bild::after{top:50%;right:auto;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;background-size:12px}
}
/* Was unten noch folgt, blendet am unteren Rand der Buehne aus (wie oben
   unter Zurueck und Schliessen). Am Ende des Inhalts liegt dort nur der
   leere Innenabstand, es wird also nichts verschluckt. */
.jy-stage{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 76px,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 76px,#000 calc(100% - 34px),transparent 100%);
}

/* ---------- Startbild am Telefon: zweite Zeile lesbar (23.10.2026) ----------
   "Freiheit erleben." ging am Handy vor dem weissen Rumpf der Yacht unter.
   Ursache: Am Telefon steht der Text unten, das Foto ist auf die Hoehe
   eingepasst. Je niedriger die sichtbare Flaeche (Adress- und Werkzeugleiste
   des Browsers ziehen 100 bis 200 px ab), desto hoeher rutscht die Zeile im
   Foto, bis auf den Rumpf. Jetzt ist das Foto am Telefon mindestens 225 %
   der Bildschirmbreite hoch und unten verankert: Jedes Telefon zeigt damit
   denselben Ausschnitt wie ein hohes ohne Leisten (390 x 844), oben faellt
   je nach Leiste etwas Ufer weg, und hinter der Schrift liegt das dunkle
   Wasser unter der Yacht. Keine Abdunklung, nur ein anderer Ausschnitt.
   Dazu traegt die blaue Zeile dieselbe Kontur wie die erste (19.10.2026);
   Blau, Schnitt und Groesse bleiben. Tablet und Desktop unveraendert. */
@media (max-width:600px){
  #bgsea .sea-img{position:absolute;left:0;bottom:0;height:max(100%,225vw)}
  .hero-h em.hero-blau{text-shadow:0 0 1px rgba(4,24,38,.95),0 0 2px rgba(4,24,38,.9),0 0 4px rgba(4,24,38,.7),0 1px 8px rgba(4,24,38,.6),0 3px 22px rgba(4,24,38,.55),0 0 54px rgba(4,24,38,.4)}
}

/* ---------- Reviere-Uebersicht in zwei Gruppen (23.10.2026) ----------
   "Mittelmeer" mit Weg zur Vergleichsseite (/revier/mittelmeer) und
   "Weltweit" (nicht "Fernreisen": viele Gaeste wohnen nah an ihrem Revier,
   23.10.2026), dieselbe Gliederung wie in der Yacht-Suche. Die Zeile
   spannt sich ueber das ganze Raster. */
.dest-gruppe{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:-4px}
.dest-gruppe:not(:first-child){margin-top:24px}
.dest-gruppe-h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:500}
.dest-gruppe-a{font-size:14.5px;color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.dest-gruppe-a:hover{color:var(--gold-deep)}
/* Revierkarten auf der Mittelmeer-Seite: dieselben Karten wie auf der
   Reviere-Seite (h3 statt h2, gleich gross ueber .d-body h3) */
.rev-teile{padding:clamp(40px,6vh,64px) 0 clamp(34px,5vh,56px)}
.rev-teile h2{margin-bottom:24px}
.rev-teile .dest-grid{padding-bottom:0}

/* ---------- Datenschutz (23.10.2026) ----------
   Hinweis am Ort der Erhebung unter den Formularen, und der Anker
   #live-chat (Widerruf) rutscht nicht unter die feste Kopfleiste. */
.form-ds{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--soft)}
.form-ds a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.legal [id]{scroll-margin-top:110px}