@layer screens{
/* ═══ Platzbelegung — drei Platzkarten mit nur noch relevanten Stunden.
   Intrinsische Darstellung hier; vertikale Beziehungen ausschließlich in contracts.css. ═══ */
.pr-body{padding-left:var(--edge);padding-right:var(--edge)}

/* 31 Tage horizontal, auf dem Telefon etwa fünf gleichzeitig sichtbar. */
.pr-tage{display:flex;gap:var(--sp-3);overflow-x:auto;overscroll-behavior-inline:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:1px}
.pr-tage::-webkit-scrollbar{display:none}
.pr-tagchip{flex:0 0 18%;height:58px;border:0;border-radius:var(--r-card);background:var(--field);
  color:var(--ink);font-family:var(--f);cursor:pointer;padding:var(--sp-3) var(--sp-2)}
.pr-tagchip b{display:block;font-size:var(--fs-row);font-weight:800;line-height:1}
.pr-tagchip i{display:block;font-style:normal;font-size:var(--fs-sub);font-weight:700;line-height:1;color:var(--muted);padding-top:var(--sp-2)}
.pr-tagchip.an{background:var(--hl);color:var(--hl-ink)}
.pr-tagchip.an i{color:color-mix(in srgb,var(--hl-ink) 72%,transparent)}

/* Eine ruhige Standardkachel je Platz. */
.pr-platzkarte{padding:var(--sp-5);min-width:0}
.pr-platzkopf{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);min-width:0;
  position:relative;isolation:isolate;aspect-ratio:3.2;min-height:104px;overflow:hidden;
  margin:calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) 0;padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-card) var(--r-card) 0 0;background:var(--court-photo-base)}
.pr-platzfoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;filter:brightness(1.12);z-index:-1}
.pr-platzkopf::before{content:"";position:absolute;inset:0;background:var(--court-photo-shade);z-index:0;pointer-events:none}
.pr-platzpille{position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--sp-2);flex:0 0 auto;
  margin:0;padding:var(--sp-2) var(--sp-4);min-height:30px;border-radius:var(--r-chip);
  background:color-mix(in srgb,var(--sp-tennis-t) 16%,var(--kachel));border:1px solid var(--paint-hm-sportbadge-border);
  color:var(--sp-tennis-t);font-size:var(--fs-row);font-weight:800;letter-spacing:.4px;text-transform:uppercase;line-height:1;white-space:nowrap}
.pr-slotraster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);min-width:0}
.pr-slotleer{grid-column:1/-1;min-width:0}
.pr-slot{min-width:0;min-height:64px;border:1px solid transparent;border-radius:var(--r-field);padding:var(--sp-3) var(--sp-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--f);cursor:pointer;
  transition:background var(--motion-state) var(--ease-state),border-color var(--motion-state) var(--ease-state),color var(--motion-state) var(--ease-state)}
.pr-slotzeit,.pr-slotinfo{display:block;max-width:100%}
.pr-slotzeit{font-size:var(--fs-row);font-weight:700;line-height:1.1;white-space:nowrap}
.pr-slotinfo{font-size:var(--fs-sub);font-weight:400;line-height:1.15;padding-top:var(--sp-1);overflow-wrap:anywhere}

/* Freie Zeiten als helle/neutrale Buchungsflächen; belegt ist kein Fehlerzustand.
   Gelb bleibt den eigenen Buchungen vorbehalten. Status steht immer auch als Text. */
.pr-slot.frei{background:var(--surface);border-style:solid;
  border-color:var(--line-stark);color:var(--ink);font-weight:400}
.pr-slot.frei .pr-slotinfo{font-weight:400;color:var(--sek)}
.pr-slot.frei:active{background:color-mix(in srgb,var(--sp-tennis-t) 10%,var(--surface));border-color:var(--sp-tennis-t);color:var(--ink)}
.pr-slot.belegt{background:color-mix(in srgb,var(--ink) 4%,var(--kachel));border-color:transparent;
  color:var(--sek);font-weight:800;cursor:default}
.pr-slot.belegt .pr-slotinfo{color:var(--sek)}
.pr-slot.meins{background:color-mix(in srgb,var(--hl) 10%,var(--kachel));border-color:var(--hl-text);color:var(--hl-text);font-weight:800}
.pr-slot.meins .pr-slotinfo{color:var(--hl-text)}

/* Vereinsmeisterschaften: Tennisfarbe, beschriftet und direkt zur bestehenden Partie. */
.pr-slot.meisterschaft{background:color-mix(in srgb,var(--sp-tennis-t) 12%,var(--kachel));
  border-color:color-mix(in srgb,var(--sp-tennis-t) 50%,var(--kachel));color:var(--sp-tennis-t)}
.pr-slot.meisterschaft:active{background:color-mix(in srgb,var(--sp-tennis-t) 22%,var(--kachel))}

.pr-card-body .bt-wertkachel .wert{max-width:70%}
}