/* ==========================================================================
   OREA Hotels & Resorts — Landing Page "Städtereise Prag" (DE)
   Design system extracted from orea.cz (build/website/app.css)
   ========================================================================== */

/* ----- Brand fonts (orea.cz) ------------------------------------------- */
@font-face{font-family:'Urban Grotesk ReBo';src:url('../fonts/UrbanGroteskReBo-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Urban Grotesk ReBo';src:url('../fonts/UrbanGroteskReBo-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Urban Grotesk LiSe';src:url('../fonts/UrbanGroteskLiSe-Bold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Urban Grotesk MeBl';src:url('../fonts/UrbanGroteskMeBl-Regular.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Urban Grotesk MeBl';src:url('../fonts/UrbanGroteskMeBl-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ----- Design tokens (verbatim from orea.cz :root) ---------------------- */
:root{
  --main:#4d5c72;
  --maindark:#303e52;
  --fade:#9badb5;
  --fade2:#b7c6d2;
  --fade3:#eee;
  --fade4:#f7f7f7;
  --accent:#d1b94a;
  --accent2:#c2a937;
  --select:#f7faff;
  --dark:#334157;
  --dark2:#1c2c45;
  --error:#a00;
  --disabled:#c0c6cd;
  --white:#fff;
  --background:#f6f6f6;

  --shadow_basic:0 6px 10px 0 rgba(0,0,0,.05);
  --shadow_elevated:2px 2px 30px 0 rgba(0,0,0,.1);

  --font-body:'Urban Grotesk ReBo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --font-ui:'Urban Grotesk LiSe','Urban Grotesk ReBo',-apple-system,BlinkMacSystemFont,sans-serif;

  --container:1350px;
  --block-gap:100px;
}

/* ----- Base ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{
  margin:0;padding:0;position:relative;
  background-color:var(--background);
  color:var(--main);
  font-family:var(--font-body);
  font-weight:400;font-size:16px;line-height:1.6;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}

h1,h2,h3,h4{color:var(--main);font-family:var(--font-body);font-weight:700;margin:0;line-height:1.15}
h1{font-size:60px}
h2{font-size:48px}
h3{font-size:34px}
h4{font-size:24px}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 30px}

/* Eyebrow — orea.cz .block-title, gold rule after the label */
.block-title{
  display:flex;align-items:center;gap:15px;
  margin:0 0 25px;padding-left:2px;
  color:var(--fade);
  font-family:var(--font-ui);font-size:12px;font-weight:600;
  letter-spacing:2px;line-height:24px;text-transform:uppercase;
}
.block-title::after{content:"";background-color:var(--accent);height:2px;width:80px;flex:0 0 80px}
.block-title.centered{justify-content:center}
.block-title.centered::before{content:"";background-color:var(--accent);height:2px;width:80px;flex:0 0 80px}
.block-title.on-dark{color:var(--fade2)}

.section-lead{font-size:18px;line-height:1.7;color:var(--main);margin:20px 0 0;max-width:760px}
.section-head{margin-bottom:50px}
.section-head.centered{text-align:center}
.section-head.centered .section-lead{margin-left:auto;margin-right:auto}

/* ----- Buttons — orea.cz .button ---------------------------------------- */
.button{
  position:relative;display:inline-block;height:fit-content;
  background-color:var(--main);border:none;outline:none;cursor:pointer;
  color:var(--white);
  font-family:var(--font-ui);font-size:14px;font-weight:600;line-height:1.2;
  padding:15px 22px 11px;
  transition:all .25s ease-in-out;
}
.button-content{display:flex;align-items:center;justify-content:center;gap:10px}
.button:hover{background:var(--maindark)}

/* Primary CTA — orea.cz .button.gold */
.button.gold{background:var(--accent);border:1px solid var(--accent);color:var(--white)}
.button.gold:hover{background:transparent;border:1px solid var(--accent);color:var(--main)}
.button.gold:focus-visible{background:var(--accent)}

/* Primary on photography / dark ground — orea.cz .button.golded */
.button.golded{background:var(--accent);border:1px solid var(--accent);color:var(--white)}
.button.golded:hover,.button.golded:focus-visible{background:var(--accent2);border-color:var(--accent2);color:var(--white)}

.button.inverted{background-color:transparent;border:1px solid var(--main);color:var(--main)}
.button.inverted:hover{background:var(--main);color:var(--white)}
.button.inverted:focus-visible{background:var(--maindark);color:var(--white)}

/* Secondary on photography — outline in white, same geometry as .inverted */
.button.on-image{background-color:transparent;border:1px solid var(--white);color:var(--white)}
.button.on-image:hover{background:var(--white);color:var(--main)}

.button.underlined{background:none;border:1px solid transparent;border-bottom:1px solid var(--accent);color:var(--main);padding:8px 4px 6px}
.button.underlined:hover{border:1px solid var(--accent)}
.button.underlined:focus-visible{background:var(--accent2);border:1px solid var(--accent2);color:var(--main)}

.button.block{display:block;width:100%;text-align:center}

/* ----- Header ----------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--white);
  border-bottom:1px solid rgba(77,92,114,.12);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.site-header .logo{display:flex;align-items:center}
.site-header .logo img{height:34px;width:auto}
.header-right{display:flex;align-items:center;gap:24px}
.header-lang{display:flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:1px;color:var(--fade);border:1px solid rgba(77,92,114,.15);padding:7px 10px 5px}
.header-lang img{width:16px;height:11px}

/* ----- Hero ------------------------------------------------------------- */
.hero{position:relative;display:flex;align-items:center;min-height:clamp(620px,72vh,760px);overflow:hidden}
.hero-image,.hero-image img{position:absolute;inset:0;width:100%;height:100%}
.hero-image img{object-fit:cover;object-position:100% 0}
/* Scrim follows the text column (720px from the container edge) and is gone before the subject on the right */
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,44,69,.84) 0,rgba(28,44,69,.62) max(560px,calc(50% - 115px)),rgba(28,44,69,0) max(1010px,calc(50% + 335px)))}
.hero .container{position:relative;z-index:1;padding-top:70px;padding-bottom:70px}
.hero-content{max-width:720px;color:var(--white);
  text-shadow:rgba(28,44,69,.35) 0 0 3px,rgba(28,44,69,.35) 0 0 13px,rgba(28,44,69,.35) 0 0 13px}
.hero-content h1{color:var(--white);font-size:60px;line-height:1.08;margin-bottom:24px}
.hero-content p{font-size:19px;line-height:1.65;margin:0 0 36px;color:rgba(255,255,255,.94)}
.hero-buttons{display:flex;flex-wrap:wrap;gap:18px 22px;text-shadow:none}
.hero .block-title{color:var(--accent);margin-bottom:20px}
.hero .block-title::after{background-color:var(--accent)}

/* USP strip — orea.cz .uheader-usp */
.usp-strip{position:relative;background-color:var(--fade3);border-bottom:1px solid var(--accent)}
.usp-strip .container{display:flex;align-items:stretch;padding:0}
.usp-item{flex:1;display:flex;align-items:center;justify-content:center;gap:14px;padding:24px 20px;text-align:left;font-size:15px;font-weight:700;color:var(--main)}
.usp-item + .usp-item{border-left:1px solid rgba(77,92,114,.14)}
.usp-item svg{flex:0 0 26px;width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.6}

/* ----- Main flow -------------------------------------------------------- */
main{display:flex;flex-direction:column;gap:var(--block-gap);padding-bottom:var(--block-gap)}
section{scroll-margin-top:90px}

/* ----- Direct booking advantages ---------------------------------------- */
.advantages-grid{display:grid;grid-template-columns:5fr 7fr;gap:60px;align-items:start}
.advantage-list{display:flex;flex-direction:column;gap:0}
.advantage-row{display:flex;align-items:flex-start;gap:20px;padding:24px 0;border-top:1px solid rgba(77,92,114,.14);font-size:17px;line-height:1.55}
.advantage-row:last-child{border-bottom:1px solid rgba(77,92,114,.14)}
.advantage-num{
  flex:0 0 44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--accent);color:var(--accent2);
  font-family:var(--font-ui);font-size:15px;font-weight:600;padding-top:3px;
}

/* ----- Booking form ------------------------------------------------------ */
.booking-card{background:var(--white);box-shadow:var(--shadow_elevated);padding:32px 36px 28px;scroll-margin-top:10px}
.bk-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin-bottom:22px}
.booking-card h3{font-size:24px}
.booking-card .booking-sub{color:var(--fade);font-size:14px;margin:0}
.booking-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(77,92,114,.14)}
.booking-trust li{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--fade)}
.booking-trust svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.8}

