/* ==========================================================================
   Kurzzeitvermietung — the playful counterpart to the calm main site.
   Loaded only on the Kurzzeit template and the Unterkunft detail pages.
   Colours are taken from the customer's 3D graphics (cobalt blue) plus the
   platform brand colours.
   ========================================================================== */

.al-play {
  --blue: #1C6AD6;
  --blue-deep: #0E3F8C;
  --blue-ink: #08224A;
  --blue-soft: #E8F0FE;
  --coral: #FF5A5F;      /* airbnb */
  --booking: #003B95;    /* booking.com */
  --money: #1DB954;
  --gold: #D4A62A;
  --paper: #FFFFFF;
  --paper-2: #F5F7FB;
  --radius: 28px;
  --radius-sm: 16px;
  --shadow: 0 18px 50px rgba(8, 34, 74, .16);
  --shadow-sm: 0 8px 24px rgba(8, 34, 74, .12);

  background: var(--paper);
  color: var(--blue-ink);
}

.al-play .site-header { background: rgba(255, 255, 255, .92); border-bottom-color: rgba(8, 34, 74, .1); }
.al-play .nav-cta { background: var(--blue); border-radius: 999px; padding: 15px 26px; }
.al-play .nav-cta:hover { background: var(--blue-deep); }
.al-play .main-nav ul a:hover,
.al-play .main-nav .current-menu-item > a { border-bottom-color: var(--blue); color: var(--blue); }

