/* Spielzeiten-Dashboard (/freunde/spielzeiten/) — gerendert von spielzeiten.js.
   Nur Theme-Tokens aus style.css; Spieler- und Rasterfarben setzt das JS. */

.sz{
	--sz-pinband:2.7rem; --sz-wkhoehe:210px; --sz-wkmin:6px;
	box-sizing:border-box; max-width:1120px; margin:0 auto;
	padding:7.5rem 1.2rem 4rem; color:var(--text);
}
@media (max-width:640px){ .sz{padding:9rem 1rem 3rem} }
.sz h1{font-size:clamp(1.9rem,5vw,2.6rem); font-weight:800; letter-spacing:-.03em; margin:0 0 .4rem; text-align:center}
.sz h1 span{color:var(--grass)}
.sz .lead{color:var(--dim); text-align:center; margin:0 auto 2rem; max-width:560px}
.sz h2{font-size:1.08rem; font-weight:800; letter-spacing:-.01em; margin:0 0 .7rem}
.sz-box{min-width:0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem}

/* Passwort-Formular (PHP-Zweig) */
.sz-schloss{max-width:420px; margin:0 auto; text-align:center}
.sz-schloss form p{margin:.6rem 0}
.sz-schloss label{display:block; color:var(--dim); font-size:.9rem}
.sz-schloss input[type=password]{width:100%; margin-top:.4rem; padding:.65rem .8rem; border-radius:8px; border:1px solid var(--border); background:#0b0b0d; color:var(--text); font-size:1rem}
.sz-schloss input[type=submit]{margin-top:.4rem; padding:.6rem 1.4rem; border:0; border-radius:8px; background:var(--grass); color:#0b0b0d; font-weight:800; font-size:1rem; cursor:pointer}

/* ---------- Raster der Abschnitte ---------- */
#sz-app{display:grid; grid-template-columns:minmax(0,1fr); gap:2rem 1.2rem; align-items:start}
.sz-abschnitt{min-width:0}
@media (min-width:860px){
	#sz-app{grid-template-columns:repeat(2,minmax(0,1fr))}
	#sz-app > .sz-abschnitt{grid-column:1 / -1}
	#sz-app > .sz-halb{grid-column:auto}
}

/* ---------- Kennzahlen ---------- */
.sz-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem}
@media (max-width:620px){ .sz-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sz-kpi{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:.85rem 1rem; min-width:0}
.sz-kpi:first-child{border-color:rgba(132,204,22,.35); background:linear-gradient(160deg,rgba(132,204,22,.10),var(--card) 60%)}
.sz-kpi b{display:block; font-size:clamp(1.5rem,4.2vw,2rem); font-weight:800; line-height:1.15; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.sz-kpi:first-child b{color:var(--grass-bright)}
.sz-kpi b small, .sz-monat-wert small{font-size:.58em; font-weight:700; color:var(--dim)}
.sz-kpi span{display:block; color:var(--dim); font-size:.85rem; line-height:1.35; margin-top:.15rem}

/* ---------- Wochen-Zeitleiste ---------- */
/* Skala steht links fest; Säulen + Monatsachse scrollen, sobald die Mindestbreite je
   Woche (6px) nicht mehr in die Zeile passt. JS scrollt beim Laden ans Ende. */
.sz-wk{position:relative; padding-left:2.4rem}
.sz-wk-skala{position:absolute; left:0; top:0; width:2.1rem; height:var(--sz-wkhoehe); pointer-events:none}
.sz-wk-skala span{position:absolute; right:0; margin-bottom:-.35rem; font-size:.68rem; line-height:1; color:var(--dim2); font-variant-numeric:tabular-nums}
.sz-wk-scroll{overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain}
/* --sz-wochen setzt das JS: so viele Säulen à Mindestbreite + Lücke, sonst volle Breite */
.sz-wk-inhalt{min-width:calc(var(--sz-wochen,0) * (var(--sz-wkmin) + 3px) - 3px)}
.sz-wk-flaeche{position:relative; display:flex; gap:3px; height:var(--sz-wkhoehe); box-sizing:border-box; padding-top:var(--sz-pinband)}
.sz-wk-gitter{position:absolute; left:0; right:0; border-top:1px dashed rgba(255,255,255,.07); pointer-events:none}
.sz-wk-spalte{position:relative; flex:1 1 0; min-width:var(--sz-wkmin); max-width:4.5rem; display:flex; flex-direction:column; justify-content:flex-end; cursor:default}
.sz-wk-spalte:hover .sz-wk-saeule{filter:brightness(1.18)}
.sz-wk-saeule{display:flex; flex-direction:column-reverse; border-radius:3px 3px 0 0; overflow:hidden}
.sz-wk-saeule i{display:block; flex-basis:0; min-height:0}
.sz-wk-saeule.leer{background:rgba(255,255,255,.12)}
.sz-wk-linie{position:absolute; top:0; left:50%; border-left:1px dashed rgba(244,244,245,.28); pointer-events:none}
.sz-pin{position:absolute; bottom:100%; left:50%; transform:translateX(-50%); font-size:.7rem; line-height:1; padding-bottom:2px; color:var(--text)}
.sz-pin-text{position:absolute; bottom:calc(100% + .95rem); left:50%; transform:translateX(-50%); white-space:nowrap; font-size:.7rem; line-height:1; color:var(--dim); pointer-events:none}
.sz-pin-text.reihe2{bottom:calc(100% + 1.85rem)}
.sz-pin-text.links{left:0; transform:none}
.sz-pin-text.rechts{left:auto; right:0; transform:none}
.sz-wk-achse{display:flex; gap:3px; margin-top:.35rem; border-top:1px solid rgba(255,255,255,.14); padding-top:.3rem; height:1.3rem}
.sz-wk-achse span.rechts{direction:rtl}
.sz-wk-achse span{flex:1 1 0; min-width:var(--sz-wkmin); max-width:4.5rem; overflow:visible; white-space:nowrap; font-size:.72rem; line-height:1; color:var(--dim)}

.sz-legende{display:flex; flex-wrap:wrap; gap:.35rem 1rem; margin-top:.8rem; font-size:.82rem; color:var(--dim)}
.sz-legende span{display:inline-flex; align-items:center}
.sz-punkt{display:inline-block; vertical-align:-.05em; flex:none; width:.65rem; height:.65rem; border-radius:2px; margin-right:.4rem}
.sz-pin-zeichen{font-size:.7rem; color:var(--text); margin-right:.4rem; font-weight:400}
.sz-info{margin:.55rem 0 0; font-size:.8rem; color:var(--dim2); min-height:1.3em; white-space:pre-line}

/* ---------- Monate ---------- */
.sz-monatskacheln{display:grid; grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr)); gap:.7rem; margin-bottom:.7rem}
@media (max-width:460px){ .sz-monatskacheln{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sz-monat{display:flex; flex-direction:column; gap:.45rem; min-width:0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:.8rem .9rem}
.sz-monat.laufend{border-style:dashed; border-color:rgba(255,255,255,.18)}
.sz-monat-kopf{display:flex; justify-content:space-between; align-items:baseline; gap:.4rem}
.sz-monat-name{font-weight:700; color:var(--text); font-size:.92rem}
.sz-trend{font-size:.78rem; font-weight:700; color:var(--dim2); white-space:nowrap; font-variant-numeric:tabular-nums}
.sz-trend.hoch{color:var(--grass-bright)}
.sz-trend.runter{color:var(--danger)}
.sz-monat-wert{font-size:1.55rem; font-weight:800; line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.sz-monat-hoehe{height:2.6rem; display:flex; align-items:flex-end; border-bottom:1px solid rgba(255,255,255,.12)}
.sz-monat-hoehe i[hidden]{display:none}
.sz-monat-hoehe i{display:block; width:100%; min-height:2px; border-radius:3px 3px 0 0; background:linear-gradient(var(--grass),var(--grass-deep))}
.sz-anteile{display:flex; height:.55rem; border-radius:3px; overflow:hidden; background:var(--card2)}
.sz-anteile i{display:block; flex-basis:0; min-width:2px}
.sz-monat-text{font-size:.78rem; line-height:1.4; color:var(--dim)}

.sz-scroll{overflow-x:auto; padding:.4rem .4rem}
.sz-tabelle{width:100%; border-collapse:collapse; font-size:.9rem; font-variant-numeric:tabular-nums}
.sz-tabelle th, .sz-tabelle td{padding:.45rem .7rem; text-align:right; white-space:nowrap; border-bottom:1px solid var(--border)}
.sz-tabelle th{color:var(--dim); font-weight:600; font-size:.8rem}
.sz-tabelle th:first-child, .sz-tabelle td:first-child{text-align:left; position:sticky; left:0; background:var(--card)}
.sz-tabelle td.leer{color:var(--dim2)}
@media (max-width:520px){ .sz-tabelle{font-size:.85rem} .sz-tabelle th, .sz-tabelle td{padding:.45rem .5rem} }
.sz-tabelle tr.alle td{border-bottom:0; border-top:1px solid rgba(255,255,255,.16); font-weight:700}

/* ---------- Raster Wochentag × Stunde ---------- */
.sz-raster{display:grid; grid-template-columns:1.7rem repeat(24,minmax(0,1fr)); gap:2px; align-items:center}
.sz-raster > i{display:block; aspect-ratio:1; border-radius:2px; background:var(--card2)}
.sz-raster > i:hover{outline:1px solid var(--text); outline-offset:-1px}
.sz-raster-uhr{grid-column:span 3; font-size:.68rem; color:var(--dim2); line-height:1.4}
.sz-raster-tag{font-size:.72rem; color:var(--dim); line-height:1}
.sz-verlauf{display:flex; align-items:center; gap:3px; margin-top:.8rem; font-size:.78rem; color:var(--dim)}
.sz-verlauf span:first-child{margin-right:.35rem}
.sz-verlauf span:last-child{margin-left:.35rem}
.sz-verlauf i{display:block; width:.9rem; height:.9rem; border-radius:2px}

/* ---------- Spieler ---------- */
.sz-balken{display:grid; grid-template-columns:minmax(4.5rem,8.5rem) minmax(0,1fr) auto; align-items:center; gap:.7rem; padding:.35rem 0}
.sz-balken-name{display:flex; align-items:center; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sz-balken-spur{height:.8rem; background:var(--card2); border-radius:3px; overflow:hidden}
.sz-balken-spur i{display:block; height:100%; border-radius:3px}
.sz-balken-wert{font-size:.82rem; color:var(--dim); white-space:nowrap; font-variant-numeric:tabular-nums}
@media (max-width:420px){
	.sz-balken{grid-template-columns:minmax(0,1fr) auto; gap:.25rem .7rem}
	.sz-balken-spur{grid-column:1 / -1; grid-row:2}
}

/* ---------- Plugins ---------- */
.sz-pl{list-style:none; margin:0; padding:0; font-size:.9rem}
.sz .sz-pl li{display:flex; gap:.9rem; padding:.38rem 0; border-bottom:1px solid var(--border); max-width:none}
.sz-pl li:last-child{border-bottom:0}
.sz-pl time{flex:none; width:3.6rem; color:var(--dim2); font-variant-numeric:tabular-nums}
.sz-pl span{min-width:0; overflow-wrap:anywhere}
.sz-mehr{margin-top:.4rem}
.sz-mehr summary{cursor:pointer; color:var(--grass-bright); font-size:.88rem; font-weight:600; padding:.3rem 0}
.sz-mehr[open] summary{margin-bottom:.2rem}

/* ---------- Fuß ---------- */
#sz-stand{text-align:center; color:var(--dim2); font-size:.82rem; margin-top:.5rem}