/* ----- Hotel cards ------------------------------------------------------- */
.hotels-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:36px}
.hotel-card{position:relative;display:flex;flex-direction:column;background:var(--white);box-shadow:var(--shadow_basic);transition:box-shadow .25s ease-in-out,transform .25s ease-in-out}
.hotel-card:hover{box-shadow:var(--shadow_elevated);transform:translateY(-3px)}
.hotel-card-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.hotel-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease-in-out}
.hotel-card:hover .hotel-card-media img{transform:scale(1.04)}
.hotel-flag{
  position:absolute;top:0;left:0;z-index:1;
  background:var(--accent);color:var(--white);
  font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  padding:9px 14px 7px;
}
.hotel-card-body{display:flex;flex-direction:column;flex:1;padding:30px}
.hotel-card-body h3{font-size:24px;margin-bottom:10px}
.hotel-loc{display:flex;align-items:center;gap:8px;color:var(--fade);font-size:13px;letter-spacing:.6px;text-transform:uppercase;font-family:var(--font-ui);font-weight:600;margin-bottom:16px}
.hotel-loc svg{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:1.8}
.hotel-card-body p{margin:0 0 26px;font-size:15px;line-height:1.65}
.hotel-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:auto}

/* ----- Included (infobox gray) ------------------------------------------- */
.included{background-color:var(--fade3);padding:70px 0}
.included-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:60px;align-items:center}
.included-list{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px}
.included-list li{display:flex;align-items:flex-start;gap:14px;font-size:15.5px;line-height:1.5;color:var(--main)}
.included-list svg{flex:0 0 20px;width:20px;height:20px;margin-top:2px;stroke:var(--accent);fill:none;stroke-width:2}
.included-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.included-badges span{background:var(--white);color:var(--main);font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.8px;padding:9px 14px 7px;border-bottom:2px solid var(--accent)}

