/* Komtbinnen kioskscherm, 55 inch staand, 1080 x 1920 px.
   1 px is circa 0,63 mm. Tekst nooit onder 36 px, contrast minimaal 7:1.
   Huisstijl van het pand via een skin-klasse op .k. */

.k {
  --bg: var(--kb-papier); --fg: var(--kb-antraciet);
  --key: var(--kb-steen); --keyfg: var(--kb-antraciet);
  --ok: var(--kb-amber); --okfg: var(--kb-antraciet);
  --line: var(--kb-antraciet); --box: var(--kb-wit); --boxfg: var(--kb-antraciet);
  width: 1080px; height: 1920px; overflow: hidden; position: relative;
  background: var(--bg); color: var(--fg);
  padding: 72px 72px 56px;
  display: flex; flex-direction: column;
  font: 400 44px/1.25 var(--kb-font-tekst);
  transition: background-color var(--kb-duur-lang) var(--kb-ease), color var(--kb-duur-lang) var(--kb-ease);
}
.k * { transition: background-color var(--kb-duur-lang) var(--kb-ease), color var(--kb-duur-lang) var(--kb-ease), border-color var(--kb-duur-lang) var(--kb-ease); }

/* Fictieve pandhuisstijlen */
.k.skin-weefhuis { --bg:#5B1230; --fg:#FFFFFF; --key:#F3E7E4; --keyfg:#5B1230; --ok:#FFFFFF; --okfg:#5B1230; --line:#C9A0AE; --box:#F3E7E4; --boxfg:#5B1230; }
.k.skin-pakhuis  { --bg:#DCE9E1; --fg:#10382F; --key:#FFFFFF; --keyfg:#10382F; --ok:#10382F; --okfg:#FFFFFF; --line:#10382F; --box:#FFFFFF; --boxfg:#10382F; }
.k.skin-donker   { --bg:var(--kb-antraciet); --fg:var(--kb-papier); --key:#3B3530; --keyfg:var(--kb-papier); --ok:var(--kb-amber); --okfg:var(--kb-antraciet); --line:#5A524A; --box:#3B3530; --boxfg:var(--kb-papier); }

.k-head { display:flex; justify-content:space-between; align-items:baseline; border-bottom:4px solid var(--line); padding-bottom:20px; }
.k-pand { font-size:48px; font-weight:700; }
.k-pand.weefhuis { font-family: Georgia, "DejaVu Serif", serif; font-style: italic; }
.k-pand.pakhuis { letter-spacing:.18em; }
.k-plek { font-size:36px; }

.k .k-titel { font:600 80px/1.1 var(--kb-font-kop); margin:56px 0 0; letter-spacing:-.01em; }
.k .k-sub { margin:24px 0 0; }
.k-label { margin-top:36px; }

.k-invoer { display:flex; gap:16px; margin-top:12px; }
.k-cijfer { flex:1; height:168px; background:var(--box); color:var(--boxfg); border:4px solid var(--line);
  font:500 120px/160px var(--kb-font-kop); text-align:center; }
.k-cijfer.actief { border-color: var(--ok); box-shadow: inset 0 0 0 4px var(--ok); }
.k-cijfer.fout { border-color: var(--fg); }

.k-toetsen { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }
.k-toets { height:120px; background:var(--key); color:var(--keyfg); font:500 64px/120px var(--kb-font-kop); text-align:center; }
.k-toets.tekst { font:700 44px/120px var(--kb-font-tekst); }
.k-toets.ok { background:var(--ok); color:var(--okfg); font-size:52px; }
.k-toets.druk { background:var(--fg); color:var(--bg); }

.k-of { font-weight:700; margin:40px 0 8px; }
.k-rij { display:flex; justify-content:space-between; align-items:center; min-height:88px; border-bottom:3px solid var(--line); gap:24px; }
.k-rij b { font:500 44px var(--kb-font-kop); white-space:nowrap; }
.k-rij.groot { min-height:116px; }
.k-rij small { display:block; font-size:36px; }

.k-paneel { margin-top:56px; background:var(--ok); color:var(--okfg); padding:56px; }
.k-paneel-naam { font-weight:700; font-size:56px; }
.k-paneel-nummer { font:600 360px/1.05 var(--kb-font-kop); margin:24px 0; letter-spacing:-.02em; }

.k-knop { height:140px; font:500 56px/140px var(--kb-font-kop); text-align:center; background:var(--key); color:var(--keyfg); margin-top:24px; }
.k-knop.ok { background:var(--ok); color:var(--okfg); }
.k-knop.rand { background:transparent; color:var(--fg); border:4px solid var(--fg); line-height:132px; }

.k-wacht { display:flex; gap:28px; margin:96px 0 0; }
.k-wacht i { width:56px; height:56px; background:var(--fg); opacity:.25; animation: k-wacht 1.5s var(--kb-ease) infinite; }
.k-wacht i:nth-child(2) { animation-delay:.25s; } .k-wacht i:nth-child(3) { animation-delay:.5s; }
@keyframes k-wacht { 0%,100% { opacity:.25; } 40% { opacity:1; } }

.k-info { display:flex; gap:32px; align-items:flex-start; margin-top:48px; }
.k-info svg { width:96px; height:96px; flex:none; color: currentColor; }

.k-klok { font:500 300px/1 var(--kb-font-kop); margin-top:auto; letter-spacing:-.03em; }
.k-datum { font-size:56px; margin-top:24px; }

.k-voet { margin-top:auto; padding-top:28px; display:flex; justify-content:space-between; align-items:center; font-size:36px; }
.k-voet .logo { width:230px; height:auto; display:block; }

/* Schaalwrapper voor weergave op websites: <div class="k-schaal" style="--s:.3"><div class="k">… */
.k-schaal { width: calc(1080px * var(--s)); height: calc(1920px * var(--s)); overflow:hidden; flex:none; }
.k-schaal > .k { transform: scale(var(--s)); transform-origin: 0 0; }
.k-behuizing { display:inline-block; padding: calc(30px * var(--s, .3)); background:#1B1916; }