:root{color-scheme:light;--deep:#02202c;--navy:#0d3355;--teal:#0eb6a8;--teal-text:#0b7d73;--teal2:#59d9cd;--sky:#eafbfa;--page-bg:#1b5f80;--foam:#f6fdfc;--ink:#062a33;--accent:#FFD400;--r:20px;--shadow:0 16px 44px rgba(2,40,50,.13);}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Plus Jakarta Sans',sans-serif;color:var(--ink);background:var(--page-bg);}
h1,h2,h3,h4{font-family:'Fredoka',sans-serif;margin:0;line-height:1.05;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px;}
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;background:rgba(2,22,32,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08);}
.brand{display:flex;align-items:center;flex:1 1 0;min-width:0;gap:11px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:18px;color:#fff;}
.brand img{width:42px;height:42px;border-radius:50%;object-fit:cover;}
.brand small{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:10px;font-weight:600;letter-spacing:.15em;color:var(--accent);;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.brand span{overflow:hidden;min-width:0;letter-spacing:.04em;font-kerning:none}
.top-nav{display:flex;align-items:center;justify-content:center;flex:0 1 auto;gap:4px;}
.top-right{display:flex;align-items:center;justify-content:flex-end;flex:1 1 0;}
.top-nav a{color:rgba(255,255,255,.75);font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:999px;transition:background .2s,color .2s;}
.top-nav a:hover,.top-nav a.active{background:rgba(255,255,255,.12);color:#fff;}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:14px;border:none;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s;}
.btn-primary{background:var(--accent);color:#1a2a10;box-shadow:0 10px 24px rgba(255,180,0,.3);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(255,180,0,.45);}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.45);}
.btn-ghost:hover{background:rgba(255,255,255,.18);}
.icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex:none;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal-text);margin-bottom:12px;}
.eyebrow::before{content:"";width:20px;height:2px;background:currentColor;border-radius:2px;}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.16,.8,.3,1),transform .75s cubic-bezier(.16,.8,.3,1);}
.reveal.visible{opacity:1;transform:translateY(0);}
.hero{padding:140px 0 80px;background:radial-gradient(ellipse at 60% -5%,#0f6f7c 0%,#054a58 40%,#022a35 75%,#011419 100%);position:relative;overflow:hidden;text-align:center;}
.hero h1{font-size:clamp(36px,5vw,58px);color:#fff;}
.hero h1 .hl{color:var(--accent);}
.hero p{color:#cdeeed;font-size:16.5px;line-height:1.65;margin:18px auto 0;max-width:580px;}
.wave-bot{position:absolute;bottom:-1px;left:0;width:100%;line-height:0;z-index:2;}
.wave-bot svg{width:100%;height:auto;display:block;}
/* the wave is the hero-to-page transition, so it has to be the page colour.
   The path carries a hardcoded fill="#f6fdfc" in the markup of all six
   locales; a CSS fill outranks that presentation attribute, so tying it to
   --page-bg here keeps the two in sync from one place. */
.wave-bot svg path{fill:var(--page-bg);}
.booking-section{padding:80px 0 100px;}
.booking-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:start;}
.form-card{background:#fff;border:1px solid #dff2ef;border-radius:var(--r);padding:36px;box-shadow:var(--shadow);}
.form-card h2{font-size:22px;color:var(--navy);margin-bottom:24px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.field label{font-size:13px;font-weight:700;color:var(--navy);}
.field label .opt{font-weight:500;color:#53747c;text-transform:none;letter-spacing:0;}
.field input,.field select,.field textarea{font:inherit;font-size:14.5px;padding:12px 14px;border:1.5px solid #d3ece8;border-radius:12px;color:var(--ink);background:#f8fefd;transition:border-color .2s;width:100%;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);}
.field textarea{resize:vertical;min-height:90px;}
/* WhatsApp-Nummer in zwei Feldern: erst die Laendervorwahl, dann der Rest.
   Bewusst getrennt und ohne Vorbelegung - die Vorwahl soll eingetippt und nicht
   uebersehen werden. min-width:0 haelt das rechte Feld im Flexrahmen. */
/* Breite in em, nicht in rem: touch-desktop.css setzt die Schrift der Felder im
   Handy-Desktopmodus auf 21px hoch. Eine feste Breite wuerde dort zu eng. */
.phone-row{display:flex;gap:10px;align-items:stretch;}
.phone-row .phone-code{flex:0 0 6em;width:6em;text-align:center;}
.phone-row .phone-rest{flex:1 1 auto;min-width:0;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.submit-row{margin-top:10px;}
.submit-row .btn{width:100%;justify-content:center;font-size:15px;padding:16px 26px;}
.form-note{margin-top:14px;font-size:12.5px;color:#53747c;line-height:1.6;text-align:center;}
.side-card{background:linear-gradient(165deg,#0ac2b0 0%,#0790a8 55%,#065c82 100%);border-radius:var(--r);padding:32px;color:#fff;}
.side-card h3{font-size:19px;margin-bottom:20px;}
.step{display:flex;gap:14px;margin-bottom:18px;}
.step:last-child{margin-bottom:0;}
.step .num{flex:none;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Fredoka',sans-serif;font-size:14px;}
.step p{font-size:13.5px;line-height:1.55;color:#eafffb;}
.side-contact{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.25);}
.side-contact p{font-size:13px;color:#eafffb;margin-bottom:12px;}
.side-contact a{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;}
.booking-items{display:flex;flex-direction:column;gap:16px;}
.bi-empty-hint{font-size:12.5px;color:#53747c;text-align:center;padding:18px 14px;border:1.5px dashed #d3ece8;border-radius:14px;background:#f8fefd;line-height:1.55;}
.booking-item{background:#f8fefd;border:1.5px solid #d3ece8;border-radius:16px;padding:16px 16px 18px;}
.bi-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.bi-title{font-weight:700;font-size:13.5px;color:var(--navy);font-family:'Fredoka',sans-serif;}
.bi-remove{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid #d3ece8;background:#fff;color:#53747c;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:border-color .2s,color .2s;}
.bi-remove:hover{border-color:#e3a3a3;color:#c0392b;}
.bi-people{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.bi-people label{font-size:11.5px;font-weight:700;color:#53747c;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em;}
.bi-people input{width:76px;font:inherit;font-size:14px;padding:8px 10px;border:1.5px solid #d3ece8;border-radius:10px;background:#fff;color:var(--ink);}
.bi-people input:focus{outline:none;border-color:var(--teal);}
.cal-card{background:#fff;border:1.5px solid #d3ece8;border-radius:16px;padding:18px;margin-top:2px;}
.cal-modes{display:flex;gap:8px;margin-bottom:16px;}
.mode-btn{flex:1;padding:10px 12px;border-radius:10px;border:1.5px solid #d3ece8;background:#fff;font-weight:700;font-size:12.5px;color:#53747c;cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.mode-btn.active{background:var(--teal-text);border-color:var(--teal-text);color:#fff;}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cal-nav{width:30px;height:30px;border-radius:50%;border:1.5px solid #d3ece8;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;font-weight:700;color:var(--navy);flex:none;padding:0;}
.cal-nav:disabled{opacity:.3;cursor:default;}
.cal-month-label{font-weight:700;color:var(--navy);font-family:'Fredoka',sans-serif;font-size:14.5px;}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:4px;}
.cal-weekdays span{text-align:center;font-size:10px;font-weight:700;color:#53747c;text-transform:uppercase;display:block;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-day{aspect-ratio:1;border-radius:8px;border:none;background:transparent;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,transform .15s;padding:0;}
.cal-day.blank{visibility:hidden;pointer-events:none;}
.cal-day.disabled{color:#c3d5d8;cursor:not-allowed;}
.cal-day:hover:not(.disabled):not(.blank){background:#eafbfa;}
.cal-day.selected,.cal-day.range-end{background:var(--teal);color:#fff;transform:scale(1.05);}
.cal-day.in-range{background:#d7f3f0;color:var(--navy);border-radius:4px;}
.date-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.date-chip{display:inline-flex;align-items:center;gap:6px;background:#eafbfa;color:var(--navy);border-radius:999px;padding:6px 8px 6px 12px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid #cdeeec;}
.date-chip .chip-x{opacity:.55;font-size:13px;}
.date-chip:hover .chip-x{opacity:1;}
.range-summary{margin-top:14px;padding:10px 14px;background:#eafbfa;border-radius:10px;font-size:13px;color:var(--navy);font-weight:700;text-align:center;}
.date-error{margin-top:10px;font-size:12px;color:#c0392b;font-weight:700;text-align:center;}
/* Days a multi-day course still needs, without a date yet. Sits under the
   calendar because it is the same question — how long? — asked a second way. */
.bi-open{display:flex;align-items:center;gap:8px;margin-top:14px;padding:9px 12px;
  background:#f4fbfa;border:1.5px solid #d3ece8;border-radius:10px;}
.bi-open-label{flex:1;min-width:0;font-size:11.5px;font-weight:700;color:#53747c;
  text-transform:uppercase;letter-spacing:.04em;line-height:1.35;}
.bi-open-btn{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid #d3ece8;
  background:#fff;color:var(--teal);font-size:16px;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s;}
.bi-open-btn:hover:not(:disabled){border-color:var(--teal);}
.bi-open-btn:disabled{opacity:.4;cursor:default;}
.bi-open-value{flex:none;min-width:22px;text-align:center;font-weight:700;font-size:14px;color:var(--navy);}
/* Advisory only — never red, because nothing here blocks the booking. */
.bi-day-hint{margin:10px 0 0;font-size:12px;line-height:1.5;color:#53747c;text-align:center;}
.bi-day-hint.warn{color:#8a6d1f;background:#fff8e6;border:1px solid #ffe6a8;
  border-radius:10px;padding:9px 12px;}
/* Same box in the affirmative: the package's day count is now covered. */
.bi-day-hint.ok{color:#1a7d5c;background:#eafaf3;border:1px solid #b6e6d1;
  border-radius:10px;padding:9px 12px;}
.cal-note{display:flex;gap:10px;margin-top:2px;padding:12px 14px;background:#fff8e6;border:1px solid #ffe6a8;border-radius:12px;font-size:12px;color:#8a6d1f;line-height:1.55;}
.cal-note svg{flex:none;color:#d99a1c;margin-top:1px;}
/* 2026-09-13: the card of a chosen course opens as its own row directly under
   that chip (booking.js syncItems), with a compact calendar. */
.cp-options > .booking-item{flex:1 1 100%;min-width:0;padding:12px 12px 14px;margin:2px 0 6px;}
.cp-options > .booking-item .bi-head{margin-bottom:8px;}
.cp-options > .booking-item .bi-people{margin-bottom:10px;}
.cp-options > .booking-item .cal-card{max-width:300px;padding:12px;}
.cp-options > .booking-item .cal-modes{margin-bottom:10px;gap:6px;}
.cp-options > .booking-item .mode-btn{padding:7px 10px;font-size:12px;}
.cp-options > .booking-item .cal-head{margin-bottom:6px;}
.cp-options > .booking-item .cal-nav{width:26px;height:26px;font-size:13px;}
.cp-options > .booking-item .cal-month-label{font-size:13px;}
.cp-options > .booking-item .cal-grid,.cp-options > .booking-item .cal-weekdays{gap:2px;}
.cp-options > .booking-item .cal-day{font-size:11.5px;border-radius:6px;}
.cp-options > .booking-item .cal-weekdays span{font-size:9px;}
.course-picker + .cal-note{margin-top:10px;}
.pay-options{display:grid;grid-template-columns:1fr;gap:12px;}
.pay-card{border:1.5px solid #d3ece8;border-radius:12px;padding:14px 16px;position:relative;background:#f8fefd;transition:border-color .2s,background .2s;}
.pay-card.active{border-color:var(--teal);background:#f2fdfb;}
.pay-card b{display:block;font-size:13px;color:var(--navy);margin-bottom:3px;}
.pay-card span{font-size:11px;color:#53747c;}
/* locale variants of .pay-badge */
:where(html[lang="de"]) .pay-badge{position:absolute;top:-9px;right:12px;background:var(--accent);color:#1a2a10;font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:999px;}
:where(html[lang="en"]) .pay-badge{position:absolute;top:-9px;right:12px;background:var(--accent);color:#1a2a10;font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:999px;}
:where(html[lang="fr"]) .pay-badge{position:absolute;top:-9px;right:12px;background:var(--accent);color:#1a2a10;font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:999px;}
:where(html[lang="nl"]) .pay-badge{position:absolute;top:-9px;right:12px;background:var(--accent);color:#1a2a10;font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:999px;}
:where(html[lang="ru"]) .pay-badge{position:absolute;top:-9px;right:12px;background:var(--accent);color:#1a2a10;font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:999px;}
:where(html[lang="ar"]) .pay-badge{position:absolute;top:-9px;left:12px;background:var(--accent);color:#1a2a10;font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:999px;}
.captcha-row{display:flex;align-items:center;gap:10px;}
.captcha-row .captcha-question{flex:none;min-width:64px;padding:12px 14px;border:1.5px solid #d3ece8;border-radius:12px;background:#f8fefd;font-weight:700;color:var(--navy);text-align:center;}
.captcha-row input[name="captcha_answer"]{flex:1;min-width:0;}
.captcha-refresh{flex:none;width:42px;height:42px;border:1.5px solid #d3ece8;border-radius:12px;background:#f8fefd;color:var(--navy);font-size:16px;cursor:pointer;transition:border-color .2s,background .2s;}
.captcha-refresh:hover{border-color:var(--teal);background:#f2fdfb;}
.chk-field{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1.5px solid #d3ece8;border-radius:12px;background:#f8fefd;cursor:pointer;}
.chk-field input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--teal);}
.chk-field .chk-text b{display:block;font-size:13.5px;color:var(--navy);}
.chk-field .chk-text span{font-size:11.5px;color:#53747c;}
.course-picker{display:flex;flex-direction:column;gap:2px;}
.cp-group{margin-bottom:14px;}
.cp-group:last-child{margin-bottom:0;}
.cp-group-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#53747c;margin-bottom:8px;}
.cp-options{display:flex;flex-wrap:wrap;gap:8px;}
.cp-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:16px;border:1.5px solid #d3ece8;background:#f8fefd;cursor:pointer;transition:border-color .2s,background .2s;}
.cp-chip:hover{border-color:#b9dcd8;}
.cp-chip input{width:15px;height:15px;flex:none;accent-color:var(--teal);}
.cp-chip span{font-size:12.5px;font-weight:600;color:var(--navy);}
.cp-chip-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
/* Die Uhrzeit steht unter dem Namen und darf ihm nicht die Aufmerksamkeit
   nehmen. Ohne eigene Regel erbte sie .cp-chip span und sah aus wie ein
   zweiter Angebotsname. */
.cp-chip .cp-time{font-size:11px;font-weight:500;color:#53747c;letter-spacing:.01em;}
.cp-chip:has(input:checked){border-color:var(--teal);background:#eafbfa;}
.cp-chip.is-checked{border-color:var(--teal);background:#eafbfa;}
.cp-chip .cp-info{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1.5px solid #cfe7e3;background:#fff;color:#53747c;font-family:'Fredoka',sans-serif;font-size:11px;font-weight:800;line-height:1;cursor:pointer;user-select:none;transition:background .2s,color .2s,border-color .2s;}
.cp-chip .cp-info:hover,.cp-chip .cp-info:focus-visible{background:var(--teal-text);border-color:var(--teal-text);color:#fff;outline:none;}
.price-summary{margin-top:4px;padding:16px 18px;background:#f8fefd;border:1.5px solid #d3ece8;border-radius:14px;}
.ps-items{margin-bottom:2px;}
.ps-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13px;color:#4b6d75;}
.ps-row.ps-discount span:last-child{color:#1a9e6b;font-weight:700;}
.ps-row.ps-total{border-top:1px dashed #d3ece8;margin-top:6px;padding-top:10px;font-size:16px;font-weight:800;color:var(--navy);font-family:'Fredoka',sans-serif;}
.ps-note{margin-top:8px;font-size:11px;color:#53747c;text-align:center;}
/* right column: "how it works" card + the price overview that sticks while scrolling */
.side-col{display:flex;flex-direction:column;gap:24px;align-self:stretch;min-width:0;}
.price-summary-card{position:relative;background:#fff;border:1px solid #dff2ef;border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .45s ease;}
.price-summary-card h3{font-size:17px;color:var(--navy);margin-bottom:16px;}
@media(min-width:961px) {
  /* 96px = the 71px fixed topbar (it does not shrink on this page) plus air.
     The max-height keeps a long cart scrollable instead of running off screen. */
  .price-summary-card{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain;}
}
/* clicking the cart lifts the card out of the column and floats it centre-screen */
.price-summary-card.ps-floating{position:fixed;z-index:9990;width:min(540px,92vw);max-height:86vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;padding:32px 28px 28px;border-radius:24px;box-shadow:0 40px 90px rgba(2,40,50,.45);}
.price-summary-card.ps-floating::-webkit-scrollbar{width:0;height:0;display:none;}
.price-summary-card.ps-floating h3{padding-inline-end:40px;}
/* keeps the card above its neighbours while it shrinks back into the column */
.price-summary-card.ps-returning{z-index:9990;}
.ps-close{display:none;position:absolute;top:14px;inset-inline-end:14px;width:34px;height:34px;border-radius:50%;border:none;background:rgba(6,42,51,.08);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;align-items:center;justify-content:center;padding:0;transition:background .2s;}
.ps-close:hover{background:rgba(6,42,51,.16);}
.price-summary-card.ps-floating .ps-close{display:flex;}
.ps-placeholder{flex:none;}
.ps-backdrop{position:fixed;inset:0;z-index:9989;background:rgba(2,20,28,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease;}
.ps-backdrop.on{opacity:1;visibility:visible;}
/* course detail popup — same pattern as courses.html/prices.html */
.course-modal-overlay{position:fixed;inset:0;background:rgba(2,20,28,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;}
.course-modal{background:#fff;border-radius:24px;max-width:640px;width:100%;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;padding:40px 40px 34px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.4);scrollbar-width:none;-ms-overflow-style:none;}
.course-modal::-webkit-scrollbar{width:0;height:0;display:none;}
.course-modal-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;border:none;background:rgba(6,42,51,.08);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.course-modal-close:hover{background:rgba(6,42,51,.16);}
.level-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;padding:5px 13px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.level-badge.beginner{background:rgba(34,197,94,.85);color:#fff;}
.level-badge.advanced{background:rgba(59,130,246,.85);color:#fff;}
.level-badge.professional{background:rgba(139,92,246,.85);color:#fff;}
.level-badge.safety{background:rgba(249,115,22,.85);color:#fff;}
.course-modal .level-badge{position:static;display:inline-flex;margin-bottom:14px;}
.course-modal h3{font-size:clamp(22px,3vw,30px);color:var(--navy);margin-bottom:14px;padding-right:34px;}
.course-modal-desc{font-size:15px;color:#4b6d75;line-height:1.7;margin-bottom:24px;}
.course-modal-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:24px;padding:18px;background:var(--sky);border-radius:16px;}
.cmm-label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#53747c;margin-bottom:4px;}
.cmm-val{display:block;font-size:14.5px;font-weight:700;color:var(--navy);}
.course-modal-includes{display:flex;flex-direction:column;gap:9px;margin-bottom:26px;}
.course-modal-includes .inc-item{display:flex;align-items:center;gap:10px;font-size:14px;color:#3a5a63;}
.course-modal-includes .inc-item svg{color:var(--teal);flex:none;width:16px;height:16px;}
.course-modal-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:22px;border-top:1px solid #e8f4f2;}
.price-tag{font-family:'Fredoka',sans-serif;font-size:30px;font-weight:700;color:var(--navy);}
.price-tag span{font-size:14px;color:#53747c;font-weight:500;margin-left:6px;}
.price-tag>span:first-child{font-size:inherit;color:inherit;font-weight:inherit;margin-left:0;}
body.cm-open{overflow:hidden;}
/* The cart rides in the fixed top bar, immediately left of the language
   switch, so it stays in view without covering the page. --cb-size drives
   every derived measurement, so one value per breakpoint resizes the lot;
   it is tuned to sit between the language pill and the burger in height. */
/* The bubble body copies drawBubble() in assets/js/ocean.js: a hollow middle,
   a rim that ramps up sharply near the edge, a crisp meniscus just inside it
   and one specular highlight up-left — plus a faint iridescent sheen, which is
   what separates a soap bubble from a glass ball. */
.cart-bubble{--cb-size:42px;position:relative;order:0;flex:none;margin-inline-start:10px;width:var(--cb-size);height:var(--cb-size);padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:radial-gradient(ellipse 7% 5% at 66% 72%,rgba(236,252,255,.55),rgba(236,252,255,0) 70%),radial-gradient(circle at 70% 28%,rgba(255,206,236,.36),rgba(255,206,236,0) 46%),radial-gradient(circle at 26% 74%,rgba(255,244,186,.32),rgba(255,244,186,0) 48%),radial-gradient(circle at 80% 70%,rgba(178,222,255,.38),rgba(178,222,255,0) 46%),radial-gradient(circle at 50% 50%,rgba(120,215,245,.05) 0%,rgba(120,215,245,.09) 60%,rgba(198,243,255,.34) 84%,rgba(170,238,255,.78) 95%,rgba(198,243,255,.12) 100%);border:1px solid rgba(255,255,255,.5);box-shadow:0 6px 16px rgba(2,40,50,.32),inset 0 0 14px rgba(255,255,255,.22);-webkit-backdrop-filter:blur(1.5px) saturate(1.15);backdrop-filter:blur(1.5px) saturate(1.15);animation:cartFloat 3.4s ease-in-out infinite;opacity:.66;transition:opacity .3s ease,box-shadow .25s ease;}
.cart-bubble.cb-on{opacity:1;}
.cart-bubble:not(.cb-on){cursor:default;}
/* specular highlight, placed where ocean.js puts it (-0.34r, -0.38r) */
.cart-bubble::before{content:"";position:absolute;left:21%;top:22.5%;width:24%;height:17%;border-radius:50%;background:radial-gradient(circle,rgba(236,252,255,.98),rgba(236,252,255,.15) 72%,rgba(236,252,255,0) 100%);transform:rotate(-40deg);pointer-events:none;}
/* meniscus: the thin bright ring just inside the rim */
.cart-bubble::after{content:"";position:absolute;inset:3.5%;border-radius:50%;border:1px solid rgba(220,248,255,.5);pointer-events:none;}
/* iridescence: a rainbow band masked to the rim, where a real soap film is
   thinnest — it turns slowly so the colours drift instead of sitting still */
.cart-sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:.5;background:conic-gradient(from 0deg,rgba(255,110,150,.55),rgba(255,214,110,.5) 15%,rgba(150,255,180,.5) 32%,rgba(110,220,255,.55) 50%,rgba(160,150,255,.5) 68%,rgba(255,140,220,.5) 85%,rgba(255,110,150,.55) 100%);-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 46%,#000 78%,#000 94%,transparent 100%);mask-image:radial-gradient(circle at 50% 50%,transparent 46%,#000 78%,#000 94%,transparent 100%);filter:blur(3px);animation:cartSheen 16s linear infinite;}
.cart-bubble svg{position:relative;z-index:1;width:calc(var(--cb-size)*.48);height:calc(var(--cb-size)*.48);fill:none;stroke:#eafeff;stroke-width:2;filter:drop-shadow(0 1px 2px rgba(2,28,40,.85));}
.cart-bubble:hover{opacity:1;box-shadow:0 8px 20px rgba(2,40,50,.4),inset 0 0 18px rgba(255,255,255,.34);animation-play-state:paused;}
.cart-bubble.cb-pop{animation:cartPop .5s ease;}
.cart-count{position:absolute;top:-4px;inset-inline-end:-4px;z-index:2;min-width:17px;height:17px;padding:0 4px;border-radius:999px;border:1.5px solid rgba(2,22,32,.92);background:var(--accent);color:#1a2a10;font-family:'Fredoka',sans-serif;font-size:10.5px;line-height:1;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(2,40,50,.35);transition:opacity .25s ease,transform .25s ease;}
.cart-bubble:not(.cb-on) .cart-count{opacity:0;transform:scale(.4);}
.cart-mini{position:absolute;display:block;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(120,215,245,.04) 0%,rgba(120,215,245,.07) 62%,rgba(198,243,255,.3) 86%,rgba(198,243,255,.62) 97%,rgba(198,243,255,0) 100%);opacity:.75;animation:cartMini 4.2s ease-in-out infinite;}
.cart-mini.m1{width:calc(var(--cb-size)*.15);height:calc(var(--cb-size)*.15);top:calc(var(--cb-size)*-.08);left:calc(var(--cb-size)*-.08);animation-delay:-.6s;}
.cart-mini.m2{width:calc(var(--cb-size)*.1);height:calc(var(--cb-size)*.1);bottom:calc(var(--cb-size)*-.05);right:calc(var(--cb-size)*-.09);animation-delay:-1.9s;}
.cart-mini.m3{width:calc(var(--cb-size)*.08);height:calc(var(--cb-size)*.08);top:56%;left:calc(var(--cb-size)*-.13);animation-delay:-3s;}
/* the reduce-motion button keeps its own bottom-left dock */
#fd-motion-btn{z-index:9999;}
/* bubbles rising from a picked product into the cart — JS sets the custom
   properties, the keyframes give them an arc instead of a straight line */
/* Same gradient ramp, meniscus and highlight as drawBubble() in ocean.js, so
   these read as the site's own ambient bubbles — just twice the size. */
/* These bubbles cross two very different surfaces on their way to the cart:
   the white form card they start on, and the dark --page-bg they finish over.
   So they carry both halves of ocean.js's palette logic at once — a bright
   DARK_BG-style rim that reads against the dark page, plus a dark outer halo
   that separates them from the white card. Neither alone survives both. */
.fly-bubble{--dx:0px;--dy:0px;--wob:0px;--peak:1;position:fixed;z-index:9997;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse 6.5% 4.5% at 65% 71%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),radial-gradient(circle at 70% 30%,rgba(255,170,215,.34),rgba(255,170,215,0) 55%),radial-gradient(circle at 28% 72%,rgba(255,240,160,.3),rgba(255,240,160,0) 55%),radial-gradient(circle at 50% 50%,rgba(150,230,255,.07) 0%,rgba(150,230,255,.12) 62%,rgba(226,250,255,.55) 86%,rgba(255,255,255,.95) 97%,rgba(255,255,255,0) 100%);box-shadow:0 0 7px rgba(6,60,84,.45);will-change:transform,opacity;animation-name:flyToCart;animation-timing-function:cubic-bezier(.4,.05,.35,1);animation-fill-mode:both;}
.fly-bubble::before{content:"";position:absolute;left:21%;top:22.5%;width:24%;height:17%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,1),rgba(255,255,255,.2) 74%,rgba(255,255,255,0) 100%);transform:rotate(-40deg);}
.fly-bubble::after{content:"";position:absolute;inset:3.5%;border-radius:50%;border:1px solid rgba(255,255,255,.6);}
@keyframes flyToCart{
  0%{transform:translate(0,0) scale(.35);opacity:0;}
  10%{transform:translate(calc(var(--dx)*.06),calc(var(--dy)*.06 - 14px)) scale(1);opacity:var(--peak);}
  45%{transform:translate(calc(var(--dx)*.42 + var(--wob)),calc(var(--dy)*.42 - 30px)) scale(1.06);opacity:var(--peak);}
  75%{transform:translate(calc(var(--dx)*.76 - var(--wob)),calc(var(--dy)*.76 - 16px)) scale(.96);opacity:calc(var(--peak)*.85);}
  100%{transform:translate(var(--dx),var(--dy)) scale(.35);opacity:0;}
}
@keyframes cartFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
@keyframes cartMini{0%,100%{transform:translateY(0) translateX(0) scale(1);}50%{transform:translateY(-5px) translateX(1px) scale(1.1);}}
@keyframes cartPop{0%{transform:scale(1);}40%{transform:scale(1.18);}100%{transform:scale(1);}}
@keyframes cartSheen{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce) {
  .cart-bubble,.cart-mini,.cart-sheen{animation:none;}
}
footer{background:var(--deep);color:#6b9a94;padding:56px 0;text-align:center;font-size:13px;}
footer b{color:#fff;}
@media(max-width:960px) {
  .booking-grid{grid-template-columns:1fr;}
}
@media(max-width:960px) {
  .cart-bubble{--cb-size:40px;}
}
@media(max-width:640px) {
  .course-modal-overlay{align-items:flex-start;padding:88px 14px 20px;}
  .course-modal{padding:26px 20px 24px;max-height:calc(100vh - 108px);}
  /* Below 1100px the language switch is folded into the burger menu, so the
     cart becomes the left-hand item of the top-right group and only needs to
     shrink with the bar. */
  .cart-bubble{--cb-size:38px;margin-inline-start:6px;}
}
@media(max-width:560px) {
  .field-row{grid-template-columns:1fr;}
}
@media(max-width:480px) {
  .wrap{padding:0 16px;}
  .hero{padding:120px 0 60px;}
  .booking-section{padding:56px 0 70px;}
  .form-card{padding:24px 18px;}
  .side-card{padding:24px 20px;}
  .price-summary-card{padding:20px 16px;}
  .course-modal-meta{grid-template-columns:1fr;}
}
@media(max-width:360px) {
  .wrap{padding:0 10px;}
  .form-card,.side-card,.price-summary-card{padding:18px 12px;}
  .cp-chip{padding:6px 10px;gap:6px;}
  .cp-chip span{font-size:11.5px;}
  .cal-card{padding:12px 10px;}
  .booking-item{padding:12px 10px 14px;}
  .cal-modes{flex-wrap:wrap;}
  .mode-btn{flex:1 1 100%;}
  .captcha-row{flex-wrap:wrap;}
  .captcha-row .captcha-question{flex:1 1 auto;min-width:0;}
  .captcha-row input[name="captcha_answer"]{flex:1 1 100%;}
  .cart-bubble{--cb-size:34px;}
}
@media(max-width:260px) {
  .wrap{padding:0 6px;}
  .form-card,.side-card,.price-summary-card{padding:14px 8px;border-radius:14px;}
  .form-card h2{font-size:17px;}
  .hero{padding:104px 0 44px;}
  .hero h1{font-size:26px;}
  .hero p{font-size:13px;margin-top:12px;}
  .booking-section .gift-banner{font-size:11px;padding:10px 12px;gap:6px;margin-bottom:22px;}
  .cp-options{gap:6px;}
  .cp-chip{width:100%;padding:6px 8px;}
  .cp-chip span{font-size:11px;overflow-wrap:anywhere;}
  .cal-grid,.cal-weekdays{gap:1px;}
  .cal-day{font-size:10px;border-radius:5px;}
  .cal-weekdays span{font-size:8px;}
  .cal-month-label{font-size:12px;}
  .cal-nav{width:24px;height:24px;font-size:12px;}
  .bi-people{flex-wrap:wrap;}
  .bi-people input{width:100%;}
  .field input,.field select,.field textarea{padding:9px 10px;font-size:13px;}
  .ps-row{font-size:11.5px;gap:6px;}
  .ps-row.ps-total{font-size:13px;}
  .submit-row .btn{font-size:12.5px;padding:12px 10px;}
  .course-modal-overlay{padding:70px 6px 12px;}
  .course-modal{padding:18px 12px 16px;border-radius:16px;}
  .course-modal h3{font-size:18px;padding-right:26px;}
  .course-modal-close{width:30px;height:30px;top:10px;right:10px;font-size:18px;}
  .course-modal-desc{font-size:13px;}
  .course-modal-includes .inc-item{font-size:12.5px;gap:7px;}
  .course-modal-footer{flex-direction:column;align-items:stretch;text-align:center;}
  .course-modal-footer .btn{justify-content:center;}
  .price-tag{font-size:24px;}
  .cart-bubble{--cb-size:30px;margin-inline-start:4px;}
  .cart-count{min-width:14px;height:14px;padding:0 3px;font-size:9px;border-width:1px;top:-3px;inset-inline-end:-3px;}
}
@media(max-width:170px) {
  .topbar,.topbar.scrolled{padding-left:6px!important;padding-right:6px!important;gap:4px;}
  .brand span{font-size:11px;}
  .brand img{width:26px;height:26px;}
  .nav-burger{width:32px;height:32px;margin-inline-start:4px;}
  .lang-btn{padding:5px 7px;}
  .hero h1{font-size:21px;}
  .cal-day{font-size:9px;}
  .cart-bubble{--cb-size:26px;margin-inline-start:3px;}
}
.lang-switch{position:relative;margin-inline-start:14px;margin-inline-end:0;font-family:'Plus Jakarta Sans',sans-serif;}
.lang-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.3);color:#fff;font-weight:700;font-size:13px;padding:9px 14px;border-radius:999px;cursor:pointer;transition:background .2s;}
.lang-btn:hover{background:rgba(255,255,255,.16);}
.lang-btn .flag{border-radius:3px;display:block;}
.lang-btn .chev{width:9px;height:9px;border-right:2px solid rgba(255,255,255,.7);border-bottom:2px solid rgba(255,255,255,.7);transform:rotate(45deg) translateY(-2px);}
.lang-menu{display:none;position:absolute;top:calc(100% + 10px);inset-inline-end:0;background:rgba(2,20,28,.98);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:8px;min-width:170px;box-shadow:0 18px 44px rgba(0,0,0,.45);z-index:200;}
.lang-switch.open .lang-menu{display:block;}
.lang-opt{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.85);font-size:13.5px;font-weight:600;padding:9px 12px;border-radius:9px;}
.lang-opt:hover{background:rgba(255,255,255,.1);color:#fff;}
.lang-opt.current{background:rgba(255,212,0,.12);color:#FFD400;}
.lang-opt .flag{border-radius:3px;flex:none;}
@media(max-width:640px) {
  .lang-btn span.lname{display:none;}
}
.nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin-inline-start:8px;flex:none;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.28);border-radius:12px;color:#fff;cursor:pointer;transition:background .2s;}
.nav-burger:hover{background:rgba(255,255,255,.16);}
.nav-burger .nb-box{position:relative;display:block;width:20px;height:14px;}
.nav-burger .nb-box span{position:absolute;left:0;width:100%;height:2px;background:#fff;border-radius:2px;transition:top .28s ease,transform .28s ease,opacity .2s ease;}
.nav-burger .nb-box span:nth-child(1){top:0;}
.nav-burger .nb-box span:nth-child(2){top:6px;}
.nav-burger .nb-box span:nth-child(3){top:12px;}
body.mnav-open .nav-burger .nb-box span:nth-child(1){top:6px;transform:rotate(45deg);}
body.mnav-open .nav-burger .nb-box span:nth-child(2){opacity:0;}
body.mnav-open .nav-burger .nb-box span:nth-child(3){top:6px;transform:rotate(-45deg);}
.mnav-backdrop{position:fixed;inset:0;background:rgba(1,16,22,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:98;}
body.mnav-open .mnav-backdrop{opacity:1;visibility:visible;}
.mnav-panel{position:fixed;top:0;inset-inline-end:0;height:100%;width:min(82vw,340px);padding:86px 22px 28px;display:flex;flex-direction:column;gap:6px;background:rgba(2,20,28,.98);border-inline-start:1px solid rgba(255,255,255,.1);box-shadow:-24px 0 60px rgba(0,0,0,.5);transform:translateX(100%);transition:transform .34s cubic-bezier(.4,.14,.3,1);z-index:99;overflow-y:auto;font-family:'Plus Jakarta Sans',sans-serif;}
.mnav-brand{display:flex;align-items:center;gap:12px;padding:0 2px 18px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12);flex:none;}
.mnav-brand img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;}
.mnav-brand span{display:block;font-family:'Fredoka',sans-serif;font-weight:700;font-size:17px;color:#fff;}
.mnav-brand span small{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--accent);margin-top:2px;}
[dir=rtl] .mnav-panel{transform:translateX(-100%);}
body.mnav-open .mnav-panel{transform:translateX(0);}
.mnav-links{display:flex;flex-direction:column;gap:4px;}
.mnav-links a{display:flex;align-items:center;color:rgba(255,255,255,.86);font-weight:700;font-size:16px;padding:14px 16px;border-radius:12px;transition:background .2s,color .2s;}
.mnav-links a:hover,.mnav-links a.active{background:rgba(255,255,255,.1);color:#fff;}
.mnav-cta{margin-top:16px;width:100%;justify-content:center;text-align:center;}
.mnav-lang-label{margin:18px 0 6px;padding:0 16px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.58);}
.mnav-langs{display:flex;flex-direction:column;gap:2px;}
.mnav-langs a{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.86);font-weight:600;font-size:15px;padding:11px 16px;border-radius:12px;transition:background .2s,color .2s;}
.mnav-langs a:hover{background:rgba(255,255,255,.1);color:#fff;}
.mnav-langs a.current{background:rgba(255,212,0,.12);color:#FFD400;}
.mnav-langs a .flag{border-radius:3px;flex:none;}
@media(max-width:1100px) {
  .top-nav{display:none;}
  .top-right{flex:0 0 auto;}
  .nav-burger{display:inline-flex;order:3;}
  .top-right>.btn-primary{padding:9px 16px;font-size:12.5px;order:2;;white-space:nowrap;flex-shrink:0}
  .lang-switch{display:none;margin-inline-start:auto;margin-inline-end:0;order:1;}
  .lang-switch,.nav-burger{flex:none;}
  .brand{min-width:0;flex:0 1 auto;}
}
@media(max-width:600px) {
  .topbar,.topbar.scrolled{padding-left:14px!important;padding-right:14px!important;}
  .brand{font-size:16px;gap:9px;}
  .brand img{width:38px;height:38px;}
  .brand small{white-space:nowrap;}
}
@media(max-width:360px) {
  .brand small{display:none;}
}
/* Only <html> may carry this. Its value propagates to the viewport, so the
   horizontal overflow is still clipped — but repeating it on <body> turns <body>
   into its own scroll container (overflow-y then computes to auto), and a sticky
   element whose scroll container never scrolls never sticks. That is what used
   to silently disable the sticky price card above. */
html{overflow-x:hidden;}

/* native hidden attribute and <dialog> defaults */
[hidden]{display:none!important;}
dialog:not([open]){display:none;}
dialog.course-modal-overlay{margin:0;width:auto;height:auto;max-width:none;max-height:none;border:0;color:inherit;}
dialog.course-modal-overlay::backdrop{background:transparent;}
[dir=rtl] .course-modal-close{right:auto;left:18px;}
[dir=rtl] .course-modal h3{padding-right:0;padding-left:34px;}
[dir=rtl] .price-tag span{margin-left:0;margin-inline-start:6px;}

/* Course popup: a quiet second action next to "Add to booking", for the reader
   who wants the whole story before committing to a line in the cart. */
.cm-details{padding:12px 20px;font-size:13px;font-weight:700;background:rgba(6,42,51,.06);
  color:var(--ink);border:1.5px solid rgba(6,42,51,.2);}
.cm-details:hover{background:rgba(6,42,51,.12);}

/* ---------- cart rows: every item can be taken back out ------------------ */
.ps-row.ps-item{align-items:center;gap:8px;}
.ps-item .ps-name{flex:1 1 auto;min-width:0;}
.ps-item .ps-val{flex:0 0 auto;white-space:nowrap;font-weight:700;color:var(--navy);}
.ps-x{flex:0 0 auto;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid #d3ece8;border-radius:50%;background:#fff;color:#53747c;font-size:16px;line-height:1;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;}
.ps-x:hover,.ps-x:focus-visible{background:#ffe9e6;border-color:#f3b8ae;color:#c0392b;transform:scale(1.08);}

/* ---------- WhatsApp hand-off shown after a sent request ----------------- */
.wa-handoff{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;background:#25d366;border-color:#25d366;color:#fff;}
.wa-handoff:hover,.wa-handoff:focus-visible{background:#1ebe5a;border-color:#1ebe5a;color:#fff;}

/* ---------- price overview as a bottom sheet on narrow screens -----------
   Below 961px the grid collapses to one column, so the sticky right-hand card
   has nowhere to stick. Instead the card parks at the bottom edge, collapsed to
   a single bar showing the running total, and expands on tap.

   This block has to stay LAST in the file: the small-screen padding overrides
   for .price-summary-card (the 480/360/260px queries above) would otherwise win
   on equal specificity and reopen the collapsed bar. */
.ps-bar{display:none;}
@media(max-width:960px) {
  :root{--psbar-h:60px;}
  .price-summary-card{position:fixed;left:0;right:0;bottom:0;z-index:96;padding:0 16px 14px;border-radius:16px 16px 0 0;border-bottom:0;box-shadow:0 -14px 40px rgba(2,40,50,.22);max-height:var(--psbar-h);overflow:hidden;transition:max-height .32s ease;}
  .price-summary-card.ps-sheet-open{max-height:min(72vh,560px);overflow-y:auto;overscroll-behavior:contain;}
  .price-summary-card>h3{display:none;}
  /* the bar doubles as the card heading here, and stays put while the sheet scrolls */
  .ps-bar{display:flex;align-items:center;gap:10px;width:100%;height:var(--psbar-h);position:sticky;top:0;z-index:1;background:#fff;padding:0;border:0;font:inherit;text-align:start;cursor:pointer;}
  .ps-bar-label{font-family:'Fredoka',sans-serif;font-size:15px;font-weight:700;color:var(--navy);}
  .ps-bar-total{margin-inline-start:auto;font-family:'Fredoka',sans-serif;font-size:16px;font-weight:800;color:var(--navy);}
  .ps-bar-chev{flex:none;color:#53747c;transition:transform .3s ease;}
  .price-summary-card.ps-sheet-open .ps-bar-chev{transform:rotate(180deg);}
  .price-summary-card .price-summary{margin-top:0;margin-bottom:4px;}
  /* on mobile the bar replaces the fly-to-centre cart, so only one of the two shows */
  .cart-bubble{display:none;}
  /* keep the footer, the social dock and the motion button clear of the bar.
     !important because touch-desktop.css loads after this file and re-pins the
     dock at bottom:26px in the 900-1200px range. */
  body:has(.price-summary-card:not([hidden])){padding-bottom:var(--psbar-h);}
body.fd-has-pricebar{padding-bottom:var(--psbar-h);}
  body:has(.price-summary-card:not([hidden])) #sbf-dock.sbf-fixed{bottom:calc(20px + var(--psbar-h))!important;}
body.fd-has-pricebar #sbf-dock.sbf-fixed{bottom:calc(20px + var(--psbar-h))!important;}
  body:has(.price-summary-card:not([hidden])) #fd-motion-btn{bottom:calc(12px + var(--psbar-h))!important;}
body.fd-has-pricebar #fd-motion-btn{bottom:calc(12px + var(--psbar-h))!important;}
}
@media(max-width:960px) and (prefers-reduced-motion:reduce) {
  .price-summary-card,.ps-bar-chev{transition:none;}
}
.wa-handoff-note{margin-top:8px;}

@media(max-width:700px){
  .ps-x{width:30px;height:30px;font-size:18px;}
}

/* ---------------------------------------------------------------------------
   Partner-Rabattcode und Gruppenbuchung
   Das Codefeld ist bewusst gross, einzeilig und in Grossbuchstaben: Der Code
   wird von einem Zettel oder aus einer Mail abgetippt, oft am Handy, oft von
   jemandem, der ihn zum ersten Mal sieht. Ein kleines Feld mit Kleinschrift
   kostet hier mehr Anfragen, als es Platz spart.
--------------------------------------------------------------------------- */
.code-feld{
  font-family:'Fredoka',sans-serif;font-size:19px !important;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;
}
.code-feld::placeholder{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;
  letter-spacing:0;text-transform:none;font-weight:500;color:#9fb9bf;}
/* Angenommen und abgelehnt sagen dasselbe zweimal: ueber die Farbe und ueber
   den Text darunter. Farbe allein waere fuer Farbenblinde keine Auskunft. */
.code-feld.code-ok{border-color:#1a9e6b !important;background:#f2fdf8 !important;}
.code-feld.code-bad{border-color:#c0392b !important;background:#fdf5f4 !important;}

.partner-status{display:flex;align-items:center;gap:8px;margin-top:9px;
  font-size:13px;font-weight:700;line-height:1.45;}
.partner-status.ok{color:#12805a;}
.partner-status.bad{color:#c0392b;}
.partner-status.pruefe{color:#53747c;font-weight:600;}
.partner-status .sym{flex:none;font-size:15px;}

/* Der Hinweis auf den kostenlosen Guide. Er steht direkt am Haekchen, nicht
   im Kleingedruckten: Er ist der Grund, ueberhaupt Gruppe anzukreuzen. */
.gruppe-hinweis{
  display:flex;gap:10px;align-items:flex-start;margin-top:10px;
  padding:11px 13px;border-radius:12px;
  background:linear-gradient(120deg,#eafbfa 0%,#f3fdf9 100%);
  border:1.5px solid #b9e8e0;font-size:13px;color:#0b5f6b;line-height:1.55;
}
.gruppe-hinweis .sym{flex:none;font-size:16px;line-height:1.3;}

.gruppe-personen{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;}
.gruppe-personen label{font-size:13px;font-weight:700;color:var(--navy);}
/* Mindestens 8 - deshalb ein breites Feld mit grossen Ziffern statt eines
   Auswahlmenues: Die Zahl wird getippt, nicht ausgesucht. */
.gruppe-personen input{
  width:110px;font:inherit;font-size:17px;font-weight:700;padding:11px 12px;
  border:1.5px solid #d3ece8;border-radius:12px;background:#f8fefd;color:var(--ink);
}
.gruppe-personen input:focus{outline:none;border-color:var(--teal);}

/* Ein Personenfeld, dessen Zahl von der Gruppe kommt. Es bleibt sichtbar - der
   Gast soll sehen, was fuer diesen Kurs gerechnet wird - aber es nimmt keine
   Eingabe mehr an, weil eine abweichende Zahl der Gruppengroesse widerspraeche. */
.bi-people input.von-gruppe{background:#eef6f7;color:#53747c;cursor:not-allowed;}

/* Die Pflichtmarkierung wandert an das Codefeld, sobald Gruppe angehakt ist. */
.field.pflicht > label::after{
  content:' *';color:#c0392b;font-weight:800;
}

/* Preisuebersicht: der Partnerrabatt in Gruen wie die Ersparnis, der Guide in
   Teal - er ist kein Abzug, sondern eine Zugabe, und darf nicht wie ein
   zweiter Rabatt aussehen. */
.ps-row.ps-partner span:last-child{color:#1a9e6b;font-weight:700;}
.ps-row.ps-guide{color:#0b7f77;font-weight:700;}
.ps-row.ps-guide span:last-child{color:#0b7f77;}

@media (max-width:600px){
  .code-feld{font-size:17px !important;letter-spacing:.06em;}
  .gruppe-personen input{width:100%;}
}

/* Ist der Code Pflicht (Gruppe angekreuzt), darf im selben Label nicht weiter
   "(optional)" stehen - das Sternchen und das Wort widersprechen sich sonst
   direkt nebeneinander. */
.field.pflicht > label .opt{display:none;}

footer .wrap a{text-decoration:underline;text-underline-offset:2px;}
footer .fd-legal-links a{text-decoration:none;}