/* ----- Three reasons ------------------------------------------------------ */
.reasons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.reason{background:var(--white);padding:38px 34px 40px;box-shadow:var(--shadow_basic);border-top:3px solid var(--accent)}
.reason-icon{width:46px;height:46px;margin-bottom:24px;stroke:var(--main);fill:none;stroke-width:1.4}
.reason h3{font-size:21px;line-height:1.3;margin-bottom:14px}
.reason p{margin:0;font-size:15px;line-height:1.7}

/* ----- Golden city (image + text) ----------------------------------------- */
/* Full-width panorama band — a 2.8:1 image needs the whole column width */
.goldencity-media{position:relative;margin-bottom:60px}
.goldencity-media img{width:100%;aspect-ratio:2.82/1;object-fit:cover}
.goldencity-media::after{content:"";position:absolute;left:-14px;bottom:-14px;width:150px;height:110px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);pointer-events:none}
.highlight-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px}
.highlight-card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.highlight-card h4{font-size:20px;margin:22px 0 8px}
.highlight-card p{margin:0;font-size:15px;line-height:1.65;color:var(--main)}
.facts-row{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:60px;padding-top:44px;border-top:1px solid rgba(77,92,114,.14)}
.fact{display:flex;flex-direction:column;gap:8px}
.fact svg{width:30px;height:30px;stroke:var(--accent);fill:none;stroke-width:1.5;margin-bottom:6px}
.fact strong{font-size:17px;font-weight:700}
.fact span{font-size:14px;color:var(--fade)}

