{"id":35,"date":"2026-08-12T10:10:05","date_gmt":"2026-08-12T10:10:05","guid":{"rendered":"https:\/\/surtuor.ch\/?page_id=35"},"modified":"2026-08-14T10:32:40","modified_gmt":"2026-08-14T10:32:40","slug":"calendar","status":"publish","type":"page","link":"https:\/\/surtuor.ch\/index.php\/calendar\/","title":{"rendered":"Calendar"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"35\" class=\"elementor elementor-35\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a017a28 e-con-full e-flex e-con e-parent\" data-id=\"a017a28\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cba0712 elementor-widget elementor-widget-html\" data-id=\"cba0712\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n  :root{\r\n    --paper:#F6F6F3;\r\n    --panel:#FFFFFF;\r\n    --ink:#1A1A1A;\r\n    --ink-soft:#4A4A46;\r\n    --muted:#8C8C86;\r\n    --hairline:#D9D9D4;\r\n    --rail-red:#C6001A;\r\n    --rail-red-bg:#FBE9EA;\r\n    --alpine-green:#0E6B3A;\r\n    --alpine-green-bg:#E7F3EB;\r\n    --amber:#9A6400;\r\n    --amber-bg:#FBF1DE;\r\n    --board-bg:#17181A;\r\n    --board-ink:#F4F1E8;\r\n    --focus:#0B63C4;\r\n  }\r\n\r\n  .page, .page *{box-sizing:border-box;}\r\n  .page{\r\n    background:var(--paper);\r\n    color:var(--ink);\r\n    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;\r\n    -webkit-font-smoothing:antialiased;\r\n    line-height:1.4;\r\n  }\r\n  ::selection{background:var(--rail-red);color:#fff;}\r\n\r\n  a{color:inherit;}\r\n  button{font-family:inherit;}\r\n\r\n  .page{\r\n    max-width:100%;\r\n    margin:0 auto;\r\n    padding:56px 32px 96px;\r\n  }\r\n\r\n  \/* ---------- Header ---------- *\/\r\n  .masthead{\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:flex-end;\r\n    gap:24px;\r\n    border-bottom:2px solid var(--ink);\r\n    padding-bottom:20px;\r\n    margin-bottom:8px;\r\n  }\r\n  .masthead .eyebrow{\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:12px;\r\n    letter-spacing:.14em;\r\n    text-transform:uppercase;\r\n    color:var(--rail-red);\r\n    font-weight:600;\r\n    margin:0 0 10px;\r\n  }\r\n  .masthead h1{\r\n    font-size:clamp(30px,5vw,50px);\r\n    font-weight:800;\r\n    letter-spacing:-0.02em;\r\n    margin:0;\r\n  }\r\n  .masthead .year{\r\n    color:var(--rail-red);\r\n  }\r\n  .masthead .meta{\r\n    text-align:right;\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:12px;\r\n    color:var(--ink-soft);\r\n    line-height:1.7;\r\n  }\r\n\r\n  .subline{\r\n    display:flex;\r\n    flex-wrap:wrap;\r\n    justify-content:space-between;\r\n    align-items:center;\r\n    gap:16px;\r\n    padding:16px 0 32px;\r\n    border-bottom:1px solid var(--hairline);\r\n    margin-bottom:16px;\r\n  }\r\n  .subline p{\r\n    margin:0;\r\n    color:var(--ink-soft);\r\n    max-width:56ch;\r\n    font-size:15px;\r\n  }\r\n  .subline p.benefit-line{\r\n    color:var(--rail-red);\r\n    font-weight:700;\r\n    margin-top:6px;\r\n  }\r\n  .legend{\r\n    display:flex;\r\n    gap:10px;\r\n    flex-shrink:0;\r\n  }\r\n  .tag{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:7px;\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:11px;\r\n    font-weight:600;\r\n    letter-spacing:.05em;\r\n    text-transform:uppercase;\r\n    padding:6px 12px;\r\n    border-radius:999px;\r\n  }\r\n  .tag.available{ background:var(--alpine-green-bg); color:var(--alpine-green); }\r\n  .tag.booked{ background:var(--rail-red-bg); color:var(--rail-red); }\r\n  .tag .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}\r\n\r\n  .stay-note{\r\n    display:flex;\r\n    gap:22px;\r\n    flex-wrap:wrap;\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:12px;\r\n    color:var(--ink-soft);\r\n    padding:14px 0 40px;\r\n  }\r\n  .stay-note span b{ color:var(--ink); }\r\n\r\n  \/* ---------- Calendar grid ---------- *\/\r\n  .grid{\r\n    display:grid;\r\n    grid-template-columns:repeat(3,1fr);\r\n    gap:1px;\r\n    background:var(--hairline);\r\n    border:1px solid var(--hairline);\r\n    margin-bottom:56px;\r\n  }\r\n  @media (max-width:1023px){\r\n    .grid{ grid-template-columns:repeat(2,1fr); }\r\n  }\r\n  @media (max-width:599px){\r\n    .grid{ grid-template-columns:1fr; }\r\n  }\r\n\r\n  .month{\r\n    background:var(--panel);\r\n    padding:20px 20px 22px;\r\n    display:flex;\r\n    flex-direction:column;\r\n  }\r\n  .month.is-booked{ background:#FCFAFA; }\r\n  .month.is-winter .month-num{ color:var(--rail-red); }\r\n  .month-head{\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:baseline;\r\n    margin-bottom:2px;\r\n  }\r\n  .month-head h2{\r\n    font-size:18px;\r\n    font-weight:700;\r\n    margin:0;\r\n    letter-spacing:-0.01em;\r\n  }\r\n  .month-num{\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:11px;\r\n    color:var(--muted);\r\n  }\r\n  .month-status{\r\n    margin:8px 0 14px;\r\n    display:flex;\r\n    gap:6px;\r\n    flex-wrap:wrap;\r\n  }\r\n  .month-price{\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:12px;\r\n    color:var(--ink-soft);\r\n    margin-bottom:14px;\r\n    min-height:16px;\r\n  }\r\n  .month-price b{ color:var(--ink); font-weight:600; }\r\n\r\n  .weekday-row{\r\n    display:grid;\r\n    grid-template-columns:repeat(7,1fr);\r\n    margin-bottom:4px;\r\n  }\r\n  .weekday-row span{\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:10px;\r\n    color:var(--muted);\r\n    text-align:center;\r\n  }\r\n  .day-grid{\r\n    display:grid;\r\n    grid-template-columns:repeat(7,1fr);\r\n    gap:2px;\r\n  }\r\n  .day{\r\n    aspect-ratio:1;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:12px;\r\n    background:transparent;\r\n    border:1px solid transparent;\r\n    border-radius:3px;\r\n    color:var(--ink);\r\n    cursor:pointer;\r\n    position:relative;\r\n  }\r\n  .day.empty{ cursor:default; visibility:hidden; }\r\n  .day.blocked{\r\n    color:#C9B9BA;\r\n    cursor:not-allowed;\r\n    text-decoration:line-through;\r\n    text-decoration-color:#DCC9CA;\r\n  }\r\n  .day.selectable:hover{\r\n    background:var(--alpine-green-bg);\r\n    border-color:var(--alpine-green);\r\n  }\r\n  .day:focus-visible{\r\n    outline:2px solid var(--focus);\r\n    outline-offset:1px;\r\n  }\r\n  .day.range-start,.day.range-end{\r\n    background:var(--ink);\r\n    color:#fff;\r\n    font-weight:700;\r\n  }\r\n  .day.in-range{\r\n    background:var(--alpine-green-bg);\r\n    color:var(--alpine-green);\r\n    font-weight:600;\r\n    border-radius:0;\r\n  }\r\n  .day.range-invalid.range-start,.day.range-invalid.range-end{ background:var(--rail-red); }\r\n  .day.range-invalid.in-range{ background:var(--rail-red-bg); color:var(--rail-red); }\r\n  .day.range-start{ border-radius:3px 0 0 3px; }\r\n  .day.range-end{ border-radius:0 3px 3px 0; }\r\n  .day.range-start.range-end{ border-radius:3px; }\r\n\r\n  \/* ---------- Selection summary + split-flap board ---------- *\/\r\n  .summary{\r\n    display:grid;\r\n    grid-template-columns:1.1fr 1fr;\r\n    gap:1px;\r\n    background:var(--hairline);\r\n    border:1px solid var(--hairline);\r\n    margin-bottom:56px;\r\n  }\r\n  @media (max-width:820px){ .summary{ grid-template-columns:1fr; } }\r\n\r\n  .summary-panel{\r\n    background:var(--panel);\r\n    padding:28px 28px 30px;\r\n  }\r\n  .summary-panel h3{\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:11px;\r\n    letter-spacing:.12em;\r\n    text-transform:uppercase;\r\n    color:var(--muted);\r\n    margin:0 0 18px;\r\n    font-weight:600;\r\n  }\r\n  .range-dates{\r\n    display:flex;\r\n    gap:28px;\r\n    margin-bottom:18px;\r\n  }\r\n  .range-dates div{ flex:1; }\r\n  .range-dates .label{\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:10px;\r\n    color:var(--muted);\r\n    text-transform:uppercase;\r\n    letter-spacing:.08em;\r\n    margin-bottom:4px;\r\n  }\r\n  .range-dates .value{\r\n    font-size:19px;\r\n    font-weight:700;\r\n  }\r\n  .range-dates .value.placeholder{\r\n    color:var(--muted);\r\n    font-weight:500;\r\n    font-size:15px;\r\n  }\r\n  .breakdown{\r\n    list-style:none;\r\n    margin:0;\r\n    padding:14px 0 0;\r\n    border-top:1px solid var(--hairline);\r\n  }\r\n  .breakdown li{\r\n    display:flex;\r\n    justify-content:space-between;\r\n    font-size:13px;\r\n    color:var(--ink-soft);\r\n    padding:4px 0;\r\n    font-family:'IBM Plex Mono',monospace;\r\n  }\r\n  .breakdown .empty-note{\r\n    font-family:'Inter',sans-serif;\r\n    color:var(--muted);\r\n    font-size:14px;\r\n  }\r\n  .hint{\r\n    font-size:13px;\r\n    color:var(--muted);\r\n    margin-top:14px;\r\n  }\r\n  .hint.error{ color:var(--rail-red); font-weight:600; }\r\n  .reset-btn{\r\n    margin-top:16px;\r\n    background:none;\r\n    border:1px solid var(--hairline);\r\n    color:var(--ink-soft);\r\n    font-size:12px;\r\n    padding:8px 14px;\r\n    border-radius:3px;\r\n    cursor:pointer;\r\n  }\r\n  .reset-btn:hover{ border-color:var(--ink); color:var(--ink); }\r\n\r\n  \/* split-flap board *\/\r\n  .board-panel{\r\n    background:var(--board-bg);\r\n    padding:28px 28px 30px;\r\n    display:flex;\r\n    flex-direction:column;\r\n    justify-content:center;\r\n  }\r\n  .board-panel h3{\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:11px;\r\n    letter-spacing:.12em;\r\n    text-transform:uppercase;\r\n    color:#8f9089;\r\n    margin:0 0 18px;\r\n    font-weight:600;\r\n  }\r\n  .board-row{\r\n    display:flex;\r\n    align-items:baseline;\r\n    gap:10px;\r\n    flex-wrap:wrap;\r\n  }\r\n  .board-currency{\r\n    font-family:'IBM Plex Mono',monospace;\r\n    color:var(--rail-red);\r\n    font-size:15px;\r\n    font-weight:700;\r\n    letter-spacing:.06em;\r\n  }\r\n  .flap-set{\r\n    display:flex;\r\n    gap:3px;\r\n  }\r\n  .flap{\r\n    background:#232427;\r\n    color:var(--board-ink);\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-weight:700;\r\n    font-size:34px;\r\n    width:26px;\r\n    text-align:center;\r\n    padding:6px 2px;\r\n    border-radius:2px;\r\n    box-shadow:inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);\r\n    transition:transform .18s ease, opacity .18s ease;\r\n  }\r\n  .flap.sep{\r\n    background:transparent;\r\n    color:#6d6e68;\r\n    width:10px;\r\n    font-size:20px;\r\n  }\r\n  .flap.flip{\r\n    transform:rotateX(60deg);\r\n    opacity:.4;\r\n  }\r\n  .board-sub{\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:12px;\r\n    color:#8f9089;\r\n    margin-top:14px;\r\n  }\r\n  .board-sub b{ color:var(--board-ink); font-weight:600; }\r\n\r\n  @media (prefers-reduced-motion:reduce){\r\n    .flap{ transition:none; }\r\n  }\r\n\r\n  \/* ---------- Contact form ---------- *\/\r\n  .contact{\r\n    border-top:2px solid var(--ink);\r\n    padding-top:40px;\r\n  }\r\n  .contact-head{\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:baseline;\r\n    gap:16px;\r\n    margin-bottom:12px;\r\n    flex-wrap:wrap;\r\n  }\r\n  .contact-head h2{\r\n    font-size:24px;\r\n    font-weight:800;\r\n    margin:0;\r\n    letter-spacing:-0.01em;\r\n  }\r\n  .contact-head p{\r\n    margin:0;\r\n    font-size:13px;\r\n    color:var(--muted);\r\n    max-width:40ch;\r\n    font-family:'IBM Plex Mono',monospace;\r\n  }\r\n  .disclaimer{\r\n    background:var(--amber-bg);\r\n    color:var(--amber);\r\n    font-size:13px;\r\n    font-weight:600;\r\n    padding:10px 14px;\r\n    border-radius:3px;\r\n    margin-bottom:24px;\r\n    display:inline-block;\r\n  }\r\n  form.request{\r\n    display:grid;\r\n    grid-template-columns:1fr 1fr;\r\n    gap:22px 24px;\r\n    background:var(--panel);\r\n    border:1px solid var(--hairline);\r\n    padding:28px;\r\n  }\r\n  .field{ display:flex; flex-direction:column; gap:6px; }\r\n  .field.full{ grid-column:1 \/ -1; }\r\n  .field label{\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:11px;\r\n    text-transform:uppercase;\r\n    letter-spacing:.08em;\r\n    color:var(--ink-soft);\r\n  }\r\n  .field input,.field textarea{\r\n    border:1px solid var(--hairline);\r\n    border-radius:3px;\r\n    padding:10px 12px;\r\n    font-family:'Inter',sans-serif;\r\n    font-size:14px;\r\n    color:var(--ink);\r\n    background:var(--paper);\r\n  }\r\n  .field input:focus,.field textarea:focus{\r\n    outline:none;\r\n    border-color:var(--focus);\r\n    box-shadow:0 0 0 3px rgba(11,99,196,.12);\r\n  }\r\n  .field textarea{ resize:vertical; min-height:96px; font-family:'IBM Plex Mono',monospace; font-size:13px; }\r\n  .field input:read-only{ color:var(--ink-soft); background:#F0F0EC; }\r\n\r\n  .submit-row{\r\n    grid-column:1 \/ -1;\r\n    display:flex;\r\n    align-items:center;\r\n    gap:16px;\r\n    flex-wrap:wrap;\r\n    margin-top:6px;\r\n  }\r\n  .submit-btn{\r\n    background:var(--ink);\r\n    color:#fff;\r\n    border:none;\r\n    padding:13px 26px;\r\n    font-size:14px;\r\n    font-weight:600;\r\n    border-radius:3px;\r\n    cursor:pointer;\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:8px;\r\n  }\r\n  .submit-btn:hover{ background:var(--rail-red); }\r\n  .submit-btn:disabled{\r\n    background:#C9C9C4;\r\n    cursor:not-allowed;\r\n  }\r\n  .submit-note{\r\n    font-size:12px;\r\n    color:var(--muted);\r\n    max-width:44ch;\r\n  }\r\n  .form-msg{\r\n    grid-column:1\/-1;\r\n    font-size:13px;\r\n    padding:10px 14px;\r\n    border-radius:3px;\r\n    display:none;\r\n  }\r\n  .form-msg.show{ display:block; }\r\n  .form-msg.error{ background:var(--rail-red-bg); color:var(--rail-red); }\r\n  .form-msg.ok{ background:var(--alpine-green-bg); color:var(--alpine-green); }\r\n\r\n  @media (max-width:640px){\r\n    form.request{ grid-template-columns:1fr; }\r\n    .field.full{ grid-column:auto; }\r\n    .page{ padding:36px 18px 64px; }\r\n    .masthead{ flex-direction:column; align-items:flex-start; }\r\n    .masthead .meta{ text-align:left; }\r\n  }\r\n<\/style>\r\n<div class=\"page\">\r\n\r\n  <header class=\"masthead\">\r\n    <div>\r\n      <p class=\"eyebrow\">Surtuor \u00b7 Seasonal Rental<\/p>\r\n      <h1>Interactive Calendar <span class=\"year\">2027\/2028<\/span><\/h1>\r\n    <\/div>\r\n    <div class=\"meta\">\r\n      January 2027 \u2013 April 2028<br>\r\n      Prices per night in CHF\r\n    <\/div>\r\n  <\/header>\r\n\r\n  <div class=\"subline\">\r\n    <div>\r\n      <p>Plan your journey selecting arrival and departure dates directly in this calendar. The total price of your stay is calculated automatically across any period your stay covers.<\/p>\r\n      <p class=\"benefit-line\">Check your benefit chance: with 100 nights or more you save 12%, with 135 nights or more you save 16%.<\/p>\r\n    <\/div>\r\n    <div class=\"legend\">\r\n      <span class=\"tag available\"><span class=\"dot\"><\/span>Available<\/span>\r\n      <span class=\"tag booked\"><span class=\"dot\"><\/span>Booked<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"stay-note\">\r\n    <span>Minimum stay, standard season: <b>58 nights<\/b><\/span>\r\n    <span>Minimum stay, winter season (Dec\u2013Mar): <b>116 nights<\/b><\/span>\r\n    <span>Discount from 100 nights: <b>12%<\/b><\/span>\r\n    <span>Discount from 135 nights: <b>16%<\/b><\/span>\r\n  <\/div>\r\n\r\n  <div class=\"grid\" id=\"calendarGrid\"><\/div>\r\n\r\n  <div class=\"summary\">\r\n    <div class=\"summary-panel\">\r\n      <h3>Your selection<\/h3>\r\n      <div class=\"range-dates\">\r\n        <div>\r\n          <div class=\"label\">Arrival<\/div>\r\n          <div class=\"value placeholder\" id=\"startLabel\">\u2014 select \u2014<\/div>\r\n        <\/div>\r\n        <div>\r\n          <div class=\"label\">Departure<\/div>\r\n          <div class=\"value placeholder\" id=\"endLabel\">\u2014 select \u2014<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <ul class=\"breakdown\" id=\"breakdownList\">\r\n        <li class=\"empty-note\">No dates selected yet.<\/li>\r\n      <\/ul>\r\n      <p class=\"hint\" id=\"hintText\">Click an available date for your arrival, then a second one for your departure.<\/p>\r\n      <button class=\"reset-btn\" id=\"resetBtn\" type=\"button\">Reset selection<\/button>\r\n    <\/div>\r\n\r\n    <div class=\"board-panel\">\r\n      <h3>Total price<\/h3>\r\n      <div class=\"board-row\">\r\n        <span class=\"board-currency\">CHF<\/span>\r\n        <div class=\"flap-set\" id=\"flapSet\"><\/div>\r\n        <span class=\"board-currency\" style=\"color:#8f9089;font-size:12px;\">.00<\/span>\r\n      <\/div>\r\n      <p class=\"board-sub\" id=\"nightsSub\"><b>0<\/b> nights selected<\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <section class=\"contact\">\r\n    <div class=\"contact-head\">\r\n      <h2>Send an enquiry<\/h2>\r\n      <p>Opens your email client with the details filled in \u2014 nothing is sent automatically.<\/p>\r\n    <\/div>\r\n    <p class=\"disclaimer\">This is not a booking confirmation \u2014 it is only a reservation enquiry.<\/p>\r\n    <form class=\"request\" id=\"requestForm\">\r\n      <div class=\"field\">\r\n        <label for=\"name\">Name<\/label>\r\n        <input type=\"text\" id=\"name\" name=\"name\" required autocomplete=\"name\">\r\n      <\/div>\r\n      <div class=\"field\">\r\n        <label for=\"email\">Email<\/label>\r\n        <input type=\"email\" id=\"email\" name=\"email\" required autocomplete=\"email\">\r\n      <\/div>\r\n      <div class=\"field\">\r\n        <label for=\"checkin\">Arrival<\/label>\r\n        <input type=\"text\" id=\"checkin\" readonly placeholder=\"\u2014 select in the calendar \u2014\">\r\n      <\/div>\r\n      <div class=\"field\">\r\n        <label for=\"checkout\">Departure<\/label>\r\n        <input type=\"text\" id=\"checkout\" readonly placeholder=\"\u2014 select in the calendar \u2014\">\r\n      <\/div>\r\n      <div class=\"field full\">\r\n        <label for=\"total\">Calculated total price<\/label>\r\n        <input type=\"text\" id=\"total\" readonly placeholder=\"\u2014 select in the calendar \u2014\">\r\n      <\/div>\r\n      <div class=\"field full\">\r\n        <label for=\"message\">Message<\/label>\r\n        <textarea id=\"message\" name=\"message\" placeholder=\"Any further details about your enquiry \u2026\"><\/textarea>\r\n      <\/div>\r\n      <div class=\"form-msg\" id=\"formMsg\"><\/div>\r\n      <div class=\"submit-row\">\r\n        <button class=\"submit-btn\" type=\"submit\" id=\"submitBtn\" disabled>Send enquiry by email<\/button>\r\n        <span class=\"submit-note\">Please select an arrival and departure date in the calendar above first.<\/span>\r\n      <\/div>\r\n    <\/form>\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  const RECIPIENT = \"info@surtuor.ch\";\r\n\r\n  \/\/ year, monthIndex (0-based), display name, status, price per night (CHF)\r\n  const MONTHS = [\r\n    { year:2027, m:0,  name:\"January\",   status:\"booked\",    price:null },\r\n    { year:2027, m:1,  name:\"February\",  status:\"booked\",    price:null },\r\n    { year:2027, m:2,  name:\"March\",     status:\"booked\",    price:null },\r\n    { year:2027, m:3,  name:\"April\",     status:\"available\", price:124 },\r\n    { year:2027, m:4,  name:\"May\",       status:\"available\", price:108 },\r\n    { year:2027, m:5,  name:\"June\",      status:\"available\", price:124 },\r\n    { year:2027, m:6,  name:\"July\",      status:\"available\", price:128 },\r\n    { year:2027, m:7,  name:\"August\",    status:\"available\", price:128 },\r\n    { year:2027, m:8,  name:\"September\", status:\"available\", price:108 },\r\n    { year:2027, m:9,  name:\"October\",   status:\"available\", price:128 },\r\n    { year:2027, m:10, name:\"November\",  status:\"available\", price:108 },\r\n    { year:2027, m:11, name:\"December\",  status:\"available\", price:136 },\r\n    { year:2028, m:0,  name:\"January\",   status:\"available\", price:136 },\r\n    { year:2028, m:1,  name:\"February\",  status:\"available\", price:136 },\r\n    { year:2028, m:2,  name:\"March\",     status:\"available\", price:128 },\r\n    { year:2028, m:3,  name:\"April\",     status:\"available\", price:124 },\r\n  ];\r\n\r\n  \/\/ Winter season for the minimum-stay rule: December through March.\r\n  const WINTER_SET = new Set([11,0,1,2]);\r\n\r\n  const WEEKDAYS = [\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\",\"Sat\",\"Sun\"];\r\n  const grid = document.getElementById('calendarGrid');\r\n\r\n  let rangeStart = null; \/\/ Date\r\n  let rangeEnd = null;   \/\/ Date\r\n\r\n  function daysInMonth(year, m){ return new Date(year, m+1, 0).getDate(); }\r\n  function mondayIndex(d){ return (d.getDay() + 6) % 7; }\r\n  function fmt(d){\r\n    if(!d) return null;\r\n    return d.getDate().toString().padStart(2,'0') + '.' + (d.getMonth()+1).toString().padStart(2,'0') + '.' + d.getFullYear();\r\n  }\r\n  function isoFmt(d){\r\n    return d.getFullYear() + '-' + (d.getMonth()+1).toString().padStart(2,'0') + '-' + d.getDate().toString().padStart(2,'0');\r\n  }\r\n  function addNights(date, n){\r\n    const d = new Date(date);\r\n    d.setDate(d.getDate()+n);\r\n    return d;\r\n  }\r\n  function monthEntry(monthIndex, year){\r\n    return MONTHS.find(mo => mo.m === monthIndex && mo.year === year);\r\n  }\r\n\r\n  \/\/ ---------- build calendar ----------\r\n  MONTHS.forEach((mData) => {\r\n    const monthEl = document.createElement('div');\r\n    monthEl.className = 'month'\r\n      + (mData.status === 'booked' ? ' is-booked' : '')\r\n      + (WINTER_SET.has(mData.m) ? ' is-winter' : '');\r\n\r\n    const head = document.createElement('div');\r\n    head.className = 'month-head';\r\n    head.innerHTML = `<h2>${mData.name}<\/h2><span class=\"month-num\">${(mData.m+1).toString().padStart(2,'0')}\/${mData.year}<\/span>`;\r\n    monthEl.appendChild(head);\r\n\r\n    const statusEl = document.createElement('div');\r\n    statusEl.className = 'month-status';\r\n    statusEl.innerHTML = mData.status === 'booked'\r\n      ? `<span class=\"tag booked\"><span class=\"dot\"><\/span>Booked<\/span>`\r\n      : `<span class=\"tag available\"><span class=\"dot\"><\/span>Available<\/span>`;\r\n    monthEl.appendChild(statusEl);\r\n\r\n    const priceEl = document.createElement('div');\r\n    priceEl.className = 'month-price';\r\n    priceEl.innerHTML = mData.price ? `<b>CHF ${mData.price}<\/b> \/ night` : '';\r\n    monthEl.appendChild(priceEl);\r\n\r\n    const wdRow = document.createElement('div');\r\n    wdRow.className = 'weekday-row';\r\n    WEEKDAYS.forEach(w => {\r\n      const s = document.createElement('span');\r\n      s.textContent = w;\r\n      wdRow.appendChild(s);\r\n    });\r\n    monthEl.appendChild(wdRow);\r\n\r\n    const dayGrid = document.createElement('div');\r\n    dayGrid.className = 'day-grid';\r\n\r\n    const firstDay = new Date(mData.year, mData.m, 1);\r\n    const leadEmpty = mondayIndex(firstDay);\r\n    for(let i=0;i<leadEmpty;i++){\r\n      const e = document.createElement('div');\r\n      e.className = 'day empty';\r\n      dayGrid.appendChild(e);\r\n    }\r\n\r\n    const total = daysInMonth(mData.year, mData.m);\r\n    for(let d=1; d<=total; d++){\r\n      const cell = document.createElement('button');\r\n      cell.type = 'button';\r\n      const thisDate = new Date(mData.year, mData.m, d);\r\n      cell.dataset.date = isoFmt(thisDate);\r\n      cell.textContent = d;\r\n\r\n      if(mData.status === 'booked'){\r\n        cell.className = 'day blocked';\r\n        cell.disabled = true;\r\n        cell.setAttribute('aria-disabled','true');\r\n      } else {\r\n        cell.className = 'day selectable';\r\n        cell.addEventListener('click', () => handleDayClick(thisDate));\r\n      }\r\n      dayGrid.appendChild(cell);\r\n    }\r\n\r\n    monthEl.appendChild(dayGrid);\r\n    grid.appendChild(monthEl);\r\n  });\r\n\r\n  \/\/ ---------- selection logic ----------\r\n  function priceForDate(date){\r\n    const entry = monthEntry(date.getMonth(), date.getFullYear());\r\n    return entry ? entry.price : null;\r\n  }\r\n\r\n  function rangeIncludesWinter(start, end){\r\n    let cursor = new Date(start.getFullYear(), start.getMonth(), 1);\r\n    const last = new Date(end.getFullYear(), end.getMonth(), 1);\r\n    while(cursor <= last){\r\n      if(WINTER_SET.has(cursor.getMonth())) return true;\r\n      cursor = new Date(cursor.getFullYear(), cursor.getMonth()+1, 1);\r\n    }\r\n    return false;\r\n  }\r\n\r\n  const MIN_NIGHTS_STANDARD = 58;\r\n  const MIN_NIGHTS_WINTER = 116;\r\n\r\n  function requiredMinNights(start, end){\r\n    if(!end) return WINTER_SET.has(start.getMonth()) ? MIN_NIGHTS_WINTER : MIN_NIGHTS_STANDARD;\r\n    return rangeIncludesWinter(start, end) ? MIN_NIGHTS_WINTER : MIN_NIGHTS_STANDARD;\r\n  }\r\n\r\n  function handleDayClick(date){\r\n    if(!rangeStart || (rangeStart && rangeEnd)){\r\n      rangeStart = date;\r\n      rangeEnd = null;\r\n    } else {\r\n      if(date.getTime() === rangeStart.getTime()){\r\n        rangeStart = null; rangeEnd = null;\r\n      } else if(date < rangeStart){\r\n        rangeStart = date; rangeEnd = null;\r\n      } else {\r\n        rangeEnd = date;\r\n      }\r\n    }\r\n    render();\r\n  }\r\n\r\n  function resetSelection(){\r\n    rangeStart = null; rangeEnd = null;\r\n    render();\r\n  }\r\n  document.getElementById('resetBtn').addEventListener('click', resetSelection);\r\n\r\n  \/\/ Long-stay discounts: highest matching tier applies to the gross total.\r\n  const DISCOUNT_TIERS = [\r\n    { minNights: 135, rate: 0.16 },\r\n    { minNights: 100, rate: 0.12 },\r\n  ];\r\n\r\n  function discountForNights(nights){\r\n    const tier = DISCOUNT_TIERS.find(t => nights >= t.minNights);\r\n    return tier ? tier.rate : 0;\r\n  }\r\n\r\n  function computeBreakdown(){\r\n    if(!rangeStart || !rangeEnd) return null;\r\n    const nightly = {};\r\n    let cursor = new Date(rangeStart);\r\n    let nights = 0;\r\n    while(cursor < rangeEnd){\r\n      const key = cursor.getFullYear()+'-'+cursor.getMonth();\r\n      if(!nightly[key]) nightly[key] = { year:cursor.getFullYear(), m:cursor.getMonth(), count:0 };\r\n      nightly[key].count++;\r\n      nights++;\r\n      cursor.setDate(cursor.getDate()+1);\r\n    }\r\n    let grossTotal = 0;\r\n    const lines = Object.values(nightly).sort((a,b)=> (a.year-b.year) || (a.m-b.m)).map(entry => {\r\n      const monthData = monthEntry(entry.m, entry.year);\r\n      const price = monthData.price;\r\n      const subtotal = price * entry.count;\r\n      grossTotal += subtotal;\r\n      return { month: `${monthData.name} ${entry.year}`, count: entry.count, price, subtotal };\r\n    });\r\n    const discountRate = discountForNights(nights);\r\n    const discountAmount = Math.round(grossTotal * discountRate);\r\n    const total = grossTotal - discountAmount;\r\n    return { lines, grossTotal, discountRate, discountAmount, total, nights };\r\n  }\r\n\r\n  function render(){\r\n    const minNights = rangeStart ? requiredMinNights(rangeStart, rangeEnd) : null;\r\n    const minEndDate = rangeStart ? addNights(rangeStart, minNights) : null;\r\n    const isInvalid = !!(rangeStart && rangeEnd && rangeEnd < minEndDate);\r\n\r\n    document.querySelectorAll('.day.selectable').forEach(cell => {\r\n      cell.classList.remove('range-start','range-end','in-range','range-invalid');\r\n      const d = new Date(cell.dataset.date);\r\n      if(rangeStart && d.getTime() === rangeStart.getTime()) cell.classList.add('range-start');\r\n      if(rangeEnd && d.getTime() === rangeEnd.getTime()) cell.classList.add('range-end');\r\n      if(rangeStart && rangeEnd && d > rangeStart && d < rangeEnd) cell.classList.add('in-range');\r\n      if(isInvalid && rangeStart && rangeEnd && d >= rangeStart && d <= rangeEnd) cell.classList.add('range-invalid');\r\n    });\r\n\r\n    const startLabel = document.getElementById('startLabel');\r\n    const endLabel = document.getElementById('endLabel');\r\n    const breakdownList = document.getElementById('breakdownList');\r\n    const hintText = document.getElementById('hintText');\r\n    const nightsSub = document.getElementById('nightsSub');\r\n\r\n    hintText.classList.remove('error');\r\n\r\n    if(rangeStart){\r\n      startLabel.textContent = fmt(rangeStart);\r\n      startLabel.classList.remove('placeholder');\r\n    } else {\r\n      startLabel.textContent = '\u2014 select \u2014';\r\n      startLabel.classList.add('placeholder');\r\n    }\r\n    if(rangeEnd){\r\n      endLabel.textContent = fmt(rangeEnd);\r\n      endLabel.classList.remove('placeholder');\r\n    } else {\r\n      endLabel.textContent = '\u2014 select \u2014';\r\n      endLabel.classList.add('placeholder');\r\n    }\r\n\r\n    let total = 0, nights = 0, formValid = false, discountRate = 0;\r\n\r\n    if(rangeStart && !rangeEnd){\r\n      const seasonLabel = minNights === MIN_NIGHTS_WINTER ? 'winter season' : 'standard season';\r\n      hintText.textContent = `Now select your departure date. Minimum stay from this date: ${minNights} nights (${seasonLabel}).`;\r\n      breakdownList.innerHTML = '<li class=\"empty-note\">Departure date not yet set.<\/li>';\r\n    } else if(rangeStart && rangeEnd && isInvalid){\r\n      const ruleLabel = minNights === MIN_NIGHTS_WINTER ? 'a booking covering the winter season (Dec\u2013Mar)' : 'this booking';\r\n      hintText.textContent = `The minimum stay for ${ruleLabel} is ${minNights} nights. Please choose a departure date on or after ${fmt(minEndDate)}, or move your arrival date.`;\r\n      hintText.classList.add('error');\r\n      breakdownList.innerHTML = '<li class=\"empty-note\">Selection too short \u2014 see note above.<\/li>';\r\n    } else if(rangeStart && rangeEnd){\r\n      const result = computeBreakdown();\r\n      total = result.total; nights = result.nights; discountRate = result.discountRate;\r\n      formValid = true;\r\n      hintText.textContent = 'Selection complete. You can send the enquiry below or reset your selection.';\r\n      let rows = result.lines.map(l =>\r\n        `<li><span>${l.count} nights \u00b7 ${l.month} (CHF ${l.price})<\/span><span>CHF ${l.subtotal.toLocaleString('en-GB')}<\/span><\/li>`\r\n      ).join('');\r\n      rows += `<li><span>Subtotal<\/span><span>CHF ${result.grossTotal.toLocaleString('en-GB')}<\/span><\/li>`;\r\n      if(result.discountRate > 0){\r\n        rows += `<li><span>Long-stay discount (${Math.round(result.discountRate*100)}%)<\/span><span>\u2212CHF ${result.discountAmount.toLocaleString('en-GB')}<\/span><\/li>`;\r\n      }\r\n      rows += `<li style=\"font-weight:700;color:var(--ink);\"><span>Total<\/span><span>CHF ${result.total.toLocaleString('en-GB')}<\/span><\/li>`;\r\n      breakdownList.innerHTML = rows;\r\n    } else {\r\n      hintText.textContent = 'Click an available date for your arrival, then a second one for your departure.';\r\n      breakdownList.innerHTML = '<li class=\"empty-note\">No dates selected yet.<\/li>';\r\n    }\r\n\r\n    nightsSub.innerHTML = `<b>${nights}<\/b> nights selected`;\r\n    updateFlapBoard(total);\r\n    syncForm(formValid ? rangeStart : null, formValid ? rangeEnd : null, total, nights, discountRate);\r\n  }\r\n\r\n  \/\/ ---------- split-flap total board ----------\r\n  const flapSet = document.getElementById('flapSet');\r\n  let lastDigits = null;\r\n\r\n  function formatChf(n){\r\n    \/\/ Swiss thousands separator: apostrophe\r\n    return Math.round(n).toString().replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, \"'\");\r\n  }\r\n\r\n  function updateFlapBoard(total){\r\n    const str = formatChf(total).padStart(4, ' ');\r\n    const chars = str.split('');\r\n    if(!lastDigits || lastDigits.length !== chars.length){\r\n      flapSet.innerHTML = '';\r\n      chars.forEach(ch => {\r\n        const tile = document.createElement('div');\r\n        tile.className = ch === \"'\" ? 'flap sep' : 'flap';\r\n        tile.textContent = ch === ' ' ? '' : ch;\r\n        flapSet.appendChild(tile);\r\n      });\r\n      lastDigits = chars;\r\n      return;\r\n    }\r\n    const tiles = flapSet.children;\r\n    chars.forEach((ch, i) => {\r\n      if(lastDigits[i] !== ch){\r\n        const tile = tiles[i];\r\n        tile.classList.add('flip');\r\n        setTimeout(() => {\r\n          tile.textContent = ch === ' ' ? '' : ch;\r\n          tile.classList.remove('flip');\r\n        }, 140);\r\n      }\r\n    });\r\n    lastDigits = chars;\r\n  }\r\n\r\n  \/\/ ---------- contact form ----------\r\n  const form = document.getElementById('requestForm');\r\n  const checkinInput = document.getElementById('checkin');\r\n  const checkoutInput = document.getElementById('checkout');\r\n  const totalInput = document.getElementById('total');\r\n  const submitBtn = document.getElementById('submitBtn');\r\n  const submitNote = document.querySelector('.submit-note');\r\n  const formMsg = document.getElementById('formMsg');\r\n\r\n  function syncForm(start, end, total, nights, discountRate){\r\n    checkinInput.value = start ? fmt(start) : '';\r\n    checkoutInput.value = end ? fmt(end) : '';\r\n    totalInput.value = (start && end)\r\n      ? (discountRate > 0\r\n          ? `CHF ${formatChf(total)}.00 (${nights} nights, incl. ${Math.round(discountRate*100)}% long-stay discount)`\r\n          : `CHF ${formatChf(total)}.00 (${nights} nights)`)\r\n      : '';\r\n    const ready = !!(start && end);\r\n    submitBtn.disabled = !ready;\r\n    submitNote.textContent = ready\r\n      ? 'Opens your email client with the details filled in.'\r\n      : 'Please select a valid arrival and departure date in the calendar above first.';\r\n  }\r\n\r\n  form.addEventListener('submit', function(e){\r\n    e.preventDefault();\r\n    formMsg.className = 'form-msg';\r\n    if(!rangeStart || !rangeEnd || !submitBtn || submitBtn.disabled){\r\n      formMsg.textContent = 'Please select a valid arrival and departure date in the calendar first.';\r\n      formMsg.classList.add('error','show');\r\n      return;\r\n    }\r\n    const name = document.getElementById('name').value.trim();\r\n    const email = document.getElementById('email').value.trim();\r\n    if(!name || !email){\r\n      formMsg.textContent = 'Please provide your name and email address.';\r\n      formMsg.classList.add('error','show');\r\n      return;\r\n    }\r\n    const message = document.getElementById('message').value.trim();\r\n    const result = computeBreakdown();\r\n\r\n    const bodyLines = [\r\n      'Please note: this is not a booking confirmation, only a reservation enquiry.',\r\n      '',\r\n      `Name: ${name}`,\r\n      `Email: ${email}`,\r\n      '',\r\n      `Arrival: ${fmt(rangeStart)}`,\r\n      `Departure: ${fmt(rangeEnd)}`,\r\n      `Nights: ${result.nights}`,\r\n      '',\r\n      'Price breakdown:',\r\n      ...result.lines.map(l => `  ${l.count} nights x CHF ${l.price} (${l.month}) = CHF ${l.subtotal.toLocaleString('en-GB')}`),\r\n      '',\r\n      `Subtotal: CHF ${result.grossTotal.toLocaleString('en-GB')}`,\r\n      ...(result.discountRate > 0 ? [`Long-stay discount (${Math.round(result.discountRate*100)}%): -CHF ${result.discountAmount.toLocaleString('en-GB')}`] : []),\r\n      '',\r\n      `Total price: CHF ${formatChf(result.total)}.00`,\r\n    ];\r\n    if(message){\r\n      bodyLines.push('', 'Message:', message);\r\n    }\r\n\r\n    const subject = encodeURIComponent(`Reservation enquiry (not a booking) ${fmt(rangeStart)} \u2013 ${fmt(rangeEnd)}`);\r\n    const body = encodeURIComponent(bodyLines.join('\\n'));\r\n    const mailto = `mailto:${RECIPIENT}?subject=${subject}&body=${body}`;\r\n\r\n    window.location.href = mailto;\r\n\r\n    formMsg.textContent = 'Your email client is opening \u2014 please send the message from there. Remember, this is an enquiry, not a confirmed booking. The calendar selection below has been cleared so you can start a new enquiry.';\r\n    formMsg.classList.add('ok','show');\r\n\r\n    resetSelection();\r\n  });\r\n\r\n  render();\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ab64c7d e-grid e-con-boxed e-con e-parent\" data-id=\"ab64c7d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<h4 data-interaction-id=\"13f45e2\" class=\"e-heading-base\">Privacy Policy<\/h4>\n\t\t\t\t\t<h4 data-interaction-id=\"35cc691\" class=\"e-35cc691-ecafe30 e-heading-base\">Legal Notice<\/h4>\n\t\t\t\t\t<h4 data-interaction-id=\"f6fd0c1\" class=\"e-f6fd0c1-a14d56c e-heading-base\">Relevant  Links<\/h4>\n\t\t\t\t\t<p class=\"e-2a2185c-d0ca4dd e-paragraph-base\" data-interaction-id=\"2a2185c\">The controller responsible under theSwiss Federal Act on Data Protection is: Aldo Beretta<\/p>\n\t\t\t\t\t<p class=\"e-3df46a9-f2a8c31 e-paragraph-base\" data-interaction-id=\"3df46a9\"><a target=\"_self\" href=\"https:\/\/montemayor.ch\/index.php\/data-processing\/\">Editorial Office: Aldo Beretta<br>Oberwiesenstrasse 1<br>CH-8057 Zurich (Switzerland) <strong>Read<\/strong><\/a><\/p>\n\t\t\t\t\t<p class=\"e-ad82973-c0fb7d3 e-paragraph-base\" data-interaction-id=\"ad82973\"><a href=\"https:\/\/Montemayor.ch\" target=\"_blank\" class=\"e-paragraph-link-base\">\n\t\tMontemayor.ch\n\t<\/a><\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1a3486b e-grid e-con-boxed e-con e-parent\" data-id=\"1a3486b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Surtuor \u00b7 Seasonal Rental Interactive Calendar 2027\/2028 January 2027 \u2013 April 2028 Prices per night in CHF Plan your journey selecting arrival and departure dates directly in this calendar. The total price of your stay is calculated automatically across any period your stay covers. Check your benefit chance: with 100 nights or more you save&hellip;&nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/template-pagebuilder-full-width.php","meta":{"neve_meta_sidebar":"","neve_meta_container":"full-width","neve_meta_enable_content_width":"on","neve_meta_content_width":100,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"on","footnotes":""},"class_list":["post-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/surtuor.ch\/index.php\/wp-json\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/surtuor.ch\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/surtuor.ch\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/surtuor.ch\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/surtuor.ch\/index.php\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":34,"href":"https:\/\/surtuor.ch\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":149,"href":"https:\/\/surtuor.ch\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions\/149"}],"wp:attachment":[{"href":"https:\/\/surtuor.ch\/index.php\/wp-json\/wp\/v2\/media?parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}