/* Paket 4 des Rundblicks (07.10., deine Wahl „Personal, Chefbüro, Räume“): die Tafeln, die ein Ding in einem Raum öffnet, sehen aus wie
   dieses Ding. A.0.105.0 das Chefbüro — die Kasse als offene Geldkassette mit Bon „Fällig um 24:00“ und dem Kontostand der letzten
   Abende, das Protokoll als Notizblock vom Schreibtisch (tafeln/allgemein.js). A.0.106.0 in den Räumen — Dienstplan und Inventurliste als
   Klemmbrett, der Transport als Packzettel auf dem Karton, die Zimmerbelegung als Bettentafel, Einteilen mit Personalakten. A.0.107.0 der
   Speiseplan als Kreidetafel mit Küchenzettel, die Kantine als Aushang an der Pinnwand, der Golfraum als Anzeigetafel, die Arbeitshilfe als
   Checkliste in der Arzttasche. */

/* ── Kasse ───────────────────────────────────────────────────────────── */
.tafel.ks-tafel { width: min(96%, 46em); }
.ks-haupt { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1em; align-items: start; }
.ks-kassette { position: relative; padding: .7em; border-radius: .5em; background: linear-gradient(#5b6670, #424c55); border: .25em solid #343c43;
  box-shadow: inset 0 .25em .5em rgba(0, 0, 0, .45), 0 .2em .4em rgba(0, 0, 0, .25); }
.ks-scheine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35em; }
.ks-fach { position: relative; height: 5.6em; border-radius: .25em; background: #2f363c; box-shadow: inset 0 .15em .3em rgba(0, 0, 0, .5); overflow: clip; }
.ks-fach i { position: absolute; left: 12%; right: 12%; bottom: calc(.3em + var(--j) * .55em); height: 3.6em; border-radius: .15em;
  background: linear-gradient(90deg, #7fae7a, #a9d1a2 45%, #7fae7a); border: 1px solid #4e7a4a; box-shadow: 0 .1em .12em rgba(0, 0, 0, .35); }
.ks-fach:nth-child(2) i { background: linear-gradient(90deg, #7ea3c9, #a9c6e3 45%, #7ea3c9); border-color: #4b6f94; }
.ks-fach:nth-child(3) i { background: linear-gradient(90deg, #d79c63, #ecc196 45%, #d79c63); border-color: #9a6a39; }
.ks-fach:nth-child(4) i { background: linear-gradient(90deg, #c98d9b, #e5b5c0 45%, #c98d9b); border-color: #8f5763; }
.ks-muenzen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3em; margin-top: .4em; }
.ks-mulde { position: relative; height: 1.9em; border-radius: 50% / 40%; background: #2f363c; box-shadow: inset 0 .15em .3em rgba(0, 0, 0, .5); }
.ks-mulde i { position: absolute; left: 22%; width: 56%; height: 40%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff1a8, #d4a72c 60%, #9c7417);
  box-shadow: 0 .08em .1em rgba(0, 0, 0, .4); }
.ks-mulde i:first-child { bottom: 22%; } .ks-mulde i:last-child { bottom: 38%; }
.ks-leer { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #d6dde3; font: 700 1.2em/1 var(--zier); letter-spacing: .1em; }
.ks-bon { padding: .7em .85em .8em; background: #fffefb; color: #24282c; font-family: 'Courier Prime', 'Courier New', monospace; box-shadow: 0 .2em .4em rgba(0, 0, 0, .18);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - .4em), 95% 100%, 90% calc(100% - .4em), 85% 100%, 80% calc(100% - .4em), 75% 100%, 70% calc(100% - .4em), 65% 100%,
    60% calc(100% - .4em), 55% 100%, 50% calc(100% - .4em), 45% 100%, 40% calc(100% - .4em), 35% 100%, 30% calc(100% - .4em), 25% 100%, 20% calc(100% - .4em), 15% 100%,
    10% calc(100% - .4em), 5% 100%, 0 calc(100% - .4em)); }
.ks-bon-kopf { margin: 0 0 .4em; padding-bottom: .3em; border-bottom: 1px dashed #8a9096; font-weight: 700; text-align: center; letter-spacing: .12em; text-transform: uppercase; }
.ks-posten { display: flex; justify-content: space-between; gap: 1em; margin: 0; font-size: .9em; line-height: 1.6; }
.ks-posten.summe { margin-top: .2em; padding-top: .2em; border-top: 1px solid #24282c; font-weight: 700; }
.ks-posten.warnung b { color: #b0281b; }
.ks-posten.gut b { color: #2c7a4b; }
.ks-bon-fuss { margin: .6em 0 .2em; padding-top: .4em; border-top: 1px dashed #8a9096; font-size: .75em; line-height: 1.4; color: #4a5056; }
.ks-saeulen { margin-top: .9em; }
.ks-saeulen > p { margin: 0 0 .3em; font-size: .82em; font-weight: 700; color: #6b5a44; }
.ks-saeulen > div { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .4em; align-items: end; height: 5.5em; padding: .3em .4em 0;
  border-bottom: 2px solid #6b5a44; background: repeating-linear-gradient(transparent 0 1.35em, rgba(107, 90, 68, .15) 1.35em calc(1.35em + 1px)); }
.ks-saeulen span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.ks-saeulen i { width: 70%; border-radius: .2em .2em 0 0; background: linear-gradient(#6aa84f, #4a8a35); }
.ks-saeulen span.minus i { background: linear-gradient(#e0665a, #b0281b); }
.ks-saeulen small { font-size: .7em; color: #6b5a44; transform: translateY(1.4em); }

/* ── Notizblock (Protokoll) ──────────────────────────────────────────── */
.nb-block { position: relative; padding-top: .9em; }
.nb-spirale { position: absolute; left: 1.2em; right: 1.2em; top: 0; height: 1.6em; z-index: 1;
  background: radial-gradient(circle at 50% 70%, transparent .32em, #8b949c .33em, #c9d0d6 .42em, transparent .45em) 0 0 / 1.3em 1.6em repeat-x; }
.nb-blatt { max-height: 26em; overflow: auto; overscroll-behavior: contain; padding: 1em 1em .8em 3.4em; border-radius: .2em; background-color: #fff8c9;
  background-image: linear-gradient(90deg, transparent 2.9em, #e9a3a0 2.9em, #e9a3a0 calc(2.9em + 1px), transparent calc(2.9em + 1px)),
    repeating-linear-gradient(transparent 0 1.5em, #cfd9e6 1.5em calc(1.5em + 1px));
  box-shadow: 0 .2em .45em rgba(0, 0, 0, .2); }
.nb-blatt .chronik { margin: 0; padding: 0; gap: 0; line-height: 1.5em; font-size: .92em; }
.nb-blatt .chronik li:not(.chronik-tag) { grid-template-columns: 3em 1fr; margin-left: -3.3em; }
.nb-blatt .chronik time { font-family: 'Courier Prime', 'Courier New', monospace; font-size: .8em; color: #6b5a44; text-align: right; }
.nb-blatt .chronik .chronik-tag { margin: .2em 0 0 -.2em; border: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; color: #3b2a17; }

/* ── Klemmbrett (Dienstplan, Inventurliste) ──────────────────────────── */
.kb-brett { position: relative; padding: 1.5em .7em .7em; border-radius: .6em; background: linear-gradient(135deg, #b98b58, #a2743f 60%, #b98b58);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15), 0 .2em .45em rgba(0, 0, 0, .3); }
.kb-klammer { position: absolute; left: 50%; top: .25em; width: 6.5em; height: 1.7em; transform: translateX(-50%); border-radius: .35em .35em .6em .6em;
  background: linear-gradient(#e9edf0, #9aa5ae 60%, #c5ccd2); box-shadow: 0 .15em .2em rgba(0, 0, 0, .35); z-index: 1; }
.kb-klammer::after { content: ''; position: absolute; left: 50%; top: .35em; width: 1.7em; height: .5em; transform: translateX(-50%); border-radius: 999px; background: #5d6872; }
.kb-blatt { padding: .9em .9em .7em; background: #fffefa; border-radius: .15em; box-shadow: 0 .1em .2em rgba(0, 0, 0, .2); }
.kb-titel { margin: 0 0 .4em; padding-bottom: .2em; border-bottom: 2px solid #23313b; font: 800 .98em/1.3 'Nunito', sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #23313b; }
.kb-titel small { margin-left: .5em; font-size: .72em; letter-spacing: .04em; text-transform: none; color: #5d6b75; font-weight: 600; }
.kb-blatt .plan-zeile { border-bottom: 1px solid #d9dee2; }
.kb-blatt .plan-zeile.offen .plan-wer b { background: linear-gradient(transparent 35%, #fff176 35%, #fff176 85%, transparent 85%); padding: 0 .2em; }
.kb-blatt .plan-wer small { font-family: 'Courier Prime', 'Courier New', monospace; font-weight: 700; color: #3e4b55; }
.iv-regal { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 2px; margin: .1em 0 .5em; padding: 3px; border-radius: .2em; background: #8d99a3; }
.iv-regal i { height: .55em; background: #e6eaed; border-radius: 1px; }
.iv-regal i.voll { background: linear-gradient(#c79a5b, #a7783a); }
.kb-blatt .iv-liste td:first-child::before { content: '☑ '; color: #2c7a4b; }

/* ── Packzettel auf dem Karton (Transport) ───────────────────────────── */
.tr-karton { padding: .8em; border-radius: .4em; background: linear-gradient(135deg, #c9a06a, #b88d55 55%, #c9a06a);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 .2em .4em rgba(0, 0, 0, .25); }
.tr-karton::before { content: ''; display: block; height: .55em; margin: -.8em -.8em .6em; border-radius: .4em .4em 0 0; background: linear-gradient(#1f7f78, #18665f); }
.tr-zettel { padding: .7em .9em .8em; background: #fffefb; border-radius: .15em; box-shadow: 0 .12em .25em rgba(0, 0, 0, .2); }
.tr-titel { margin: 0 0 .45em; padding-bottom: .2em; border-bottom: 2px solid #23313b; font: 800 .98em/1.3 'Nunito', sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #23313b; }
.tr-titel small { margin-left: .5em; font-size: .72em; letter-spacing: .04em; text-transform: none; color: #5d6b75; font-weight: 600; }
.tr-zettel .hinweis, .tr-zettel .warnung { position: relative; padding: .45em .7em; border: 1px solid #e6d77d; background: #fff7c2; border-radius: .15em;
  box-shadow: 0 .1em .2em rgba(0, 0, 0, .12); transform: rotate(-.3deg); }
.tr-zettel .warnung { border-color: #f0b3a8; background: #ffe4dd; }
.tr-liste td:nth-child(2), .tr-liste td:nth-child(3) { font-family: 'Courier Prime', 'Courier New', monospace; font-weight: 700; }
.tr-unterwegs li.faehrt::before { content: '🚚 '; }
.tr-unterwegs li.wartet::before { content: '⏳ '; }
.tr-unterwegs li.wartet { color: #4d5a63; }
/* Karteireiter am Packzettel (A.0.118.0): zeigen, welche Liste aufgeschlagen ist — der aufgeschlagene hängt am Zettel, kein goldener Knopf */
.tr-zettel .reiter.tr-reiter { flex-wrap: nowrap; gap: .3em; margin: .2em 0 .7em; padding: 0 .3em; border-bottom: 2px solid #23313b; }
.tr-zettel .reiter.tr-reiter .knopf { margin-bottom: -2px; padding: .35em 1em .3em; border: 1px solid #b9b2a4; border-bottom: 2px solid #23313b;
  border-radius: .55em .55em 0 0; background: #ebe4d6; color: #4d5a63; font-weight: 700; box-shadow: none; }
.tr-zettel .reiter.tr-reiter .knopf:hover { background: #f5efe3; color: #23313b; }
.tr-zettel .reiter.tr-reiter .knopf.an { background: #fffefb; color: #23313b; border-color: #23313b; border-bottom-color: #fffefb; cursor: default; }
/* Laufzettel des Lageristen (A.0.118.0) auf dem Klemmbrett im Lager */
.kb-blatt .lz-titel { margin: .8em 0 .2em; }
.kb-blatt .lz-regel { margin: 0 0 .5em; font-size: .85em; color: #5d6b75; }
.kb-blatt .lz-danach { margin: .7em 0 .2em; font-size: .9em; color: #3e4b55; }
.lz-runde { margin: .35em 0 .5em; padding: .35em .6em .4em; border-left: .25em solid #2c7a4b; background: #f2f7f3; border-radius: 0 .2em .2em 0; }
.lz-runde.kommt { border-left-color: #b9b2a4; background: #f8f6f1; }
.lz-kopf { margin: 0 0 .15em; font-weight: 800; color: #23313b; }
.lz-runde ol { margin: 0; padding-left: 1.5em; }
.lz-runde li { margin: .1em 0; }
.lz-uhr { font-family: 'Courier Prime', 'Courier New', monospace; font-weight: 700; color: #1f5f78; white-space: nowrap; }
.lz-zurueck { color: #5d6b75; }

/* ── Bettentafel (Zimmerbelegung) ────────────────────────────────────── */
.tafel.zb-tafel .tafel-inhalt > .zb-liste, .tafel.zb-tafel .tafel-inhalt > .warnung { position: relative; }
.zb-tafel .zb-liste { padding: .6em .8em; background: linear-gradient(#ffffff, #f3f5f7); border: .3em solid #c3cad1; border-radius: .4em; box-shadow: inset 0 0 0 1px #e3e7ea; }
.zb-tafel .zb-zimmer { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1em; align-items: center; border-bottom: 1px dashed #c3cad1; }
.zb-tafel .zb-zimmer:last-child { border-bottom: 0; }
.zb-betten { grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(4, 1.5em); gap: .25em; }
.zb-bett { position: relative; width: 1.5em; height: 1em; border-radius: .2em; border: 2px solid #5a6670; background: #fff; }
.zb-bett::before { content: ''; position: absolute; left: .12em; top: .14em; width: .4em; height: .45em; border-radius: .12em; background: #c9d0d6; }
.zb-bett.belegt { background: #6aa84f; border-color: #3f6f2c; }
.zb-bett.belegt.mittel { background: #f2c200; border-color: #9a7b00; }
.zb-bett.belegt.schlecht { background: #e0665a; border-color: #9a2a1a; }
.zb-bett.belegt::before { background: #fff; }
.zb-bett.gehalten { background: repeating-linear-gradient(45deg, #fff 0 .18em, #c3cad1 .18em .36em); }
/* A.0.110.0: ein Bett mit einem Toten (bis dahin schraffiert wie freigehalten) */
.zb-bett.tot { background: #4b545b; border-color: #22282c; }
.zb-bett.tot::before { background: #8f989f; }

/* ── Einteilen: die Bögen in Personalakten ───────────────────────────── */
.ei-tafel .tafel-inhalt > .bogen, .ei-tafel .vergleich-spalte > .bogen { padding: .5em .65em; background: linear-gradient(#f4e6bf, #ecd9a7); border: 1px solid #c8ad6a;
  border-radius: 0 .35em .35em .35em; box-shadow: 0 .12em .3em rgba(60, 40, 10, .18); }
.ei-tafel .tafel-inhalt > h4, .ei-tafel .vergleich-spalte > h4 { display: inline-block; margin: .3em 0 0; padding: .15em .8em; background: #f4e6bf; border: 1px solid #c8ad6a;
  border-bottom: 0; border-radius: .35em .35em 0 0; font: 700 .8em/1.3 'Courier Prime', 'Courier New', monospace; color: #3b2a17; }

/* ── Kreidetafel der Küche (Speiseplan) ──────────────────────────────── */
.kt-haupt { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1em; align-items: start; }
.kt-tafel { padding: .8em 1em 1em; border-radius: .4em; background: radial-gradient(ellipse at 30% 20%, #3c4a43, #26302b 70%); border: .45em solid #7a5634;
  box-shadow: inset 0 0 1.2em rgba(0, 0, 0, .5), 0 .2em .45em rgba(0, 0, 0, .3); color: #f1f1ea; }
.kt-heute { margin: 0 0 .5em; font: 700 1.25em/1.3 var(--zier); color: #fffbe6; text-shadow: 0 0 .15em rgba(255, 255, 255, .35); }
.kt-heute b { color: #ffe27a; }
.kt-karte { display: flex; flex-direction: column; gap: .1em; margin-bottom: .6em; }
.tafel .knopf.kt-gericht { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: .6em; padding: .15em .4em; text-align: left;
  background: none; border: 0; border-bottom: 1px dashed rgba(255, 255, 255, .18); border-radius: 0; color: #eef0ea; font: 600 .95em/1.4 var(--zier); }
.tafel .knopf.kt-gericht:hover:not(:disabled), .tafel .knopf.kt-gericht:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.kt-gericht i { font-style: normal; color: #cfe3d6; font-size: .9em; }
.kt-gericht b { padding: 0 .4em; border: 2px solid #ffe27a; border-radius: 999px; color: #ffe27a; font-size: .78em; transform: rotate(-3deg); }
.tafel .knopf.kt-gericht.gezeigt { background: rgba(255, 255, 255, .1); text-decoration: underline wavy rgba(255, 226, 122, .7); text-underline-offset: .25em; }
.kt-regler { padding-top: .4em; border-top: 2px solid rgba(255, 255, 255, .2); }
.kt-regler .wahl-zeile { color: #eef0ea; }
.kt-regler .wahl-zeile small { color: #b9c9be; }
.kt-lager { margin: .4em 0 0; font-size: .85em; color: #d7e2da; }
.kt-lager b { color: #fff; }
.kt-zettel { padding: .7em .85em; background: #fffdf3; border-radius: .15em; box-shadow: 0 .15em .35em rgba(0, 0, 0, .2); transform: rotate(.6deg); font-size: .9em; }
.kt-zettel-titel { margin: 0 0 .35em; font: 700 1.05em/1.25 var(--zier); color: #2b2214; }
.kt-zettel-titel small { display: block; font: 700 .7em/1.3 var(--schrift); color: #2c7a4b; }
.kt-zettel p { margin: 0 0 .35em; }
.kt-zettel ul { margin: 0; padding-left: 1.1em; }
.kt-zettel .gut { color: #2c7a4b; }

/* ── Aushang der Kantine ─────────────────────────────────────────────── */
.ah-pinnwand { padding: .9em; border-radius: .35em; background: radial-gradient(circle at 20% 30%, #c9a36d 0 .08em, transparent .1em) 0 0 / .9em .9em,
  radial-gradient(circle at 70% 60%, #b8925c 0 .07em, transparent .09em) 0 0 / 1.1em 1.1em, #d4b27f; border: .35em solid #8a5a2b; box-shadow: inset 0 0 .6em rgba(0, 0, 0, .25); }
.ah-blatt { position: relative; padding: 1em 1em .8em; background: #fffef8; box-shadow: 0 .15em .35em rgba(0, 0, 0, .25); transform: rotate(-.5deg); }
.ah-zwecke::before, .ah-zwecke::after { content: ''; position: absolute; top: .35em; width: .7em; height: .7em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9ecbff, #2a6fc9);
  box-shadow: 0 .1em .15em rgba(0, 0, 0, .35); }
.ah-zwecke::before { left: .45em; } .ah-zwecke::after { right: .45em; }
.ah-titel { margin: 0 0 .4em; font: 700 1.1em/1.3 var(--zier); color: #2b2214; }
.ah-stempel { position: absolute; right: .8em; top: .7em; padding: .1em .55em; border: .17em solid; border-radius: .3em; font: 800 .8em/1.3 'Nunito', sans-serif;
  letter-spacing: .1em; text-transform: uppercase; transform: rotate(6deg); }
.ah-stempel.offen { color: #2c7a4b; border-color: #2c7a4b; }
.ah-stempel.zu { color: #b0281b; border-color: #b0281b; }
.ah-klein { margin: .5em 0 0; font-size: .78em; line-height: 1.45; color: #5c4d38; }

/* ── Anzeigetafel des Golfraums ──────────────────────────────────────── */
.gb-brett { padding: .7em .9em .8em; border-radius: .35em; background: #0f4a2e; border: .35em solid #e9e3cf; box-shadow: 0 .2em .45em rgba(0, 0, 0, .3);
  color: #fff; font-family: ui-monospace, 'DejaVu Sans Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
.gb-summe { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 .5em; padding-bottom: .35em; border-bottom: 2px solid rgba(255, 255, 255, .35); font-weight: 700; }
.gb-summe b { font-size: 1.6em; color: #ffd84a; }
.gb-reihe { margin-top: .45em; }
.gb-kopf { margin: 0 0 .2em; font-size: .78em; color: #a9d8bd; font-weight: 700; }
.gb-name { display: flex; justify-content: space-between; gap: 1em; margin: 0; padding: .15em .35em; background: rgba(255, 255, 255, .07); border-radius: .15em; font-weight: 700; font-size: .92em; }
.gb-name + .gb-name { margin-top: .2em; }
.gb-name b { color: #ffd84a; }
.gb-name.leer { color: #7fae94; }

/* ── Arzttasche (Arbeitshilfe) ───────────────────────────────────────── */
.at-tasche { position: relative; padding: 1.4em .8em .8em; border-radius: .9em .9em .5em .5em; background: linear-gradient(#8a4a2a, #6e3820); border: 2px solid #4a2412;
  box-shadow: inset 0 .25em .5em rgba(0, 0, 0, .35), 0 .2em .45em rgba(0, 0, 0, .3); }
.at-schnalle { position: absolute; left: 50%; top: .25em; width: 3.2em; height: .9em; transform: translateX(-50%); border-radius: .25em; background: linear-gradient(#f0d58a, #b8902f);
  box-shadow: 0 .1em .15em rgba(0, 0, 0, .4); }
.at-karte { padding: .7em .85em .8em; background: #fffefa; border-radius: .25em; box-shadow: 0 .12em .25em rgba(0, 0, 0, .25); }
.at-titel { margin: 0 0 .35em; padding-bottom: .15em; border-bottom: 2px solid #23313b; font: 800 .95em/1.3 'Nunito', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #23313b; }
.at-karte .hilfe-eintrag::before { content: '☐'; margin-right: .1em; color: #5d6b75; }

@container (max-width: 560px) {
  .ks-haupt { grid-template-columns: minmax(0, 1fr); }
  .kt-haupt { grid-template-columns: minmax(0, 1fr); }
  .zb-tafel .zb-zimmer { grid-template-columns: minmax(0, 1fr); }
  .zb-betten { grid-row: auto; margin-top: .3em; }
  .iv-regal { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}