/* ----- 48h timeline -------------------------------------------------------- */
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:10px}
.timeline::before{content:"";position:absolute;top:23px;left:0;right:26px;height:1px;background:rgba(77,92,114,.18)}
.tl-step{position:relative;padding:0 26px 0 0}
.tl-marker{
  position:relative;z-index:1;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--accent);margin-bottom:24px;
}
.tl-marker svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.6}
.tl-time{display:block;font-family:var(--font-ui);font-size:13px;font-weight:600;letter-spacing:2px;color:var(--accent2);margin-bottom:10px}
.tl-step h4{font-size:19px;margin-bottom:12px}
.tl-step p{margin:0;font-size:15px;line-height:1.65}
.timeline-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  margin-top:60px;padding:30px 34px;background:var(--white);box-shadow:var(--shadow_basic);border-left:3px solid var(--accent);
}
.timeline-cta p{margin:0;font-size:16px;display:flex;align-items:center;gap:14px}
.timeline-cta svg{flex:0 0 24px;width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:1.6}

/* ----- Testimonials --------------------------------------------------------- */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.review{display:flex;flex-direction:column;background:var(--white);padding:36px 32px;box-shadow:var(--shadow_basic)}
.review-quote{font-size:44px;line-height:1;color:var(--accent);font-weight:700;margin-bottom:14px}
.review p{margin:0 0 26px;font-size:15.5px;line-height:1.75;font-style:italic}
.review-foot{margin-top:auto;padding-top:20px;border-top:1px solid rgba(77,92,114,.14)}
.review-stars{display:flex;gap:4px;margin-bottom:10px}
.review-stars svg{width:15px;height:15px;fill:var(--accent)}
.review-author{font-family:var(--font-ui);font-size:13px;font-weight:600;letter-spacing:.6px;color:var(--fade)}

/* ----- Final CTA ------------------------------------------------------------- */
.final-cta{position:relative;display:flex;align-items:center;min-height:600px;overflow:hidden;background:var(--dark2)}
.final-cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.final-cta .container{position:relative;z-index:1;padding-top:70px;padding-bottom:70px}
.final-cta-card{max-width:540px;padding:48px 48px 44px;background:rgba(28,44,69,.95)}
.final-cta h2{color:var(--white);font-size:40px;margin-bottom:18px}
.final-cta p{color:rgba(255,255,255,.88);font-size:17px;line-height:1.7;margin:0 0 32px}
.final-cta .button.golded{padding:17px 30px 13px}

