/* Messink Yachting — modelblokken (Solaris). v6 — donkere site, schaalcorrectie, indelingsschakelaar, mobiele header, prijstabel. */

/* --- sitebrede reparatie: taalkeuze veroorzaakte horizontale scroll --- */
html,body{overflow-x:clip}
ul.lang_list_class,.lang_list_class{max-width:100%}

.msy{--a:#44B4AC;--ink:#F5F2EC;--mut:#AFB3B0;--line:rgba(255,255,255,.16);--surf:#1E1E21;
  font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);line-height:1.65;max-width:1120px;margin:0 auto;padding:0 4px}
.msy *{box-sizing:border-box}
.msy h2,.msy h3{font-family:Quicksand,sans-serif;font-weight:600;line-height:1.2;margin:0 0 .45em;color:#fff}
.msy h2{font-size:clamp(24px,3.2vw,34px)}
.msy h3{font-size:18px}
.msy p{margin:0 0 1em;font-size:15px}
.msy em{font-style:italic}
.msy .msy-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--a);margin:0 0 .9em;font-weight:700}
.msy .msy-lede{font-size:clamp(15px,1.7vw,18px);color:var(--mut);max-width:62ch}
.msy .msy-sec{padding:40px 0;border-top:1px solid var(--line)}
.msy .msy-sec:first-of-type{border-top:0}

/* bediening */
.msy .msy-ctrl{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 24px}
.msy .msy-ctrl label{display:inline-block;padding:9px 17px;border:1px solid var(--line);border-radius:25px;
  font-size:13px;font-weight:700;cursor:pointer;background:transparent;color:var(--ink);transition:.2s;user-select:none}
.msy .msy-ctrl label:hover{border-color:var(--a);color:var(--a)}
.msy input.msy-r{position:absolute!important;opacity:0!important;width:0!important;height:0!important;pointer-events:none}

/* podium */
.msy .msy-stage{position:relative!important;perspective:2200px;background:transparent;border-radius:14px;padding:24px 10px;overflow:hidden}
.msy .msy-deck{position:relative!important;transform-style:preserve-3d;transform:rotateX(34deg) rotateZ(-8deg);
  height:0!important;transition:transform .5s ease}
