/* 19-kiosk.css · Teil 19 von 19 · Wand-Display / Kiosk. Reihenfolge der Dateien = Kaskade (index.html), nicht umsortieren. */
/* ── Wand-Display / Kiosk (#/display) ── */
body.hub-kiosk { background:#0B0A1F; }
body.hub-kiosk .sidebar,
body.hub-kiosk .topbar { display:none !important; }
body.hub-kiosk .layout,
body.hub-kiosk .main { height:100vh; }
body.hub-kiosk .content { padding:0; }
body.hub-kiosk .content > .card { background:transparent; border:none; border-radius:0; padding:0; }
body.hub-kiosk #viewContainer { height:100%; }

.kiosk { height:100vh; display:flex; flex-direction:column; color:#EEF0F8;
  font-family:'Montserrat',system-ui,sans-serif; }
.kiosk-head { display:flex; align-items:baseline; gap:18px; padding:14px 26px;
  background:var(--navy); border-bottom:3px solid var(--cyan); flex:none; }
.kiosk-head h1 { font-size:30px; margin:0; font-weight:800; letter-spacing:.4px; }
.kiosk-head .k-sub { font-size:15px; color:#AEB2D6; }
.kiosk-head .k-spacer { flex:1; }
.kiosk-head .k-datum { font-size:18px; font-weight:600; color:#AEB2D6; align-self:center;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.kiosk-head .k-uhr { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; }
.kiosk-head .k-dot { width:12px; height:12px; border-radius:50%; background:#3FbF6f; align-self:center; }
.kiosk-head .k-dot.warn { background:#E8b100; }
.kiosk-head .k-dot.err { background:var(--pink); }
/* Kein manuelles Scrollen am Wandbildschirm: der Inhalt wird auf die Hoehe
   gezoomt (.k-fit) und, wenn er dann immer noch nicht passt, seitenweise
   geblaettert. */
.kiosk-body { flex:1; min-height:0; overflow:hidden; padding:18px 26px; scroll-behavior:smooth; }
.k-fit { transform-origin:top left; width:100%; }
.kiosk-head .k-blatt { font-size:14px; font-weight:700; color:#0B0A1F; background:var(--cyan);
  border-radius:999px; padding:2px 12px; align-self:center; font-variant-numeric:tabular-nums; }
.kiosk-head .k-blatt:empty { display:none; }
.k-load { text-align:center; color:#9AA0C6; padding:60px; font-size:20px; }
.k-fehler { color:#FF8FA3; padding:14px 0; font-size:16px; }
.k-warn { color:#F2D98A; background:rgba(90,74,18,.35); border-radius:6px;
  padding:6px 12px; margin-bottom:10px; font-size:13px; }

.k-tbl { width:100%; border-collapse:collapse; font-size:18px; }
.k-tbl th { text-align:left; color:#9AA0C6; font-weight:600; font-size:14px;
  text-transform:uppercase; letter-spacing:.5px; padding:6px 12px; border-bottom:2px solid #2A2950; }
.k-tbl td { padding:10px 12px; border-bottom:1px solid #1C1B3A; vertical-align:top; }
.k-tbl tr:nth-child(even) td { background:rgba(255,255,255,.02); }
.k-tbl b { color:#fff; }
.k-muted { color:#9AA0C6; }
.k-tag { display:inline-block; padding:2px 9px; border-radius:999px; font-size:13px; font-weight:600;
  background:#2A2950; color:#CFD3F0; white-space:nowrap; }
.k-tag.go { background:#12492F; color:#8CE7B4; }
.k-tag.warn { background:#5A4A12; color:#F2D98A; }
.k-tag.pink { background:#5A1730; color:#FFA9C1; }
.k-tag.navy { background:#1E2B5E; color:#B7C6FF; }
/* Was heute/morgen ab Lager geht, hebt sich ab */
.k-tbl tr.k-heute td { background:rgba(230,48,78,.10); }
.k-tbl tr.k-heute td:first-child { box-shadow:inset 3px 0 0 var(--pink); }
/* Kiosk-Transporte: zwei Spalten nach Richtung */
.k-2sp { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
@media (max-width:1500px) { .k-2sp { grid-template-columns:1fr; } }
.k-sp { margin-bottom:18px; min-width:0; }
.k-sp-t { display:flex; align-items:center; gap:10px; padding:4px 2px 8px; color:#fff;
  font-size:17px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  border-bottom:2px solid #2A2950; }
.k-sp-n { background:#1E2B5E; color:#B7C6FF; border-radius:999px; font-size:14px; padding:1px 10px; }
.k-sp-h { margin-left:auto; font-weight:400; font-size:13px; color:#9AA0C6;
  text-transform:none; letter-spacing:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.k-sp.k-aus .k-sp-t { border-bottom-color:var(--pink); }
.k-sp.k-ein .k-sp-t { border-bottom-color:#12A46A; }
.k-sp.k-ueb .k-sp-t { border-bottom-color:#5A4A12; }
.k-sp-leer { padding:16px 2px; color:#9AA0C6; font-size:15px; }
/* Feste Spaltenbreiten, sonst sprengt der Inhalt die Rasterspalte und die
   beiden Richtungen ueberlappen sich. */
.k-tbl.k-fix { table-layout:fixed; }
.k-tbl.k-fix td, .k-tbl.k-fix th { overflow-wrap:break-word; }
.k-st { display:flex; flex-wrap:wrap; gap:4px; }
.k-z { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-z.stark { font-weight:700; color:#fff; }
.k-z:not(.stark) { color:#9AA0C6; }
.k-zl { display:inline-block; width:24px; color:#7E85A8; font-weight:400; }
/* Die Richtungsbloecke tragen viel Text je Zeile — kompakter als die
   uebrigen Kiosk-Tabellen, sonst wirkt die Seite aufgeblasen. */
.k-sp .k-tbl { font-size:15px; line-height:1.35; }
.k-sp .k-tbl th { font-size:12px; padding:4px 9px; }
.k-sp .k-tbl td { padding:7px 9px; }
.k-sp .k-tag { font-size:12px; padding:1px 8px; }
.k-sp .k-tbl b { font-size:16px; }
/* Projekt-/Ortsangaben duerfen umbrechen, aber nicht die Spalte sprengen. */
.k-sp .wb-id, .k-sp .k-muted { overflow-wrap:anywhere; }

/* Pikett-Alarm */
.k-alarm { background:linear-gradient(180deg,#7A0E28,#4E0A1C); border:2px solid var(--pink);
  border-radius:14px; padding:18px 22px; margin-bottom:20px; animation:kpuls 1.6s ease-in-out infinite; }
@keyframes kpuls { 0%,100%{ box-shadow:0 0 0 0 rgba(230,48,78,.5);} 50%{ box-shadow:0 0 0 14px rgba(230,48,78,0);} }
.k-alarm h2 { margin:0 0 10px; font-size:24px; color:#fff; }
.k-alarm .k-alarm-z { font-size:19px; padding:6px 0; border-top:1px solid rgba(255,255,255,.15); }
.k-alarm .k-alarm-z:first-of-type { border-top:none; }

/* Gantt (Kiosk) */
.kg-wrap { overflow-x:auto; }
.kg-row { display:flex; align-items:stretch; border-bottom:1px solid #1C1B3A; }
.kg-label { width:280px; flex:none; padding:10px 12px; }
.kg-label b { color:#fff; font-size:17px; display:block; }
.kg-label span { color:#9AA0C6; font-size:13px; }
.kg-track { position:relative; flex:1; }
.kg-bar { position:absolute; top:12px; height:26px; border-radius:6px; background:var(--navy2); }
.kg-spiel { position:absolute; top:0; height:100%; background:var(--pink); border-radius:6px; opacity:.9; }
.kg-today { position:absolute; top:0; bottom:0; width:2px; background:var(--cyan); }
.kg-head { display:flex; color:#9AA0C6; font-size:13px; border-bottom:2px solid #2A2950; }
.kg-head .kg-label { color:#9AA0C6; }
.kg-month { flex:none; padding:6px 4px; border-left:1px solid #2A2950; }

/* Kalender (Kiosk) — Personen-Raster: Zeile je Person, Spalte je Tag */
.kp-wrap { width:100%; }
.kp-head, .kp-row { display:grid; align-items:stretch; }
.kp-head { border-bottom:2px solid #2A2950; position:sticky; top:0; background:#0B0A1F; z-index:2; }
.kp-name { padding:8px 12px; color:#E7E9F6; font-weight:700; font-size:15px; min-width:0;
  background:#0B0A1F; border-right:1px solid #2A2950; display:flex; align-items:center; gap:8px; }
.kp-name span.kp-anz { margin-left:auto; background:#1E2B5E; color:#B7C6FF; border-radius:999px;
  font-size:12px; font-weight:700; padding:0 8px; }
.kp-head .kp-name { color:#9AA0C6; font-size:13px; text-transform:uppercase; letter-spacing:.5px; }
.kp-d { text-align:center; color:#9AA0C6; font-size:11px; padding:5px 0; border-left:1px solid #1C1B3A; }
.kp-d b { display:block; color:#E7E9F6; font-size:14px; font-variant-numeric:tabular-nums; }
.kp-d.we { background:rgba(255,255,255,.03); }
.kp-d.heute { background:rgba(84,104,217,.14); }
.kp-d.heute b { color:var(--cyan); }
.kp-row { border-bottom:1px solid #1C1B3A; }
.kp-z { border-left:1px solid #1C1B3A; padding:4px; min-width:0; display:flex;
  flex-direction:column; gap:3px; }
.kp-z.we { background:rgba(255,255,255,.03); }
.kp-z.heute { background:rgba(84,104,217,.08); box-shadow:inset 2px 0 0 var(--cyan); }
.kp-e { background:var(--navy2); color:#E7E9F6; border-radius:5px; font-size:12px; line-height:19px;
  padding:0 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kp-e.ganz { background:#2A2950; color:#C9CEEA; font-weight:600; }
.kp-e .kp-t { color:var(--cyan); font-variant-numeric:tabular-nums; margin-right:5px; }
.kp-mehr { color:#9AA0C6; font-size:11px; padding:0 7px; }