/* ----- Footer ---------------------------------------------------------------- */
.site-footer{background:var(--dark2);color:var(--fade2);padding:70px 0 0}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px;padding-bottom:50px}
.footer-logo{height:34px;width:auto;margin-bottom:24px;filter:brightness(0) invert(1)}
.footer-about{font-size:15px;line-height:1.75;max-width:420px;margin:0 0 26px}
.footer-socials{display:flex;gap:12px}
.footer-socials a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(183,198,210,.3);transition:border-color .2s,background .2s}
.footer-socials a:hover{border-color:var(--accent);background:rgba(209,185,74,.12)}
.footer-socials img{width:16px;height:16px;filter:brightness(0) invert(1);opacity:.85}
.footer-col h4{color:var(--white);font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:22px}
.footer-col li{margin-bottom:13px;font-size:15px}
.footer-col a{transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-contact li{display:flex;align-items:flex-start;gap:11px}
.footer-contact img{width:16px;height:16px;margin-top:4px;filter:brightness(0) invert(1);opacity:.7}
.footer-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding:26px 0;border-top:1px solid rgba(183,198,210,.18);font-size:13px;color:rgba(183,198,210,.75);
}
.footer-policies{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer-policies a:hover{color:var(--accent)}

/* ----- Responsive ------------------------------------------------------------- */
@media (max-width:1100px){
  h1{font-size:46px}
  h2{font-size:38px}
  .hero-content h1{font-size:46px}
  .advantages-grid,.included-grid{grid-template-columns:1fr;gap:44px}
  .goldencity-media{margin-bottom:44px}
  .goldencity-media img{aspect-ratio:16/9}
  .reasons-grid,.reviews-grid{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr 1fr;gap:44px 30px}
  .timeline::before{display:none}
  .goldencity-media::after{display:none}
  .hero-overlay{background:linear-gradient(90deg,rgba(28,44,69,.8),rgba(28,44,69,.45))}
  /* Final CTA stacks: untouched photo on top, text on solid navy below */
  .final-cta{display:block;min-height:0}
  .final-cta img{position:static;height:auto;aspect-ratio:2.35/1}
  .final-cta .container{padding-top:48px;padding-bottom:56px}
  .final-cta-card{max-width:640px;padding:0;background:none}
}
@media (max-width:860px){
  .usp-strip .container{flex-wrap:wrap}
  .usp-item{flex:1 1 50%;justify-content:flex-start;padding:18px 20px}
  .usp-item:nth-child(odd){border-left:none}
  .usp-item:nth-child(n+3){border-top:1px solid rgba(77,92,114,.14)}
  .hotels-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr;gap:40px}
}
@media (max-width:720px){
  :root{--block-gap:60px}
  h1,h2{font-size:34px}
  h3,h4{font-size:20px}
  .container{padding:0 20px}
  .site-header .container{height:64px}
  .site-header .logo img{height:28px}
  .header-lang{display:none}
    /* Hero: photo stays clear on top and fades into a solid navy text panel */
  .hero{display:block;min-height:0;background:var(--dark2)}
  .hero-image{bottom:auto;height:340px}
  .hero-overlay{background:linear-gradient(180deg,rgba(28,44,69,0) 0,rgba(28,44,69,0) 100px,rgba(28,44,69,.9) 228px,var(--dark2) 340px)}
  .hero .container{padding-top:205px;padding-bottom:36px}
  .hero .block-title{margin-bottom:14px;gap:10px;letter-spacing:1.5px}
  .hero .block-title::after{width:32px;flex-basis:32px}
  .hero-content h1{margin-bottom:16px}
  .hero-content p{font-size:16px;line-height:1.6;margin-bottom:26px}
  .hero-content h1{font-size:34px}
  .hero-buttons .button{width:100%;text-align:center}
  .usp-item{flex:1 1 100%;border-left:none!important}
  .usp-item + .usp-item{border-top:1px solid rgba(77,92,114,.14)}
  .booking-card{padding:22px 16px 18px;scroll-margin-top:-12px}
  .included-list,.facts-row,.timeline{grid-template-columns:1fr}
  .included{padding:50px 0}
  .final-cta img{aspect-ratio:16/10}
  .final-cta h2{font-size:30px}
  .final-cta .container{padding-top:36px;padding-bottom:48px}
  .final-cta .button{width:100%;text-align:center}
  /* Highlights: swipe row with the next card peeking in — keeps three photos without three screens of scroll */
  .highlight-cards{display:flex;gap:14px;margin:34px -20px 0;padding:0 20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;scrollbar-width:none}
  .highlight-cards::-webkit-scrollbar{display:none}
  .highlight-card{flex:0 0 78%;scroll-snap-align:start}
  .timeline-cta{padding:24px}
}

/* ==========================================================================
   Live-Preiskalender im Buchungs-Widget (v2)
   Farben und Signale entsprechen dem Kalender auf calendar.orea.cz
   ========================================================================== */