.msy .msy-sheet{position:absolute!important;margin:0!important;left:50%;top:50%;width:88%;
  transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .35s;
  box-shadow:0 24px 54px rgba(0,0,0,.55);background:#fff;border-radius:3px}
.msy .msy-sheet img{display:block!important;width:100%!important;height:auto!important;
  object-fit:contain;background:#fff;border-radius:3px}
.msy .msy-s1,.msy .msy-s2,.msy .msy-s3,.msy .msy-s3b{transform:translate(-50%,-50%)}
.msy .msy-r2:checked~.msy-stage .msy-s1,.msy .msy-r3:checked~.msy-stage .msy-s1,
.msy .msy-r4:checked~.msy-stage .msy-s1,.msy .msy-r5:checked~.msy-stage .msy-s1{transform:translate(-50%,-50%) translateY(-88%) translateZ(105px)}
.msy .msy-r2:checked~.msy-stage .msy-s3,.msy .msy-r3:checked~.msy-stage .msy-s3,
.msy .msy-r4:checked~.msy-stage .msy-s3,.msy .msy-r5:checked~.msy-stage .msy-s3,
.msy .msy-r2:checked~.msy-stage .msy-s3b,.msy .msy-r3:checked~.msy-stage .msy-s3b,
.msy .msy-r4:checked~.msy-stage .msy-s3b,.msy .msy-r5:checked~.msy-stage .msy-s3b{transform:translate(-50%,-50%) translateY(88%) translateZ(-105px)}
.msy .msy-r3:checked~.msy-stage .msy-s2,.msy .msy-r3:checked~.msy-stage .msy-s3,.msy .msy-r3:checked~.msy-stage .msy-s3b{opacity:.14}
.msy .msy-r4:checked~.msy-stage .msy-s1,.msy .msy-r4:checked~.msy-stage .msy-s3,.msy .msy-r4:checked~.msy-stage .msy-s3b{opacity:.14}
.msy .msy-r5:checked~.msy-stage .msy-s1,.msy .msy-r5:checked~.msy-stage .msy-s2{opacity:.14}
.msy .msy-r1:checked~.msy-ctrl label[for$="-1"],.msy .msy-r2:checked~.msy-ctrl label[for$="-2"],
.msy .msy-r3:checked~.msy-ctrl label[for$="-3"],.msy .msy-r4:checked~.msy-ctrl label[for$="-4"],
.msy .msy-r5:checked~.msy-ctrl label[for$="-5"]{background:var(--a);border-color:var(--a);color:#0C1620}
.msy .msy-tag{position:absolute;right:0;top:-30px;transform:translateZ(265px) rotateZ(8deg) rotateX(-34deg);
  transform-origin:right bottom;font-family:Quicksand,sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:#0C1620;background:var(--a);padding:5px 11px;border-radius:25px;white-space:nowrap}

/* kaarten met kenmerken */
.msy .msy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:28px}
.msy .msy-card{border-top:2px solid var(--a);padding-top:16px}
.msy .msy-card p{font-size:14px;color:var(--mut)}
.msy .msy-card ol{margin:12px 0 0;padding:0;list-style:none;counter-reset:h}
.msy .msy-card li{position:relative;padding-left:28px;margin-bottom:8px;font-size:14px;color:var(--mut);counter-increment:h;line-height:1.5}
.msy .msy-card li:before{content:counter(h);position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;
  background:var(--a);color:#0C1620;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* galerij */
.msy .msy-gal{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.msy .msy-gal figure{margin:0!important;grid-column:span 2}
.msy .msy-gal figure:first-child{grid-column:span 6}
.msy .msy-gal img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px;aspect-ratio:3/2}
.msy .msy-gal figure:first-child img{aspect-ratio:16/7}

/* specificaties */
.msy .msy-specs{width:100%;border-collapse:collapse;font-size:15px;margin:0}
.msy .msy-specs th,.msy .msy-specs td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--line);background:transparent}
.msy .msy-specs th{font-weight:700;width:52%;color:var(--ink)}
.msy .msy-specs td{color:var(--mut)}

/* veelgestelde vragen */
.msy .msy-faq details{border-bottom:1px solid var(--line);padding:16px 0}
.msy .msy-faq summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none;color:#fff;font-family:Quicksand,sans-serif}
.msy .msy-faq summary::-webkit-details-marker{display:none}
.msy .msy-faq summary:before{content:"+";color:var(--a);font-weight:700;margin-right:12px}
.msy .msy-faq details[open] summary:before{content:"\2212"}
.msy .msy-faq p{margin:12px 0 0 26px;color:var(--mut);font-size:15px}

/* oproep tot actie */
.msy .msy-cta{background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:36px}
.msy .msy-cta p{color:var(--mut);max-width:56ch}
.msy .msy-btn{display:inline-block;background:var(--a);color:#0C1620!important;text-decoration:none!important;
  padding:14px 28px;border-radius:25px;font-weight:700;font-size:15px;margin:8px 12px 0 0}
.msy .msy-btn:hover{filter:brightness(1.1)}
.msy .msy-btn.msy-alt{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff!important}
.msy .msy-fine{font-size:12.5px;color:#8A8E8C;margin-top:20px;line-height:1.55}

@media(max-width:860px){
  .msy .msy-stage{perspective:none;padding:0;overflow:visible}
  .msy .msy-deck{transform:none;height:auto!important;padding-bottom:0!important}
  .msy .msy-sheet{position:relative!important;left:0;top:0;width:100%;transform:none!important;opacity:1!important;
    margin:0 0 26px!important;box-shadow:0 10px 26px rgba(0,0,0,.5)}
  .msy .msy-tag{position:static;display:inline-block;transform:none;margin:0 0 8px}
  .msy .msy-ctrl{display:none}
  .msy .msy-grid{grid-template-columns:1fr;gap:28px}
  .msy .msy-gal{grid-template-columns:repeat(2,1fr)}
  .msy .msy-gal figure,.msy .msy-gal figure:first-child{grid-column:span 2}
  .msy .msy-cta{padding:26px}
}

/* --- indelingsschakelaar (bv. 74 RS: 3 of 4 hutten) --- */
.msy .msy-lay{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px}
.msy .msy-lay .msy-lay-t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-right:6px;font-weight:700}
.msy .msy-lay label{display:inline-block;padding:8px 15px;border:1px solid var(--line);border-radius:25px;font-size:12.5px;
  font-weight:700;cursor:pointer;color:var(--ink);transition:.2s}
.msy .msy-lay label:hover{border-color:var(--a);color:var(--a)}
.msy .msy-s3b{display:none}
.msy .msy-lb:checked~.msy-stage .msy-s3{display:none}
.msy .msy-lb:checked~.msy-stage .msy-s3b{display:block}
.msy .msy-la:checked~.msy-lay label[for$="-la"],.msy .msy-lb:checked~.msy-lay label[for$="-lb"]{background:var(--a);border-color:var(--a);color:#0C1620}
.msy .msy-lb:checked~.msy-grid .msy-cab3{display:none}
.msy .msy-cab4{display:none}
.msy .msy-lb:checked~.msy-grid .msy-cab4{display:block}
@media(max-width:860px){.msy .msy-lay{display:none}.msy .msy-s3b{display:block}}

/* --- afdrukken / opslaan als PDF: geen 3D, gewoon drie leesbare tekeningen --- */
@media print{
  .msy{color:#111;max-width:none}
  .msy h2,.msy h3,.msy .msy-faq summary{color:#111}
  .msy .msy-lede,.msy .msy-card p,.msy .msy-card li,.msy .msy-specs td,.msy .msy-faq p{color:#333}
  .msy input.msy-r,.msy .msy-ctrl,.msy .msy-lay{display:none!important}
  .msy .msy-stage{perspective:none;padding:0;overflow:visible}
  .msy .msy-deck{transform:none;height:auto!important;padding-bottom:0!important}
  .msy .msy-sheet{position:relative!important;left:0;top:0;width:100%;transform:none!important;opacity:1!important;
    box-shadow:none;margin:0 0 14px!important;break-inside:avoid}
  .msy .msy-s3b{display:none}
  .msy .msy-tag{position:static;display:inline-block;transform:none;background:#eee;color:#111;margin:0 0 6px}
  .msy .msy-grid{grid-template-columns:1fr 1fr 1fr;gap:16px}
  .msy .msy-cta{background:#f4f4f4;border:1px solid #ddd}
  .msy .msy-cta h2,.msy .msy-cta p{color:#111}
  .msy .msy-faq details{break-inside:avoid}
  .msy .msy-faq details p{display:block}
}

/* --- afdrukken / opslaan als pdf --- */
@media print{
 .msy{color:#111;max-width:none}
 .msy h2,.msy h3,.msy .msy-faq summary{color:#000}
 .msy .msy-eyebrow{color:#0a7d76}
 .msy .msy-lede,.msy .msy-card p,.msy .msy-card li,.msy .msy-specs td,.msy .msy-faq p,.msy .msy-fine{color:#333}
 .msy .msy-ctrl,.msy .msy-lay{display:none!important}
 .msy .msy-stage{perspective:none;padding:0;overflow:visible;background:none}
 .msy .msy-deck{transform:none;height:auto!important;padding-bottom:0!important}
 .msy .msy-sheet{position:relative!important;left:0;top:0;width:100%;transform:none!important;opacity:1!important;
   display:block!important;box-shadow:none;margin:0 0 8mm!important;break-inside:avoid}
 .msy .msy-tag{position:static;display:inline-block;transform:none;background:#111;color:#fff;margin:0 0 4px}
 .msy .msy-grid{grid-template-columns:1fr 1fr 1fr;gap:6mm}
 .msy .msy-card li:before{background:#111}
 .msy .msy-specs th,.msy .msy-specs td{border-color:#ddd}
 .msy .msy-faq details{break-inside:avoid;border-color:#ddd}
 .msy .msy-faq details>*:not(summary){display:block!important}
 .msy .msy-faq summary:before{content:"\2022";color:#0a7d76}
 .msy .msy-cta{background:none;border:1px solid #ccc}
 .msy .msy-cta h2,.msy .msy-cta p{color:#111}
 .msy .msy-btn{background:none!important;color:#111!important;border:1px solid #111}
 .msy .msy-sec{border-color:#ddd;break-inside:avoid}
}

/* --- mobiel: menubalk leesbaar maken --- */
/* De menubalk is doorzichtig en zweeft over de inhoud (position:absolute, hoogte 102px).
   Op een smal scherm loopt de tekst eronderdoor. Deze twee regels lossen dat op.
   Bevalt de look niet, verwijder dan alleen dit blok. */
@media(max-width:860px){
  .menu.nav-align-right{background:rgba(22,22,24,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .menu.nav-align-right .menu-actions-wrapper{gap:14px}
}

/* --- prijstabel op de FAQ-pagina (4 kolommen) --- */
.msy .msy-prijs th:first-child{width:26%}
.msy .msy-prijs th,.msy .msy-prijs td{width:auto;white-space:nowrap}
.msy .msy-prijs thead th{color:var(--a);font-size:13px;letter-spacing:.04em;white-space:normal}
.msy .msy-prijs tbody th{font-weight:700}
.msy .msy-prijs a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--a)}
.msy .msy-prijs a:hover{color:var(--a)}
.msy .msy-prijs td[colspan]{color:var(--mut);font-style:italic;white-space:normal}
@media(max-width:860px){
  .msy .msy-prijs{font-size:13px}
  .msy .msy-prijs th:first-child{width:34%;white-space:normal}
  .msy .msy-prijs th,.msy .msy-prijs td{padding:9px 4px}
}