.al-play .site-footer { background: var(--blue-ink); color: #fff; border-top: none; }
.al-play .site-footer a:hover { color: #9FC4FF; }
.al-play .site-footer__blurb,
.al-play .footer-nav__title,
.al-play .site-footer__legal p { color: rgba(255, 255, 255, .62); }
.al-play .site-footer__legal p { border-top-color: rgba(255, 255, 255, .18); }
.al-play .brand__rule { background: currentColor; }
.al-play .site-footer .brand__word { color: rgba(255, 255, 255, .78); }

/* ------------------------------------------------------------ primitives */

.play-wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

.play-sec { padding: clamp(56px, 7vw, 110px) 0; }
.play-sec--blue { background: var(--blue); color: #fff; }
.play-sec--ink { background: var(--blue-ink); color: #fff; }
.play-sec--soft { background: var(--paper-2); }
.play-sec--tight { padding: clamp(36px, 4vw, 64px) 0; }

.play-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 13px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase;
  background: var(--blue-soft); color: var(--blue-deep);
  padding: 10px 16px; border-radius: 999px;
}
.play-badge--on-blue { background: rgba(255, 255, 255, .16); color: #fff; }
.play-badge--coral { background: rgba(255, 90, 95, .14); color: #D6353A; }

.play-h1 {
  margin: 22px 0 0;
  font: 700 clamp(40px, 6.2vw, 88px)/1.02 var(--sans);
  letter-spacing: -.035em; text-wrap: balance;
}
.play-h1 em { font-style: normal; color: #FFD66B; }
.play-sec--soft .play-h1 em, .play-h2 em { font-style: normal; color: var(--blue); }
.play-sec--blue .play-h2 em,
.play-sec--ink .play-h2 em,
.play-sec--blue .play-h1 em { color: #FFD66B; }

.play-h2 {
  margin: 18px 0 0;
  font: 700 clamp(30px, 4vw, 54px)/1.06 var(--sans);
  letter-spacing: -.03em; text-wrap: balance; max-width: 20ch;
}
.play-h3 { margin: 0; font: 600 clamp(19px, 1.7vw, 23px)/1.25 var(--sans); letter-spacing: -.015em; }

.play-lead {
  margin: 20px 0 0; max-width: 52ch;
  font: 400 clamp(17px, 1.35vw, 20px)/1.6 var(--sans);
  color: rgba(8, 34, 74, .72); text-wrap: pretty;
}
.play-sec--blue .play-lead, .play-sec--ink .play-lead { color: rgba(255, 255, 255, .82); }

.play-text { margin: 16px 0 0; font: 400 17px/1.65 var(--sans); color: rgba(8, 34, 74, .72); max-width: 54ch; }
.play-sec--blue .play-text, .play-sec--ink .play-text { color: rgba(255, 255, 255, .78); }

.play-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 17px/1 var(--sans);
  padding: 20px 30px; border-radius: 999px; border: 2px solid transparent;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), background .2s ease, color .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.play-btn:hover { transform: translateY(-2px); }
.play-btn--primary { background: var(--blue); color: #fff; box-shadow: 0 10px 30px rgba(28, 106, 214, .35); }
.play-btn--primary:hover { background: var(--blue-deep); color: #fff; }
.play-btn--light { background: #fff; color: var(--blue-ink); box-shadow: var(--shadow-sm); }
.play-btn--light:hover { color: var(--blue-deep); }
.play-btn--ghost { border-color: rgba(255, 255, 255, .45); color: #fff; }
.play-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }
.play-btn--outline { border-color: rgba(8, 34, 74, .18); color: var(--blue-ink); }
.play-btn--outline:hover { border-color: var(--blue); color: var(--blue); }
.play-btn--airbnb { background: var(--coral); color: #fff; }
.play-btn--airbnb:hover { background: #E04B50; color: #fff; }
.play-btn--booking { background: var(--booking); color: #fff; }
.play-btn--booking:hover { background: #002A6B; color: #fff; }

.play-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.play-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px; }

/* ------------------------------------------------------------------ hero */

.play-hero {
  background:
    radial-gradient(120% 90% at 85% 10%, #3D83E3 0%, rgba(61, 131, 227, 0) 60%),
    var(--blue);
  color: #fff;
  padding: clamp(44px, 5vw, 76px) 0 clamp(56px, 6vw, 96px);
  overflow: hidden;
}
.play-hero__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(32px, 4vw, 64px); align-items: center;
}
.play-hero__media { position: relative; }
.play-hero__media img {
  width: 100%; border-radius: var(--radius);
  box-shadow: 0 30px 70px rgba(4, 22, 52, .38);
}

.play-sticker {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--blue-ink);
  font: 700 16px/1 var(--sans);
  padding: 14px 18px; border-radius: 16px;
  box-shadow: var(--shadow);
  animation: playfloat 4.5s ease-in-out infinite;
}
.play-sticker--1 { top: -18px; left: -14px; transform: rotate(-6deg); color: var(--money); }
.play-sticker--2 { bottom: -20px; right: -10px; transform: rotate(5deg); animation-delay: .8s; }

@keyframes playfloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
@media (prefers-reduced-motion: reduce) { .play-sticker { animation: none; } }

.play-platforms {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 36px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .22);
}
.play-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 999px; padding: 10px 18px;
  font: 700 15px/1 var(--sans); letter-spacing: -.01em;
}
.play-chip--airbnb { color: var(--coral); }
.play-chip--booking { color: var(--booking); }
.play-platforms__note { font: 400 15px/1.5 var(--sans); color: rgba(255, 255, 255, .8); }

/* ----------------------------------------------------------------- stats */

.play-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.play-stat {
  background: #fff; border-radius: var(--radius-sm); padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
.play-sec--blue .play-stat { background: rgba(255, 255, 255, .12); box-shadow: none; }
.play-stat__value { margin: 0; font: 700 clamp(30px, 3.4vw, 44px)/1 var(--sans); letter-spacing: -.03em; color: var(--blue); }
.play-sec--blue .play-stat__value { color: #FFD66B; }
.play-stat__label { margin: 10px 0 0; font: 400 15px/1.45 var(--sans); color: rgba(8, 34, 74, .66); }
.play-sec--blue .play-stat__label { color: rgba(255, 255, 255, .8); }

/* ----------------------------------------------------------------- steps */

.play-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(16px, 2vw, 24px); margin-top: clamp(34px, 4vw, 54px);
}
.play-step {
  background: #fff; border-radius: var(--radius-sm); padding: 28px 26px 30px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}
.play-step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.play-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px;
  background: var(--blue); color: #fff; font: 700 17px/1 var(--sans);
  margin-bottom: 18px;
}
.play-step:nth-child(2) .play-step__num { background: #3D83E3; }
.play-step:nth-child(3) .play-step__num { background: var(--gold); }
.play-step:nth-child(4) .play-step__num { background: var(--money); }
.play-step p { margin: 10px 0 0; font: 400 15.5px/1.6 var(--sans); color: rgba(8, 34, 74, .68); }

.play-figure { margin: clamp(34px, 4vw, 52px) 0 0; }
.play-figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }

/* ----------------------------------------------------------------- stays */

.play-stays {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(34px, 4vw, 54px);
}
.play-stay {
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
  color: var(--blue-ink);
}
.play-stay:hover { transform: translateY(-8px); box-shadow: var(--shadow); color: var(--blue-ink); }
.play-stay__media { position: relative; aspect-ratio: 4/3; background: var(--paper-2); overflow: hidden; }
.play-stay__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.play-stay:hover .play-stay__media img { transform: scale(1.05); }
.play-stay__flag {
  position: absolute; top: 16px; left: 16px;
  font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--stay-color, var(--blue));
  padding: 9px 14px; border-radius: 999px;
}
.play-stay__flag--soon { background: rgba(8, 34, 74, .7); }
.play-stay__body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.play-stay__sub { margin: 0; font: 500 14px/1.4 var(--sans); color: var(--stay-color, var(--blue)); }
.play-stay__text { margin: 0; font: 400 15.5px/1.6 var(--sans); color: rgba(8, 34, 74, .68); }
.play-stay__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; list-style: none; padding-left: 0; }
.play-stay__facts li {
  font: 500 13.5px/1 var(--sans); color: var(--blue-ink);
  background: var(--paper-2); border-radius: 999px; padding: 9px 13px;
}
.play-stay__more { font: 600 15px/1 var(--sans); color: var(--stay-color, var(--blue)); }

.play-colors {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(14px, 1.8vw, 22px); margin-top: clamp(28px, 3vw, 44px);
}
.play-color { border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; }
.play-color img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.play-color span { display: block; padding: 16px 18px; font: 600 15px/1 var(--sans); }

/* --------------------------------------------------------------- service */

.play-split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 4vw, 68px); align-items: center;
}
.play-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 14px; margin-top: clamp(28px, 3vw, 40px);
}
.play-tile {
  background: #fff; border-radius: var(--radius-sm); padding: 22px 20px;
  box-shadow: var(--shadow-sm);
}
.play-sec--blue .play-tile, .play-sec--ink .play-tile { background: rgba(255, 255, 255, .1); box-shadow: none; }
.play-tile__icon { font-size: 26px; line-height: 1; }
.play-tile h3 { margin: 12px 0 6px; font: 600 17px/1.3 var(--sans); }
.play-tile p { margin: 0; font: 400 14.5px/1.55 var(--sans); color: rgba(8, 34, 74, .66); }
.play-sec--blue .play-tile p, .play-sec--ink .play-tile p { color: rgba(255, 255, 255, .74); }

.play-round { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; display: block; }

/* ------------------------------------------------------------ calculator */

.play-calc {
  background: #fff; border-radius: var(--radius); padding: clamp(24px, 3vw, 38px);
  box-shadow: var(--shadow-sm);
}
.play-calc__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 16px 0; border-bottom: 1px dashed rgba(8, 34, 74, .16);
  font: 400 16.5px/1.4 var(--sans);
}
.play-calc__row:last-child {
  border-bottom: none; border-top: 2px solid rgba(8, 34, 74, .1); margin-top: 6px;
  font: 700 22px/1.3 var(--sans); color: var(--money);
}
.play-calc__row span:first-child { color: rgba(8, 34, 74, .7); }
.play-calc__row:last-child span:first-child { color: var(--blue-ink); }
.play-calc__note { margin: 18px 0 0; font: 400 13.5px/1.6 var(--sans); color: rgba(8, 34, 74, .55); }

/* ------------------------------------------------------------------- faq */

.play-faq { margin-top: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 12px; }
.play-faq details {
  background: #fff; border-radius: var(--radius-sm); padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}
.play-faq summary {
  cursor: pointer; list-style: none;
  font: 600 17.5px/1.4 var(--sans); display: flex; justify-content: space-between; gap: 16px;
}
.play-faq summary::-webkit-details-marker { display: none; }
.play-faq summary::after { content: "+"; font-weight: 400; font-size: 26px; line-height: 1; color: var(--blue); }
.play-faq details[open] summary::after { content: "–"; }
.play-faq p { margin: 14px 0 0; font: 400 16px/1.65 var(--sans); color: rgba(8, 34, 74, .7); max-width: 70ch; }

/* -------------------------------------------------------- stay detail page */

.stay-hero { padding: clamp(30px, 4vw, 56px) 0 0; }
.stay-back { font: 600 15px/1 var(--sans); color: var(--blue); }
.stay-title { margin: 18px 0 0; font: 700 clamp(34px, 4.6vw, 62px)/1.04 var(--sans); letter-spacing: -.03em; }
.stay-sub { margin: 12px 0 0; font: 500 clamp(16px, 1.4vw, 19px)/1.5 var(--sans); color: var(--stay-color, var(--blue)); }

.stay-gallery {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: clamp(26px, 3vw, 40px);
}
.stay-gallery a { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.stay-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.stay-gallery a:hover img { transform: scale(1.04); }
.stay-gallery a:first-child { grid-column: span 2; grid-row: span 2; }
.stay-gallery--flat a:first-child { grid-column: auto; grid-row: auto; }
.stay-gallery--flat a:first-child img { aspect-ratio: 4/3; }
.stay-gallery a:first-child img { aspect-ratio: 4/3.02; height: 100%; }
@media (max-width: 720px) {
  .stay-gallery { grid-template-columns: repeat(2, 1fr); }
  .stay-gallery a:first-child { grid-column: span 2; grid-row: auto; }
}

.stay-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.stay-facts li {
  background: var(--paper-2); border-radius: var(--radius-sm); padding: 16px 22px; min-width: 120px;
}
.stay-facts strong { display: block; font: 700 26px/1 var(--sans); color: var(--stay-color, var(--blue)); }
.stay-facts span { font: 400 14px/1.4 var(--sans); color: rgba(8, 34, 74, .62); }

.stay-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.stay-features li { display: flex; align-items: center; gap: 10px; font: 400 16px/1.4 var(--sans); background: #fff; border: 1px solid rgba(8, 34, 74, .1); border-radius: 999px; padding: 12px 18px; }

.stay-book {
  position: sticky; top: 100px;
  background: #fff; border-radius: var(--radius); padding: clamp(22px, 2.4vw, 30px);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px;
}
.stay-book h2 { margin: 0 0 6px; font: 700 21px/1.25 var(--sans); }
.stay-book p { margin: 0 0 8px; font: 400 15px/1.55 var(--sans); color: rgba(8, 34, 74, .66); }
.stay-book .play-btn { justify-content: center; }

/* -------------------------------------------------------------- lightbox */

.al-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 34, 74, .92);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}
.al-lightbox[hidden] { display: none; }
.al-lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; }
.al-lightbox__close,
.al-lightbox__nav {
  position: absolute; background: rgba(255, 255, 255, .14); color: #fff;
  border: none; border-radius: 999px; cursor: pointer;
  width: 52px; height: 52px; font-size: 30px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.al-lightbox__close:hover,
.al-lightbox__nav:hover { background: rgba(255, 255, 255, .28); }
.al-lightbox__close { top: 22px; right: 22px; font-size: 26px; }
.al-lightbox__nav--prev { left: 18px; }
.al-lightbox__nav--next { right: 18px; }