/* Platzbuchung — Layout der Buchungs-App */
.booking { padding-top: calc(76px + 2.5rem); padding-bottom: var(--section); }
.booking__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.booking__head h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.booking__head p { color: var(--ink-2); margin-top: 0.5rem; max-width: 560px; }
.booking__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; }
@media (max-width: 1060px) { .booking__layout { grid-template-columns: minmax(0, 1fr); } }

/* Tage */
.days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 4px 12px; margin: 0 -4px; scrollbar-width: none; scroll-snap-type: x proximity; min-height: 112px; }
.days::-webkit-scrollbar { display: none; }
.day {
  flex: 0 0 auto; min-width: 84px; padding: 0.7rem 0.8rem; border-radius: 14px; border: 1.5px solid var(--line); background: var(--paper);
  text-align: center; scroll-snap-align: start; transition: transform 0.35s var(--ease-out), border-color 0.25s, background-color 0.25s, color 0.25s;
}
.day:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.day small { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.day b { display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; margin: 0.1rem 0; }
.day span { display: block; font-size: 0.75rem; color: var(--ink-3); }
.day.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.day.is-active small, .day.is-active span { color: rgba(246, 241, 231, 0.65); }
.day.is-weekend b { color: var(--clay-deep); }
.day.is-active.is-weekend b { color: var(--ball); }

/* Filter */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin: 0.75rem 0 1.25rem; }
.seg { display: inline-flex; background: var(--cream-2); border-radius: 999px; padding: 4px; gap: 2px; }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 0.5rem 0.95rem; font-size: 0.88rem; font-weight: 600; color: var(--ink-2); transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.seg button.is-active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }
.switch { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border-radius: 999px; background: var(--cream-3); position: relative; transition: background-color 0.25s; margin: 0; cursor: pointer; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease-out); }
.switch input:checked { background: var(--green); }
.switch input:checked::after { transform: translateX(18px); }

