/* Hallenplan (hallenplan.js) – öffentliche Seite und HandballClub Studio */
.hp-public { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1b2333; background: #f4f7fb; }
.hp-public main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 40px; }
.hp-public h1 { font-size: 26px; margin: 0; color: #070b14; }
.hp-public a { color: #0a5fd8; }
.hp-club { color: #0a5fd8; font-weight: 600; }
.hp-foot { margin-top: 28px; font-size: 13px; color: #5b6b85; }

.hp-head { margin-bottom: 10px; }
.hp-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: #5b6b85; margin-top: 4px; }
.hp-info { background: #eaf3ff; border: 1px solid #b9d4fb; border-radius: 10px; padding: 8px 12px; margin: 10px 0 0; white-space: pre-wrap; }
.hp-empty { color: #5b6b85; padding: 12px 0; }

.hp-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.hp-bar select, .hp-print { font: inherit; font-size: 14px; border: 1px solid #c9d6ea; background: #fff; border-radius: 8px; padding: 6px 10px; color: inherit; max-width: 100%; }
.hp-print { cursor: pointer; }
.hp-seg { display: inline-flex; border: 1px solid #c9d6ea; border-radius: 9px; overflow: hidden; background: #fff; }
.hp-seg button { font: inherit; font-size: 14px; border: 0; background: none; padding: 6px 12px; cursor: pointer; color: inherit; }
.hp-seg button.on { background: #0a5fd8; color: #fff; }

.hp-hall { background: #fff; border: 1px solid #dbe3ef; border-radius: 14px; padding: 12px 12px 6px; margin-bottom: 14px; }
.hp-hall h2, .hp-team h2 { font-size: 17px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hp-hall h2 small, .hp-team h2 small { font-size: 13px; font-weight: 400; color: #5b6b85; }
.hp-scroll { overflow-x: auto; overflow-y: hidden; }
.hp-grid { padding-bottom: 10px; display: grid; grid-template-columns: 46px repeat(var(--days), minmax(96px, 1fr)); min-width: calc(46px + var(--days) * 96px); }
.hp-dh { height: 34px; text-align: center; font-weight: 700; font-size: 14px; line-height: 34px; border-bottom: 1px solid #dbe3ef; }
.hp-dh span { display: none; }
@media (min-width: 900px) { .hp-dh { font-size: 0; } .hp-dh span { display: inline; font-size: 14px; } }
.hp-col { position: relative; }
.hp-day .hp-col { border-left: 1px solid #e6ecf5; }
.hp-times span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11px; color: #5b6b85; }
.hp-times span:first-child { transform: none; }
.hp-line { position: absolute; left: 0; right: 0; border-top: 1px dashed #e6ecf5; }
.hp-slot { position: absolute; box-sizing: border-box; overflow: hidden; text-align: left; font: inherit; color: #1b2333; border: 0; border-left: 4px solid var(--c);
  background: #f1f5fb; background: color-mix(in srgb, var(--c) 16%, #fff); border-radius: 6px; padding: 3px 5px; display: flex; flex-direction: column; gap: 0; z-index: 1; }
button.hp-slot { cursor: pointer; }
button.hp-slot:hover { box-shadow: 0 2px 8px rgba(10, 30, 70, .25); z-index: 2; }
.hp-slot b { font-size: 12.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-slot small { font-size: 11px; line-height: 1.25; color: #3b4a63; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-slot.hp-short { flex-direction: row; gap: 4px; align-items: center; }
.hp-slot.hp-dim { opacity: .22; }
.hp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; margin: 4px 0 8px; }
.hp-legend i, .hp-team h2 i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); margin-right: 5px; vertical-align: -1px; }

.hp-team { background: #fff; border: 1px solid #dbe3ef; border-left: 5px solid var(--c); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.hp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hp-table td { padding: 5px 8px 5px 0; border-top: 1px solid #eef2f8; vertical-align: top; }
.hp-table tr:first-child td { border-top: 0; }
.hp-table tr.hp-edit { cursor: pointer; }
.hp-table tr.hp-edit:hover { background: #f4f8ff; }
.hp-nw { white-space: nowrap; }
.hp-part { display: inline-block; font-size: 12px; background: #eef3fb; border-radius: 6px; padding: 0 6px; margin-left: 4px; }
.hp-note { color: #5b6b85; }
a.hp-print { text-decoration: none; display: inline-block; }
.hp-swaps { background: #fff8e6; border: 1px solid #f1d58a; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.hp-swaps h2 { font-size: 15px; margin: 0 0 6px; }
.hp-swaps ul { margin: 0; padding-left: 18px; }
.hp-swaps li { margin: 2px 0; }

@media print {
  .hp-public { background: #fff; }
  .hp-bar, .hp-foot, .no-print, .sidebar, .topbar { display: none !important; }
  .hp-hall, .hp-team { break-inside: avoid; border-color: #bbb; }
  .hp-scroll { overflow: visible; }
  .hp-slot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}