:root { --ink:#4a241b; --deep:#753727; --leaf:#ad5838; --lime:#dcf34b; --sand:#f7ede2; --white:#fffaf3; --muted:#9c7565; }
body.tck-page { background:var(--sand); }
.calendar-section { padding-top:40px; }
.calendar-back { display:inline-block; margin-bottom:26px; color:#9f4b2f; font-size:12px; font-weight:800; text-decoration:none; border-bottom:1px solid #c98d71; padding-bottom:5px; }
.calendar-back:hover,.calendar-back:focus-visible { color:#6f2e1e; }
.section-kicker, .section-kicker span { color:#b35531; }
.section-intro h1 { font-family:'Outfit',sans-serif; font-size:clamp(39px,4.3vw,68px); line-height:1; margin:18px 0 15px; letter-spacing:-.06em; }
.section-intro h1 span { color:#b98b77; }
.section-intro p { color:#876a5d; }
.section-badge { border-color:#e3c8b5; background:#fff7ed; }
.section-badge small { color:#9b7868; }
.section-badge .court-ball { position:relative; display:block; flex:0 0 34px; width:34px; height:34px; overflow:hidden; border-radius:50%; background:#dfff3f; box-shadow:inset -4px -4px 7px #a9d324, 0 0 14px #dfff3f88; }
.court-ball::before,.court-ball::after { content:''; position:absolute; top:-5px; width:14px; height:42px; border:2px solid #faffcf; border-radius:50%; }
.court-ball::before { left:-10px; }
.court-ball::after { right:-10px; }
.calendar-panel { border-color:#e4c9b7; }
.cal-label,.legend,.cal-foot { color:#9b735f; }
.nav-buttons button { border-color:#e3cbbb; color:var(--ink); background:#fffaf3; }
.nav-buttons button:hover,.nav-buttons button:focus-visible { background:#f2c4a4; }
.legend-dot.free { background:#fff1e3; border:1px solid #edcdb9; }
.legend-dot.reserved { background:#dfcec2; }
.legend-dot.mine { background:#f0a96e; }
.week-table thead th { background:#fff3e6; border-color:#ead8ca; }
.week-table thead th span,.week-table th.time-head,.week-table .time-cell { color:#ad8875; }
.week-table thead th.is-today { background:#f6d2b5; }
.week-table tbody td,.week-table tbody th { border-color:#eddbcd; }
.free-slot,.free-slot:nth-child(even) { background:#fff8ef; }
.free-slot.is-past,.free-slot.is-past:hover { background:#f3ece5; }
.free-slot.is-clickable { position:relative; cursor:pointer; }
.free-slot.is-clickable > button { position:absolute; inset:0; width:100%; height:100%; opacity:1; border:0; background:transparent; }
.free-slot.is-clickable:hover > button,.free-slot.is-clickable > button:focus-visible { background:#f8dbc4; outline:2px solid #ce8b67; outline-offset:-2px; }
.free-slot.is-clickable > button:disabled { cursor:wait; background:#f8dbc4; }
.occupied { position:relative; padding:0; }
.reservation { height:100%; min-height:100%; border-left-width:4px; }
.reservation strong,.reservation small { color:#77574a; }
.occupied.is-mine { cursor:default; }
.booking-spiel,.booking-spiel .reservation { background:#f4bc91; }
.booking-spiel .reservation { border-left-color:#bd663e; }
.booking-training,.booking-training .reservation { background:#e5c0a9; }
.booking-training .reservation { border-left-color:#9f6048; }
.booking-meisterschaft,.booking-meisterschaft .reservation { background:#db9879; }
.booking-meisterschaft .reservation { border-left-color:#8e3d2b; }
.booking-reserved,.booking-reserved .reservation { background:#d9d5d1; }
.booking-reserved .reservation { border-left-color:#99918a; }
.occupied.is-mine .reservation { box-shadow:inset 0 0 0 2px #8b432b; }
.reservation-action { display:block; width:100%; border-top:0; border-right:0; border-bottom:0; text-align:left; color:var(--ink); cursor:pointer; }
.reservation-action:hover,.reservation-action:focus-visible { background:#f5c69c; outline:2px solid #9e4c2f; outline-offset:-2px; }
.booking-menu { position:absolute; z-index:20; top:calc(100% + 5px); right:2px; width:min(235px,calc(100vw - 48px)); padding:15px; border:1px solid #c97550; border-radius:6px; background:#fffaf3; box-shadow:0 14px 32px #4a241b3b; text-align:left; }
.booking-menu.opens-up { top:auto; bottom:calc(100% + 5px); }
.booking-menu b { display:block; color:#a34c2e; font-size:10px; letter-spacing:.16em; }
.booking-menu p { margin:9px 0 13px; color:#65453a; font-size:12px; line-height:1.45; }
.booking-menu button { display:block; width:100%; padding:10px 12px; border:0; border-radius:3px; background:#a65032; color:#fffaf3; text-align:left; font-size:12px; font-weight:800; }
.free-slot .booking-menu button { position:static; height:auto; opacity:1; background:#a65032; color:#fffaf3; }
.free-slot .booking-menu .booking-menu-delete { background:#f8e7dc; color:#8b3b27; }
.booking-menu button + button { margin-top:7px; }
.booking-menu .booking-menu-delete { background:#f8e7dc; color:#8b3b27; }
.booking-menu .booking-menu-delete:hover,.booking-menu .booking-menu-delete:focus-visible { background:#f3d2be; }
.booking-menu button:disabled { opacity:.65; }
.quick-booking-menu { cursor:default; }
.booking-panel { background:var(--deep); }
.side-eyebrow { color:#ffd0ad; }
.booking-panel h3 em,.ball-small { color:var(--lime); }
.booking-hint { color:#f0cdbb; font-size:12px; line-height:1.55; margin:-13px 0 21px; }
.booking-panel label { color:#f0c5ae; }
.booking-panel input,.booking-panel select { border-color:#ba7455; background:#8d4b36; }
.booking-panel input:focus,.booking-panel select:focus { border-color:var(--lime); }
.booking-panel select option { color:var(--ink); }
.primary-button { color:#412516; }
.edit-cancel { width:100%; padding:9px; border:1px solid #bc8066; color:#ffe2cf; background:transparent; font-size:11px; }
.edit-cancel[hidden] { display:none; }
.side-footer { border-color:#a86348; color:#e4b59e; }
.status-message { position:fixed; z-index:10000; top:20px; right:20px; max-width:420px; min-height:0; margin:0; padding:14px 18px; color:#fff; background:#8b452e; box-shadow:0 12px 34px #542b2233; border-left:4px solid var(--lime); opacity:0; visibility:hidden; transition:opacity .2s; }
.status-message.visible { opacity:1; visibility:visible; }
.status-message.error { color:#fff; background:#a6453b; }
.calendar-grid.is-day .week-table { min-width:0; }
.calendar-grid.is-day .week-table th.time-head,.calendar-grid.is-day .week-table th.time-cell { width:66px; }
.calendar-grid.is-day .week-table tbody tr { height:40px; }
@media (max-width:700px) {
  .status-message { top:16px; left:16px; right:16px; max-width:none; }
  .calendar-grid.is-day .week-table { width:100%; }
}