/* Grid */
.grid-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; overflow-x: auto; min-height: 452px; }
.bgrid { display: grid; grid-template-columns: 84px repeat(15, minmax(44px, 1fr)); gap: 5px; min-width: 780px; }
.bgrid .hh { font-size: 0.75rem; color: var(--ink-3); text-align: center; font-weight: 600; padding: 0.2rem 0 0.5rem; position: sticky; top: 0; }
.bgrid .cc { display: flex; flex-direction: column; justify-content: center; font-size: 0.85rem; font-weight: 600; padding-right: 0.5rem; }
.bgrid .cc small { font-weight: 500; color: var(--ink-3); font-size: 0.72rem; }
.bgrid .cc i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.slot {
  position: relative; height: 44px; border-radius: 9px; border: 1.5px solid transparent; background: var(--green-soft); color: var(--green-deep);
  font-size: 0.7rem; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  transition: transform 0.25s var(--ease-out), background-color 0.2s, border-color 0.2s, box-shadow 0.25s;
}
.slot:hover { transform: translateY(-2px); border-color: var(--green); box-shadow: var(--shadow-sm); }
.slot.booked, .slot.blocked, .slot.past, .slot.closed { cursor: default; color: var(--ink-2); }
.slot.booked { background: var(--cream-3); }
.slot.booked:hover, .slot.blocked:hover, .slot.past:hover, .slot.closed:hover { transform: none; border-color: transparent; box-shadow: none; }
.slot.blocked { background: repeating-linear-gradient(-45deg, var(--cream-3) 0 5px, var(--cream-2) 5px 10px); font-size: 0.62rem; color: var(--ink-2); }
.slot.past { background: var(--cream-2); opacity: 0.5; }
.slot.closed { background: transparent; border: 1px dashed var(--line); }
.slot.mine { background: var(--green); color: var(--cream); }
.slot.mine:hover { border-color: var(--green-deep); }
.slot.selected { background: var(--clay); color: var(--cream); border-color: var(--clay-deep); box-shadow: 0 6px 16px rgba(196, 87, 58, 0.3); transform: translateY(-2px); }
.slot .lbl { pointer-events: none; max-width: 100%; padding: 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot.free .lbl { opacity: 0; transition: opacity 0.2s; }
.slot.free:hover .lbl, .slot.selected .lbl { opacity: 1; }
.grid-wrap.free-only .slot.booked, .grid-wrap.free-only .slot.blocked, .grid-wrap.free-only .slot.past { opacity: 0.18; }
.empty-hint { margin-top: 1rem; font-size: 0.9rem; color: var(--ink-3); }

/* Zusammenfassung */
.summary { position: sticky; top: 96px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.summary h3 { margin-bottom: 0.35rem; }
.summary .empty { color: var(--ink-3); font-size: 0.95rem; padding: 1.25rem 0 0.5rem; display: flex; gap: 0.75rem; align-items: flex-start; }
.summary .empty svg { width: 22px; height: 22px; flex: none; color: var(--clay); }
.sum-box { margin-top: 1rem; border-radius: var(--radius-sm); background: var(--cream); padding: 1rem 1.1rem; }
.sum-box .sum-court { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.sum-box .when { color: var(--ink-2); font-size: 0.95rem; margin-top: 0.15rem; }
.sum-box .hint { font-size: 0.8rem; color: var(--ink-3); margin-top: 0.5rem; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 0 0.25rem; font-size: 0.95rem; color: var(--ink-2); }
.sum-total b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.sum-total small { color: var(--ink-3); font-size: 0.8rem; }
.summary .btn--block { margin-top: 0.5rem; }
.summary .seg { width: 100%; margin-top: 1rem; }
.summary .seg button { flex: 1; }
.summary .field { margin-top: 0.85rem; margin-bottom: 0; }
.summary .check { margin: 0.85rem 0 0.25rem; }
.rules { margin-top: 1rem; font-size: 0.8rem; color: var(--ink-3); display: grid; gap: 0.3rem; }
@media (max-width: 1060px) {
  .summary { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(27, 26, 23, 0.18); transform: translateY(calc(100% - 68px)); transition: transform 0.5s var(--ease-out); max-height: 88vh; overflow: auto; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
  .summary.is-open { transform: none; }
  .summary.has-selection { transform: translateY(calc(100% - 68px)); }
  .summary.has-selection.is-open { transform: none; }
  .summary__handle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 36px; cursor: pointer; }
  .summary__handle h3 { display: none; }
  .summary__handle::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; border-radius: 4px; background: var(--cream-3); transform: translateX(-50%); }
  .summary__peek { font-size: 0.9rem; font-weight: 600; }
  .summary__peek small { display: block; font-weight: 500; color: var(--ink-3); font-size: 0.8rem; }
  .booking { padding-bottom: 8rem; }
}
@media (min-width: 1061px) { .summary__handle .summary__peek, .summary__handle .toggle { display: none; } }

/* Legende */
.legend-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 1rem; }

/* Meine Buchungen */
.mine-list { margin-top: 3rem; }
.mine-list h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1rem; }
.mine-empty { color: var(--ink-3); padding: 1.25rem 0; border-top: 1px solid var(--line); }
.mine-item { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--line); }
.mine-item:last-child { border-bottom: 1px solid var(--line); }
.mine-item .badge { width: 52px; height: 52px; border-radius: 14px; background: var(--green-soft); color: var(--green-deep); display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; }
.mine-item .badge.sand { background: var(--clay-soft); color: var(--clay-deep); }
.mine-item .h4 { margin-bottom: 0.15rem; }
.mine-item p { font-size: 0.9rem; color: var(--ink-2); }
.mine-item .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.mine-item .actions .btn { padding: 0.55rem 0.9rem; font-size: 0.82rem; }
@media (max-width: 640px) { .mine-item { grid-template-columns: auto 1fr; } .mine-item .actions { grid-column: 1 / -1; justify-content: flex-start; } }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; background: rgba(27, 26, 23, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal__card { width: min(100%, 460px); background: var(--paper); border-radius: 24px; padding: 2rem; text-align: center; box-shadow: var(--shadow-lg); transform: translateY(24px) scale(0.98); transition: transform 0.5s var(--ease-out); }
.modal.is-open .modal__card { transform: none; }
.modal .checkmark { width: 84px; height: 84px; margin: 0 auto 1rem; }
.modal .checkmark circle { stroke-dasharray: 190; stroke-dashoffset: 190; }
.modal .checkmark path { stroke-dasharray: 48; stroke-dashoffset: 48; }
.modal.is-open .checkmark circle { animation: draw 0.7s var(--ease-out) 0.1s forwards; }
.modal.is-open .checkmark path { animation: draw 0.5s var(--ease-out) 0.6s forwards; }
.modal h2 { font-size: 1.9rem; margin-bottom: 0.4rem; }
.modal .code { display: inline-block; margin: 0.75rem 0; padding: 0.4rem 0.9rem; border-radius: 999px; background: var(--cream); font-weight: 700; letter-spacing: 0.06em; font-size: 0.9rem; }
.modal p { color: var(--ink-2); }
.modal .modal__actions { display: grid; gap: 0.6rem; margin-top: 1.5rem; }
.modal .demo { margin-top: 1rem; font-size: 0.78rem; color: var(--ink-3); }
@keyframes draw { to { stroke-dashoffset: 0; } }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: var(--cream); padding: 0.75rem 1.1rem; border-radius: 999px; font-size: 0.9rem; z-index: 90; opacity: 0; transition: opacity 0.3s, transform 0.4s var(--ease-out); pointer-events: none; box-shadow: var(--shadow-lg); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }