/* Single home page in the original prototype look: booking card, highlights, tilted phone. */
.home-single .booking { display: grid; gap: 14px; }
.home-single .booking .eyebrow { margin: 0; }
.home-single .booking__title { margin: 0 0 4px; }
.bcard__step { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-weight: 800; font-size: 17px; }
.bcard__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(160deg, var(--brand-cyan), var(--brand-blue)); color: #fff; font-size: 14px; }
.bcard__pkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bcard__pkg { position: relative; display: grid; gap: 2px; align-content: start; padding: 14px 12px; border: 1px solid var(--line-strong); border-radius: 18px; color: var(--ink); text-decoration: none; transition: border-color .2s, background .2s, transform .2s; }
.bcard__pkg:hover { border-color: var(--brand-cyan); background: var(--tint); transform: translateY(-2px); }
.bcard__pkg b { font-size: 14px; line-height: 1.2; }
.bcard__pkg small { color: var(--muted); font-size: 12px; }
.bcard__pkg strong { margin-top: 8px; color: var(--brand-blue); font-size: 19px; letter-spacing: -.02em; white-space: nowrap; }
.bcard__pkg--top { border: 2px solid var(--brand-cyan); background: var(--tint); }
.bcard__tip { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 1px 9px; border-radius: 999px; background: var(--brand-cyan); color: #fff; font-size: 11px; font-weight: 700; }
.bcard__more { margin: 0; font-size: 14px; color: var(--ink-soft); }
.bcard__terms { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.bcard__terms li { display: flex; gap: 10px; align-items: baseline; }
.bcard__terms li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-cyan); transform: translateY(-2px); }
.bcard__go { width: 100%; justify-content: center; }
.bcard__rental { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }
@media (max-width: 420px) { .bcard__pkgs { grid-template-columns: minmax(0, 1fr); } .bcard__pkg { grid-template-columns: 1fr auto; } .bcard__pkg strong { grid-row: 1 / 4; grid-column: 2; align-self: center; margin: 0; } .bcard__tip { left: auto; right: 14px; transform: none; } }

/* Highlights */
.why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.why__list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; padding: 18px; border-radius: 18px; background: #F2FAFE; }
.why__ico { grid-row: 1 / 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--brand-blue); box-shadow: 0 6px 16px -8px rgba(0, 120, 180, .45); }
.why__ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.why__list b { font-size: 16px; }
.why__list span:not(.why__ico) { color: var(--ink-soft); font-size: 15px; line-height: 1.45; }
.why__price { margin: 16px 0 0; color: var(--ink-soft); font-size: 15px; }
.why__price strong { color: var(--brand-blue); }

/* Floating phone: slightly turned in 3D, like the prototype. */
@media (min-width: 1000px) {
  .home-single .hphone { transform-origin: 50% 60%; animation: hfloat3d 6s ease-in-out infinite; }
}
@keyframes hfloat3d {
  0%, 100% { transform: perspective(1200px) rotateY(-14deg) rotateX(5deg) rotateZ(1deg); }
  50% { transform: perspective(1200px) rotateY(-9deg) rotateX(3deg) rotateZ(-1deg) translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) { .home-single .hphone { animation: none; transform: perspective(1200px) rotateY(-12deg) rotateX(4deg); } }

/* Cover photo: show the whole van sharp, without the slow zoom. */
.home-single .profile__photo { animation: none; object-position: 50% 62%; }
@media (min-width: 1000px) { .home-single .profile__cover { height: 470px; } }

/* Ausstattung als Icon-Badges auf dem Titelbild */
.cover-perks { position: absolute; left: 14px; top: 14px; right: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cover-perks li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(4, 40, 60, .55); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: perk-in .6s cubic-bezier(.2,.8,.2,1) both; }
.cover-perks li:nth-child(2) { animation-delay: .08s; }
.cover-perks li:nth-child(3) { animation-delay: .16s; }
.cover-perks li:nth-child(4) { animation-delay: .24s; }
.cover-perks svg { width: 16px; height: 16px; fill: none; stroke: #5fd4ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes perk-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .cover-perks { left: 10px; top: 10px; right: auto; max-width: 56%; gap: 5px; } .cover-perks li { font-size: 11.5px; padding: 4px 9px 4px 7px; } .cover-perks svg { width: 13px; height: 13px; } }
@media (prefers-reduced-motion: reduce) { .cover-perks li { animation: none; } }