/* .field ist display:flex — ohne das hier bliebe [hidden] wirkungslos */
[hidden]{display:none!important}

.bk{display:flex;flex-direction:column;gap:16px}
.bk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bk-group{border:0;margin:0;padding:0;min-width:0}
.bk-group legend,.bk-stepper-label,.bk-child-ages-label,.bk-date-label,.bk-total-label{
  font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--fade);
}
.bk-group legend{padding:0;margin-bottom:8px;width:100%}
.bk-group legend span{float:right;font-family:var(--font-body);font-weight:400;letter-spacing:0;text-transform:none;font-size:12px}
.bk-group legend span.is-error{color:var(--error)}

/* ----- Hotels: Chips statt vier Zeilen Checkboxen ------------------------ */
.bk-hotels{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bk-hotel{
  position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:44px;
  padding:4px 8px;background:var(--fade4);border:1px solid rgba(77,92,114,.18);cursor:pointer;
  font-size:14px;line-height:1.2;color:var(--fade);text-align:center;
  transition:border-color .2s ease-in-out,background .2s ease-in-out,color .2s ease-in-out;
}
.bk-hotel input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}
.bk-hotel span{display:flex;align-items:center;gap:7px;min-width:0}
.bk-hotel span::before{
  content:"";flex:0 0 14px;width:14px;height:14px;border:1px solid rgba(77,92,114,.35);background:var(--white) center/10px no-repeat;
}
.bk-hotel:has(input:checked){background:var(--white);border-color:var(--accent);color:var(--main);font-weight:700}
.bk-hotel:has(input:checked) span::before{
  border-color:var(--accent);background-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.bk-hotel:has(input:focus-visible){outline:2px solid var(--main);outline-offset:2px}

/* ----- Gäste: Stepper ----------------------------------------------------- */
.bk-guests{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px}
.bk-stepper{display:flex;align-items:center;gap:6px}
.bk-stepper-label{flex:1;min-width:0}
.bk-step{
  flex:0 0 44px;width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;
  background:var(--fade4);border:1px solid rgba(77,92,114,.18);border-radius:0;cursor:pointer;
  transition:background .2s ease-in-out,border-color .2s ease-in-out;
}
.bk-step:hover:not(:disabled){background:var(--white);border-color:var(--accent)}
.bk-step:disabled{opacity:.35;cursor:default}
.bk-step svg{width:16px;height:16px;stroke:var(--main);fill:none;stroke-width:2}
.bk-step-value{flex:0 0 30px;text-align:center;font-size:18px;font-weight:700;color:var(--main)}

.bk-child-ages{display:flex;flex-direction:column;gap:8px}
.bk-child-ages-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.bk-child-ages select{
  font-family:var(--font-body);font-size:16px;color:var(--main);
  background:var(--fade4);border:1px solid rgba(77,92,114,.18);border-radius:0;
  height:44px;padding:0 10px;width:100%;outline:none;
}
.bk-child-ages select.is-empty{border-color:var(--accent);background:var(--white)}
.bk-child-ages select:focus{border-color:var(--main);background:var(--white)}

/* ----- Anreise / Abreise -------------------------------------------------- */
.bk-cal{border-top:1px solid rgba(77,92,114,.14);padding-top:16px}
.bk-dates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.bk-date{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:52px;padding:8px 12px 6px;
  background:var(--fade4);border:1px solid rgba(77,92,114,.18);border-bottom-width:2px;border-radius:0;
  font-family:var(--font-body);text-align:left;cursor:pointer;
}
.bk-date strong{font-size:16px;font-weight:400;color:var(--fade);white-space:nowrap}
.bk-date.is-set strong{font-weight:700;color:var(--main)}
.bk-date.is-active{background:var(--white);border-color:var(--accent)}
.bk-date.is-active strong{color:var(--main)}
.bk-date.is-nudge{animation:bk-nudge .5s ease-in-out 2}
@keyframes bk-nudge{50%{background:#fdf6e3;box-shadow:0 0 0 3px rgba(209,185,74,.45)}}

/* ----- Kalenderkopf ------------------------------------------------------ */
.bk-calbody{position:relative}
.bk-cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.bk-cal-title{
  font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--main);text-align:center;flex:1;
}
.bk-nav{
  flex:0 0 44px;width:44px;height:40px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--fade4);border:1px solid rgba(77,92,114,.18);border-radius:0;cursor:pointer;
  transition:background .2s ease-in-out,border-color .2s ease-in-out;
}
.bk-nav:hover:not(:disabled){background:var(--white);border-color:var(--accent)}
.bk-nav:disabled{opacity:.35;cursor:default}
.bk-nav svg{width:16px;height:16px;stroke:var(--main);fill:none;stroke-width:2}

/* ----- Monatsraster ------------------------------------------------------ */
.bk-months{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.bk-months.is-single{grid-template-columns:1fr}
.bk-month-name{
  font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:1.4px;line-height:40px;
  text-transform:uppercase;color:var(--main);text-align:center;margin-bottom:8px;
}
.bk-months.is-single .bk-month-name{display:none}
/* Zwei Monate: die Monatsnamen sind die Überschrift, die Pfeile sitzen in derselben Zeile */
@media (min-width:1101px){
  .bk-cal-head{position:absolute;top:0;left:0;right:0;margin:0;pointer-events:none}
  .bk-cal-head .bk-nav{pointer-events:auto}
  .bk-cal-title{visibility:hidden}
}
.bk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.bk-dow{
  font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:.8px;
  color:var(--fade);text-align:center;padding-bottom:4px;
}

.bk-day{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:48px;padding:4px 1px;
  font-family:var(--font-body);background:var(--white);
  border:1px solid rgba(77,92,114,.10);border-radius:0;
  cursor:pointer;transition:background .15s ease-in-out,border-color .15s ease-in-out;
}
@media (hover:hover){
  .bk-day:hover:not(:disabled):not(.is-unreachable):not(.is-start):not(.is-end){background:var(--select);border-color:var(--accent)}
}
.bk-day.is-blank{border-color:transparent;background:transparent;cursor:default;pointer-events:none}
.bk-day-num{font-size:14px;font-weight:700;color:var(--main);line-height:1.1}
.bk-day-price{font-size:11px;line-height:1.1;color:var(--fade);white-space:nowrap}

.bk-day.is-disabled{background:var(--fade4);color:var(--disabled);cursor:default}
.bk-day.is-disabled .bk-day-num{color:var(--disabled)}
.bk-day.is-disabled .bk-day-price{color:var(--disabled)}
.bk-day.is-unreachable{opacity:.4;cursor:default}
.bk-cal.is-stale .bk-months{opacity:.45}

/* Auswahl */
.bk-day.is-start,.bk-day.is-end{background:var(--main);border-color:var(--main)}
.bk-day.is-start .bk-day-num,.bk-day.is-end .bk-day-num,
.bk-day.is-start .bk-day-price,.bk-day.is-end .bk-day-price{color:var(--white)}
.bk-day.is-between{background:var(--select);border-color:rgba(77,92,114,.18)}

/* Signale — Bestpreis (grüne Ecke), Aktion (goldene Ecke), letztes Zimmer (roter Punkt) */
.bk-day.is-best::after,.bk-day.is-promo::after{
  content:"";position:absolute;top:0;right:0;
  border-style:solid;border-width:0 10px 10px 0;
  border-color:transparent #2e7d32 transparent transparent;
}
.bk-day.is-promo::after{border-right-color:var(--accent)}
.bk-day.is-last::before{
  content:"";position:absolute;top:3px;left:3px;
  width:5px;height:5px;border-radius:50%;background:var(--error);
}
/* An-/Abreise gesperrt — Schraffur wie im Original */
.bk-day.is-no-in,.bk-day.is-no-out,.bk-day.is-closed{
  background-image:repeating-linear-gradient(135deg,
    rgba(77,92,114,.14) 0 2px,transparent 2px 5px);
}

.bk-cal-status{margin:10px 0 0;font-size:13px;color:var(--fade);text-align:center}
.bk-cal-status.is-error{color:var(--error)}
.bk-cal-status.is-info{color:#8a5b00}

.bk-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-top:10px}
.bk-legend li{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--fade)}
.bk-key{width:12px;height:12px;flex:0 0 12px;border:1px solid rgba(77,92,114,.18);background:var(--white);position:relative}
.bk-key-best::after,.bk-key-promo::after{
  content:"";position:absolute;top:0;right:0;
  border-style:solid;border-width:0 8px 8px 0;
  border-color:transparent #2e7d32 transparent transparent;
}
.bk-key-promo::after{border-right-color:var(--accent)}
.bk-key-last::after{content:"";position:absolute;top:2px;left:2px;width:5px;height:5px;border-radius:50%;background:var(--error)}
.bk-key-closed{background-image:repeating-linear-gradient(135deg,rgba(77,92,114,.24) 0 2px,transparent 2px 5px)}

/* ----- Ergebnis + Absenden ------------------------------------------------ */
.bk-warning{
  margin:0;padding:12px 14px;font-size:13px;line-height:1.5;
  color:#8a5b00;background:#fdf6e3;border-left:3px solid var(--accent);
}
.bk-foot{display:flex;align-items:center;gap:18px}
.bk-total{display:grid;grid-template-columns:auto;gap:1px;flex:0 0 auto}
.bk-total strong{font-size:24px;line-height:1.1;color:var(--main);white-space:nowrap}
.bk-total strong.is-muted{color:var(--fade);font-size:16px}
.bk-total-avail{font-size:12px;color:var(--fade);white-space:nowrap}
.booking-card .bk-foot .button{flex:1;margin:0;min-height:52px;text-align:center}

.bk-promo{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:-4px}
.bk-promo-toggle{
  background:none;border:0;padding:6px 4px;cursor:pointer;
  font-family:var(--font-body);font-size:13px;color:var(--fade);text-decoration:underline;text-underline-offset:3px;
}
.bk-promo-toggle:hover{color:var(--main)}
.bk-promo-toggle[aria-expanded="true"]{display:none}
.bk-promo-box{display:flex;gap:8px;width:100%}
.bk-promo-box input{
  flex:1;min-width:0;height:44px;padding:0 12px;font-family:var(--font-body);font-size:16px;color:var(--main);
  background:var(--fade4);border:1px solid rgba(77,92,114,.18);border-radius:0;outline:none;text-transform:uppercase;
}
.bk-promo-box input::placeholder{text-transform:none}
.bk-promo-box input:focus{border-color:var(--accent);background:var(--white)}
.bk-promo-apply{
  flex:0 0 auto;height:44px;padding:0 18px;background:var(--white);border:1px solid var(--main);border-radius:0;cursor:pointer;
  font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--main);
}
.bk-promo-apply:hover{background:var(--main);color:var(--white)}
.bk-promo-msg{margin:0;font-size:13px;line-height:1.5;color:var(--fade);text-align:center}
.bk-promo-msg.is-error{color:var(--error)}
.bk-promo-msg.is-ok{color:#2e7d32}

/* ----- Mobil ------------------------------------------------------------- */
@media (max-width:1100px){
  .bk-cal-title{font-size:13px}
}
@media (max-width:640px){
  .bk-hotels{grid-template-columns:1fr 1fr}
  .bk-guests{grid-template-columns:1fr;gap:8px}
  .bk-day{min-height:50px}
  .bk-foot{flex-direction:column;align-items:stretch;gap:12px}
  .bk-total{grid-template-columns:1fr auto;align-items:end}
  .bk-total-label{grid-column:1 / -1}
  .bk-total-avail{text-align:right}
  .booking-card .bk-foot .button{flex:none}
}