/* Tafeln: Pergament mit dunkler Schrift, Daumen hoch/runter unten */

.tafel-schleier { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 5, 2, .58); padding: 1.5%; }
.tafel { container-type: inline-size; width: min(94%, 44em); max-height: 100%; display: flex; flex-direction: column;
  font-size: clamp(12px, 1.25cqw, 19px); color: #2a1d12; border-radius: .6em; border: .2em solid #6b4a22; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #f4e8c8, #e2cf9c); box-shadow: 0 .6em 2em rgba(0, 0, 0, .7); }
.tafel.breit { width: min(97%, 62em); }
.tafel-kopf { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .45em .9em;
  background: linear-gradient(#6b4a22, #4a3216); color: #f5eddc; }
.tafel-kopf h2 { font-family: var(--zier); font-size: 1.05em; font-weight: 700; letter-spacing: .02em; }
.tafel-zu { background: none; border: 0; color: #f5eddc; font-size: 1.1em; cursor: pointer; padding: 0 .2em; }
.tafel-inhalt { overflow: auto; padding: .7em 1em; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.tafel-fuss { padding: .5em .8em; border-top: 1px solid rgba(107, 74, 34, .35); background: rgba(107, 74, 34, .08); display: grid; gap: .4em; }
.tafel h3 { font-family: var(--zier); font-size: 1em; color: #5a2a1a; margin-bottom: .3em; }
.tafel h4 { font-family: var(--zier); font-size: .9em; color: #5a2a1a; margin: .6em 0 .25em; }
.tafel p { margin-bottom: .45em; }
.meldung-text { font-size: 1.1em; }
.hinweis { font-size: .9em; color: #5a4630; font-weight: 500; }
/* Regel- und Erklärtexte in den Tafeln (A.0.56.4, Übersichtlichkeit Paket 6): ein ruhiger Kasten mit Rand links, abgesetzt
   von den Werten — vorher klebte das Kleingedruckte ohne Abstand an Tabellen und Listen und las sich wie ein Teil davon */
.tafel-inhalt > p.hinweis, .tafel-inhalt > div > p.hinweis:last-child { margin: .6em 0 .1em; padding: .35em .65em; background: rgba(107, 74, 34, .07);
  border-left: .22em solid rgba(107, 74, 34, .4); border-radius: 0 .3em .3em 0; line-height: 1.35; }
.warnung, .zeile.warnung b { color: #9a2a1a; }

/* Knöpfe */
.knopf { cursor: pointer; border: 1px solid #6b4a22; background: #f8efd6; color: #2a1d12; border-radius: .4em; padding: .3em .7em; }
.knopf:hover:not(:disabled) { background: #fff6dd; border-color: #3a2a14; }
.knopf:disabled { opacity: .45; cursor: default; filter: grayscale(1); }
.knopf.klein { font-size: .85em; padding: .15em .5em; margin-left: .3em; }
.daumen-reihe { display: flex; flex-wrap: wrap; gap: .45em; justify-content: flex-end; }
.daumen { font-family: var(--zier); font-weight: 700; font-size: .9em; padding: .45em .9em; border-width: 2px; }
.daumen.hoch { background: linear-gradient(#f3d27a, #d9a93a); border-color: #8a6414; }
.daumen.hoch:hover:not(:disabled) { background: linear-gradient(#f8dc8e, #e2b448); }
.daumen.runter { background: #efe0c0; }
/* was nicht rückgängig zu machen ist (A.0.56.5: „Neu anfangen“ war golden wie jede Hauptaktion) */
.daumen.gefahr { background: #a8322a; border-color: #7a140f; color: #fff; }
.tat-reihe { display: flex; flex-wrap: wrap; gap: .35em .9em; align-items: center; }
.tat-reihe .knopf { font-size: .88em; }

/* Zeilen, Balken, Stellschrauben */
.zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: .18em 0; border-bottom: 1px dotted rgba(107, 74, 34, .35); }
.zeile span { color: #5a4630; }
.zeile b { text-align: right; font-weight: 700; }
.zeile.summe { border-top: 2px solid #6b4a22; border-bottom: 0; margin-top: .2em; }
.balken { display: inline-block; vertical-align: middle; width: 4.5em; height: .55em; border-radius: 999px; background: rgba(107, 74, 34, .2); overflow: hidden; margin-left: .3em; }
.balken i { display: block; height: 100%; border-radius: 999px; }
.balken.gut i { background: #4a8a3a; }
.balken.mittel i { background: #c79a2a; }
.balken.schlecht i { background: #a83a2a; }
.stepper { display: inline-flex; align-items: center; gap: .3em; }
.stepper b { min-width: 5.5em; text-align: center; }
.stepper .knopf { width: 2em; height: 2em; padding: 0; font-weight: 700; }
.wahl-zeile { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .35em 0; border-bottom: 1px dotted rgba(107, 74, 34, .35); }
.wahl-zeile small { display: block; font-size: .8em; color: #6a563c; font-weight: 500; }
/* Die Stellenanzeige (A.0.73.0, tafeln/personal.js anzeigeKarte): ein Eintrag im Stellenportal — weißes Blatt mit dem Zeichen und
   den Farben der Klinik (wie ihr Schild im Chefbüro); was an den Werten hängt, steht petrol und fett */
.stellenanzeige { margin: 0 0 .55em; padding: .55em .8em .65em; background: #fff; color: #1f2c33; border: 1px solid rgba(14, 91, 106, .28);
  border-left: .3em solid #1fa595; border-radius: .35em; box-shadow: 0 1px 2px rgba(60, 40, 10, .12); }
.stellenanzeige header { display: flex; align-items: center; gap: .4em; margin-bottom: .3em; }
.stellenanzeige header .logo { width: 1.45em; height: 1.45em; flex: none; }
.stellenanzeige header b { font: 700 1em / 1.1 var(--zier); color: #0e5b6a; letter-spacing: .01em; }
.stellenanzeige p { margin: 0; font-size: .92em; line-height: 1.45; font-weight: 500; }
.stellenanzeige p b { font-weight: 800; color: #0e5b6a; }
/* Erklärungen beim Überfahren (A.0.69.0, ui/hinweis.js): das kleine „i“ hinter dem Namen zeigt, dass es eine gibt; die
   Blase im Stil der Tafeln steht neben der Tafel oder unter/über der Zeile, ihr Pfeil zeigt auf die Zeile (--pfeil) */
[data-hinweis] .hinweis-wort { cursor: help; }
.hinweis-wort:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: .2em; }
.hinweis-i { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; margin-left: .35em; border-radius: 50%; vertical-align: .1em;
  font: italic 700 .72em / 1 Georgia, 'Times New Roman', serif; color: #fff8e6; background: #a8865a; }
[data-hinweis]:hover .hinweis-i { background: #6b4a22; }
.hinweis-blase { position: absolute; z-index: 30; padding: .55em .8em .6em; border-radius: .5em; background: #fffaf0; border: 2px solid #6b4a22;
  color: #2a1d12; box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .45); font: 600 clamp(12px, 1.05cqw, 16px) / 1.42 var(--schrift); text-align: left; }
.hinweis-blase b { display: block; margin-bottom: .2em; font: 700 1.04em / 1.2 var(--zier); color: #5a2a1a; }
.hinweis-blase::before { content: ''; position: absolute; width: 10px; height: 10px; background: #fffaf0; border: 2px solid #6b4a22; border-top: 0; border-right: 0; }
.hinweis-blase[data-wo="links"]::before { right: -7px; top: calc(var(--pfeil, 50%) - 6px); transform: rotate(-135deg); }
.hinweis-blase[data-wo="rechts"]::before { left: -7px; top: calc(var(--pfeil, 50%) - 6px); transform: rotate(45deg); }
.hinweis-blase[data-wo="unten"]::before { top: -7px; left: calc(var(--pfeil, 20px) - 6px); transform: rotate(135deg); }
.hinweis-blase[data-wo="oben"]::before { bottom: -7px; left: calc(var(--pfeil, 20px) - 6px); transform: rotate(-45deg); }
.summe-zeile { margin-top: .5em; font-size: 1.05em; }
.blaettern { display: flex; align-items: center; justify-content: center; gap: 1em; margin: .5em 0 .2em; }
.blaettern .knopf { font-size: 1.2em; padding: .1em .6em; }

/* Personal- und Patientenbogen */
.bogen-kopf { display: flex; align-items: center; gap: .8em; margin-bottom: .5em; flex-wrap: wrap; }
.bogen-kopf h3 { margin: 0; font-size: 1.1em; }
.bogen-kopf p { margin: 0; color: #5a4630; }
.bogen-bild { font-size: 2.6em; width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #fff4d8, #c9ad6e); border: .1em solid #6b4a22; }
.bogen-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4em; }
.taetigkeit { grid-column: 1 / -1; margin-top: .4em; padding: .3em .6em; background: rgba(107, 74, 34, .12); border-radius: .3em; }
/* Personalbogen (A.0.56.1): was die Person tut, gleich unter dem Namen; die Werte in den Gruppen „Arbeit“ und „Können“ */
.bogen-kopf .taetigkeit { display: inline-block; margin-top: .3em; padding: .15em .55em; color: #2a1a08; font-weight: 600; }
.bogen-kopf .taetigkeit.fort { color: #7a5a3a; font-weight: 500; }
.bogen-gruppe h5 { margin: .2em 0 .15em; font-size: .74em; text-transform: uppercase; letter-spacing: .09em; color: #8a6a3a; }
.bogen-felder.einspaltig { grid-template-columns: 1fr; }
.bogen-felder.einspaltig .bogen-gruppe + .bogen-gruppe { margin-top: .5em; }
.zeile small.warnung { font-weight: 700; }
/* Tauschen: zwei Bögen nebeneinander, was einer besser kann, grün mit ▲ */
.bogen-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6em; }
.bogen-vergleich h4 { margin: 0 0 .3em; }
.zeile.besser b { color: #2f6d22; }
.zeile .vorn { font-style: normal; font-size: .75em; color: #2f6d22; }
@container (max-width: 620px) { .bogen-vergleich { grid-template-columns: 1fr; } }
/* Knöpfe am Personalbogen in Gruppen; Gehalt − 135 € +; Entlassen abgesetzt und rot */
.tat-gruppe { display: inline-flex; flex-wrap: wrap; gap: .35em; }
.tat-gruppe.rechts { margin-left: auto; }
.tat-gehalt { display: inline-flex; align-items: center; gap: .3em; padding: 0 .3em; border: 1px solid rgba(107, 74, 34, .35); border-radius: .5em; }
.tat-gehalt b { min-width: 4.2em; text-align: center; }
.tat-reihe .knopf.gefahr:not(:disabled) { color: #9a2a1a; border-color: #b8664f; }
.tat-grund { margin: .35em 0 0; font-size: .82em; color: #6a563c; }
/* der Grund neben einem gesperrten Hauptknopf (A.0.56.4, html.js daumen hochGrund) */
.knopf-grund { margin-right: auto; align-self: center; font-size: .88em; color: #9a2a1a; font-weight: 600; }
.taetigkeit.fort { color: #7a5a3a; }
.spruch { grid-column: 1 / -1; font-style: italic; color: #5a3a1a; margin: .3em 0; }
@container (max-width: 520px) { .bogen-felder { grid-template-columns: 1fr; } }
/* Patientenakte wie im Vorbild (A.0.55.0; Biing!-Handbuch S. 41–43): ein Blatt im Hochformat — weißes Papier mit Heftrand
   und Lochung, gedruckte Vordruckfelder (kleine Bezeichnung, Wert in Schreibmaschinenschrift), linierte Felder, die
   Krankheitskurve auf Millimeterpapier, unten rechts das Eselsohr */
.tafel.akte-tafel { width: min(94%, 33em); font-size: clamp(12px, 1.15cqw, 17px); background: #fbfaf4; color: #1c232a; border: 0; border-radius: .2em; position: relative;
  padding-left: 2.3em; box-shadow: 0 .6em 2.2em rgba(0, 0, 0, .7), inset 0 0 3em rgba(150, 140, 110, .12); }
.tafel.akte-tafel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2.3em; pointer-events: none;
  background: radial-gradient(circle at 50% 22%, #2a2620 0 .32em, transparent .36em), radial-gradient(circle at 50% 78%, #2a2620 0 .32em, transparent .36em),
    linear-gradient(90deg, #d8d5c6, #ecebe2 70%, #c9c6b6); border-right: 1px solid #b7b3a0; }
.tafel.akte-tafel::after { content: ''; position: absolute; left: .75em; top: 16%; bottom: 16%; width: .45em; border-radius: .3em; pointer-events: none;
  background: linear-gradient(90deg, #8e9a8a, #c9d3c4 45%, #7d8a79); box-shadow: 0 0 .2em rgba(0, 0, 0, .35); }
.akte-tafel .tafel-kopf { background: none; color: #23313b; padding: .5em .9em .2em; border-bottom: 2px solid #23313b; margin: 0 .6em; }
.akte-tafel .tafel-kopf h2 { font-family: 'Nunito', sans-serif; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .95em; }
/* vorn der Name deiner Klinik (A.0.78.0: --klinik setzt steuerung.js malen; bis dahin fest „Hilfenah“) */
.akte-tafel .tafel-kopf h2::before { content: var(--klinik, '') ' · '; font-weight: 600; letter-spacing: .04em; text-transform: none; color: #5d6b75; }
.akte-tafel .tafel-zu { color: #23313b; }
.akte-tafel .tafel-inhalt { padding: .6em .9em .4em; }
.akte-tafel .tafel-fuss { background: none; border-top: 1px dashed #a9b4bc; }
.akte-tafel .blaettern .knopf { background: #fff; }
.af-oben { display: grid; grid-template-columns: 7.4em 1fr; gap: .8em; align-items: end; margin-bottom: .55em; }
.af-oben .bogen-bild.foto { width: 7.4em; height: 8.4em; border-radius: 0; border: .4em solid #fff; outline: 1px solid #c3c7c0;
  box-shadow: .1em .2em .5em rgba(0, 0, 0, .3); background: #ddd; }
.af-kurve-feld { min-width: 0; }
.akte-kurve { display: block; width: 100%; height: auto; font-family: 'Nunito', sans-serif; }
.akte-kurve .papier { fill: #fffef9; stroke: #7f8f9a; stroke-width: .4; }
.akte-kurve .gitter line { stroke: #c9d3da; stroke-width: .18; }
.akte-kurve .gitter line.grob { stroke: #93a5b2; stroke-width: .32; }
.akte-kurve .zahlen text { font-size: 4.4px; fill: #4c5964; }
.akte-kurve .achse { font-size: 4px; fill: #6a7680; }
.akte-kurve .linie { fill: none; stroke: #b4231b; stroke-width: .9; stroke-linejoin: round; }
.akte-kurve .punkte circle { fill: #b4231b; }
.af-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #8e9ea9; border-left: 1px solid #8e9ea9; margin-bottom: .5em; }
.af { border-right: 1px solid #8e9ea9; border-bottom: 1px solid #8e9ea9; padding: .1em .4em .2em; min-width: 0; }
.af.s2 { grid-column: span 2; } .af.s3 { grid-column: span 3; } .af.s4 { grid-column: 1 / -1; }
.af-l { display: block; font-size: max(.62em, 9px); font-weight: 600; color: #56636e; letter-spacing: .02em; }
.af-w { display: block; font-family: 'Courier Prime', 'Courier New', monospace; font-weight: 700; font-size: .98em; color: #14181c; overflow-wrap: anywhere; }
.af-linien .af-w { --zh: 1.38em; line-height: var(--zh); min-height: calc(var(--z, 2) * var(--zh));
  background-image: repeating-linear-gradient(transparent 0 calc(var(--zh) - 1px), #c3ced6 calc(var(--zh) - 1px) var(--zh)); }
.af-kreuz { white-space: nowrap; font-size: .9em; }
.af-prozent .af-w { display: flex; justify-content: space-between; gap: 1em; }
.af-zahl.schlecht, .af .warnung, .af.warnung .af-w { color: #a3221a; }
.af-zimmer .af-w { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-rechnung .af-posten { display: flex; justify-content: space-between; gap: 1em; font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: .95em; border-bottom: 1px solid #d3dbe1; padding: .1em 0; }
.af-rechnung .af-posten.summe { border-top: 2px solid #23313b; border-bottom: 0; font-weight: 700; }
/* Seiten (A.0.55.1): alle drei übereinander im selben Feld — das Blatt ist so groß wie die längste Seite und bleibt beim
   Blättern stehen; umgeblättert wird ohne Animation (A.0.55.2) */
.akte-seiten { display: grid; }
.akte-seite { grid-area: 1 / 1; visibility: hidden; display: flex; flex-direction: column; background: #fbfaf4; }
.akte-seite.an { visibility: visible; }
.af-fuss { margin-top: auto; padding-top: .3em; font-family: 'Courier Prime', 'Courier New', monospace; font-weight: 700; font-size: .8em; color: #3e4b55; }
/* Eselsohr: die umgeknickte Ecke unten rechts am Blatt selbst — das Blatt ist dort abgeschnitten (clip-path), darauf liegt
   die umgeschlagene Ecke mit ihrer Rückseite und wirft einen Schatten aufs Papier */
.tafel.akte-tafel { --ohr: 2.9em; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ohr)), calc(100% - var(--ohr)) 100%, 0 100%); }
/* Zimmerbelegung (A.0.56.2): alle Zimmer untereinander, darunter die Kranken als Knöpfe zur Akte */
.zb-zimmer { padding: .35em 0 .45em; border-bottom: 1px solid rgba(107, 74, 34, .3); }
.zb-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em 1.1em; font-size: .9em; color: #5a4630; }
.zb-kopf > b:first-child { font-size: 1.08em; color: #2a1a08; margin-right: auto; }
.zb-kopf .voll { color: #9a2a1a; font-weight: 700; }
.zb-kranke { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .3em; }
.zb-kranker { font-size: .85em; padding: .1em .55em; min-height: 0; border-radius: 999px; }
.zb-kranker.schlecht b { color: #9a2a1a; }
.zb-leer { font-size: .85em; color: #8a7a62; font-style: italic; }
/* die Patientenliste (A.0.56.2) hat kein Eselsohr */
.tafel.akte-tafel.ohne-ohr { clip-path: none; }
.akte-tafel.ohne-ohr .tafel-fuss { padding-right: 1em; }
/* Patientenliste: ein getipptes Verzeichnis auf dem Aktenpapier, je Zeile ein Knopf zur Akte */
.pl-blatt { font-family: 'Courier Prime', 'Courier New', monospace; }
.pl-kopf { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #23313b; padding-bottom: .2em; margin-bottom: .3em; }
.pl-kopf b { font-size: 1.15em; letter-spacing: .04em; text-transform: uppercase; }
.pl-kopf span, .pl-fuss { font-size: .82em; color: #55636e; }
.pl-spalten, .pl-zeile { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.35fr) 4.6em 5.4em; gap: .6em; align-items: baseline; }
.pl-spalten { font-family: var(--schrift, sans-serif); font-size: .72em; text-transform: uppercase; letter-spacing: .07em; color: #55636e; padding: 0 .3em; }
.pl-gruppe { margin: .55em 0 .1em; font-family: var(--schrift, sans-serif); font-size: .78em; color: #23313b; border-bottom: 1px solid #b9c4cc; }
.pl-gruppe small { color: #6a7782; font-weight: 500; }
.pl-zeile { width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid #dde3e8; border-radius: 0; padding: .18em .3em; cursor: pointer; box-shadow: none; }
.pl-zeile:hover, .pl-zeile:focus-visible { background: rgba(222, 167, 38, .16); }
.pl-name, .pl-wo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-name { font-weight: 700; }
.pl-zahl { text-align: right; }
.pl-zahl.schlecht { color: #a3221a; font-weight: 700; }
.pl-fuss { margin: .5em 0 0; }
.tafel-schleier:has(> .akte-tafel) { filter: drop-shadow(0 .5em 1.2em rgba(0, 0, 0, .6)); }
.akte-tafel .tafel-fuss { padding-right: calc(var(--ohr) + 1.6em); }
/* die Klickfläche ist größer als der Zipfel und liegt im sichtbaren Papier (die abgeschnittene Ecke nimmt keine Klicks an) */
.af-eselsohr { position: absolute; right: 0; bottom: 0; width: calc(var(--ohr) + 1.2em); height: calc(var(--ohr) + 1.2em); border: 0; padding: 0;
  background: none; cursor: pointer; z-index: 3; }
.af-eselsohr::before { content: ''; position: absolute; right: 0; bottom: 0; width: var(--ohr); height: var(--ohr);
  background: linear-gradient(to bottom right, #f6f3e6 0%, #e6e1cc 38%, #c9c2a8 49.5%, transparent 50%);
  filter: drop-shadow(-.18em -.18em .22em rgba(0, 0, 0, .3)); transition: filter .15s; }
.af-eselsohr span { position: absolute; right: .2em; bottom: calc(var(--ohr) + .1em); white-space: nowrap; font-size: .78em; color: #56636e; pointer-events: none; }
.af-eselsohr:hover::before, .af-eselsohr:focus-visible::before { background: linear-gradient(to bottom right, #fff6d8 0%, #f3d98e 38%, #d6b45a 49.5%, transparent 50%);
  filter: drop-shadow(-.25em -.25em .3em rgba(0, 0, 0, .38)); }
.af-eselsohr:focus-visible { outline: none; }
/* Handy quer (wenig Höhe): Foto und Kurve links neben den Feldern statt darüber */
@media (max-height: 500px) {
  .tafel.akte-tafel { width: min(97%, 58em); }
  .akte-seite:has(.af-oben) { display: grid; grid-template-columns: 16em minmax(0, 1fr); column-gap: .8em; align-content: start; }
  .akte-seite:has(.af-oben) > .af-oben { grid-column: 1; grid-row: 1 / span 2; grid-template-columns: 1fr; justify-items: center; }
  .akte-seite:has(.af-oben) > .af-raster, .akte-seite:has(.af-oben) > .af-fuss { grid-column: 2; }
  .af-oben .bogen-bild.foto { width: 6.5em; height: 7.4em; }
}

/* Wahl-Knöpfe (Gebäudearten beim Makler) */
.arten-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5em, 1fr)); gap: .5em; margin: .4em 0; }
.arten-knopf { display: flex; flex-direction: column; align-items: center; gap: .15em; padding: .5em .3em; }
.arten-knopf small { color: #6a563c; font-weight: 500; }
.geb-titel { font-size: 1.1em; }
ul.einfach { list-style: none; display: grid; gap: .3em; }

/* Listen */
table.liste { width: 100%; border-collapse: collapse; margin-top: .4em; font-size: .95em; }
table.liste th { text-align: left; font-family: var(--zier); font-size: .8em; color: #5a2a1a; border-bottom: 2px solid #6b4a22; padding: .2em .3em; }
table.liste td { border-bottom: 1px dotted rgba(107, 74, 34, .35); padding: .25em .3em; vertical-align: middle; }
/* Kostenschlüssel (A.0.56.3): das Urteil zuerst, abgesetzt */
.ks-urteil { padding: .45em .7em; margin-bottom: .4em; background: rgba(222, 167, 38, .18); border: 1px solid rgba(168, 100, 10, .45); border-radius: .4em; }
.ks-kosten { margin: .7em 0 .2em; }
/* Statistik (A.0.56.3): Heute bis jetzt | Seit Spielbeginn */
.st-tabelle { width: 100%; }
.st-tabelle td:not(:first-child), .st-tabelle thead th:not(:first-child) { text-align: right; white-space: nowrap; }
.st-tabelle .st-gruppe th { text-align: left; padding-top: .6em; font-size: .85em; text-transform: uppercase; letter-spacing: .06em; color: #8a6a3a; }
.st-tabelle .st-summe td { font-weight: 800; border-top: 2px solid #6b4a22; }
.fehlt { color: #9a2a1a; }
.kohle { margin-bottom: .5em; }

/* Tagesbericht */
.bericht { display: grid; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); gap: .6em; align-items: stretch; position: relative; }
.bericht-karte { background: rgba(255, 255, 255, .3); border: 1px solid rgba(107, 74, 34, .35); border-radius: .5em; padding: .5em .7em; }
.bericht-bild { font-size: 2em; }
.bericht-karte p { margin: .1em 0; }
.bericht-daumen { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.bericht-daumen span { font-size: 2.4em; }
.bericht-daumen small { font-size: .78em; color: #6a563c; margin-top: .15em; }
.bericht-karte .plus { color: #2f6d22; }
/* Der Tag in Zahlen (A.0.56.3): kleine Tafeln mit Überschrift statt grauer ·-Zeilen */
.bericht-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: .4em 1.2em; margin-top: .6em; }
.bericht-gruppe h4 { margin: .2em 0 .1em; font-size: .85em; text-transform: uppercase; letter-spacing: .06em; color: #8a6a3a; }
.bericht-gruppe .zeile { font-size: .92em; padding: .08em 0; }

/* Rat, Arbeitshilfe, Chronik */
.rat { display: flex; gap: .8em; align-items: flex-start; }
.rat-bild { font-size: 2.6em; line-height: 1; }
.rat p { font-size: 1.1em; }
/* Beratung (A.0.32.0): das Gesicht von Samuel bzw. Greta neben dem Tipp */
.rat .rat-gruss { font-weight: 800; margin-bottom: .3em; }
/* Tipp des Chefs (A.0.62.0): sein Gesicht je Dringlichkeit (allgemein.js CHEF_GESICHT), der Rat als Sprechblase wie im Raum
   (spiel.css .sprechblase: #fffdf6, Rand #2a3a4a) mit dem Zipfel zu ihm, darunter die Zahlen und die Aufbau-Liste */
.chef-rat { display: grid; grid-template-columns: 7em 1fr; gap: 1.15em; align-items: start; margin: .2em 0 .8em; }
.chef-gesicht { width: 7em; height: 7em; border-radius: .7em; object-fit: cover; border: .14em solid #2a3a4a;
  box-shadow: 0 .15em .45em rgba(0, 0, 0, .3); background: #78b0aa; }
.chef-blase { position: relative; background: #fffdf6; color: #1d2a36; border: .13em solid #2a3a4a; border-radius: .9em;
  padding: .65em .95em .7em; box-shadow: 0 .2em .5em rgba(0, 0, 0, .25); min-height: 4.6em; }
/* der Zipfel: ein gedrehtes Quadrat mit zwei Rändern, halb über dem linken Rand der Blase */
.chef-blase::before { content: ''; position: absolute; left: -.56em; top: 1.7em; width: .95em; height: .95em; background: #fffdf6;
  border-left: .13em solid #2a3a4a; border-bottom: .13em solid #2a3a4a; transform: rotate(45deg); }
.tafel .chef-blase p { margin: 0; }
.chef-sagt { font: 700 1.12em / 1.32 var(--schrift); }
.tafel .chef-blase .chef-warum { margin-top: .5em; font-size: .95em; color: #3b4a58; }
.chef-warum b { color: #0e5b6a; margin-right: .2em; }
.chef-stufe { display: inline-block; font: 800 .7em / 1 var(--schrift); letter-spacing: .09em; text-transform: uppercase;
  padding: .32em .6em; border-radius: .4em; margin-bottom: .45em; color: #fff; }
.chef-stufe.dringend { background: #b03a2e; }
.chef-stufe.wichtig { background: #b9771a; }
.chef-fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); column-gap: 1.4em; }
.chef-aufbau { margin-top: .3em; }
.tafel .chef-aufbau h4 { margin-top: .2em; }
.chef-aufbau p { display: flex; flex-wrap: wrap; align-items: center; gap: .35em .25em; }
.chef-aufbau .schritt { padding: .22em .65em; border-radius: 1em; background: rgba(107, 74, 34, .1); color: #6a5a40; font-size: .92em; white-space: nowrap; }
.chef-aufbau .schritt.fertig { background: #d7ecd2; color: #2f6d22; }
.chef-aufbau .schritt.jetzt { background: #fff2c6; color: #5b3d0c; box-shadow: inset 0 0 0 .13em #dea726; font-weight: 800; }
.chef-aufbau .pfeil { color: #a08a60; }
@container (max-width: 34em) {
  .chef-rat { grid-template-columns: 5em 1fr; gap: .9em; }
  .chef-gesicht { width: 5em; height: 5em; }
}
/* Hinweise und Rückfragen (A.0.66.0, ui/sprecher.js): dieselbe Blase wie beim Chef, unter dem Gesicht der Name — deine
   Assistenz (Clara Hartwig / Noah Keller) oder wer im Spiel sonst spricht (Maklerin, Samuel, Greta …) */
.sprecher-person { margin: 0; display: grid; justify-items: center; gap: .3em; }
.sprecher-person figcaption { font: 700 .74em / 1.15 var(--schrift); color: #5a2a1a; text-align: center; }
.sprecher-person figcaption small { display: block; font-weight: 600; color: #7a6248; }
.tafel .sprecher + .hinweis { margin-top: .2em; }
.tafel .chef-blase .rat-gruss { font-weight: 800; color: #0e5b6a; margin-bottom: .35em; }   /* Gruß der Berater */
/* Die Wahl zu Beginn: zwei Karten, die gewählte mit goldenem Rand */
.assistenz-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; margin: .2em 0 .7em; }
.tafel .assistenz-karte { display: grid; justify-items: center; gap: .25em; padding: .7em .6em .75em; border-radius: .7em; text-align: center;
  background: #fffdf6; border: .13em solid #c9ad7a; color: #2a1d12; cursor: pointer; box-shadow: 0 .15em .4em rgba(0, 0, 0, .18); }
.tafel .assistenz-karte:hover, .tafel .assistenz-karte:focus-visible { border-color: #b8891e; background: #fff; outline: none; box-shadow: 0 0 0 .18em rgba(232, 180, 58, .55); }
.tafel .assistenz-karte.an { border-color: #b8891e; background: #fff7dc; }
.assistenz-karte img { width: 6.5em; height: 6.5em; border-radius: .6em; object-fit: cover; border: .12em solid #2a3a4a; }
.assistenz-karte b { font: 600 1.05em / 1.2 var(--zier); }
.assistenz-karte small { font-size: .8em; color: #6a5638; }
/* Erklärungen für den Anfang an/aus (A.0.67.0, ui/tutorial.js) */
.tafel .assistenz-erklaeren { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .6em; margin: 0 0 .5em; font-size: .92em; color: #5a4630; }
.tafel .assistenz-erklaeren .knopf.klein { margin-left: 0; }
.hilfe-liste { list-style: none; display: grid; gap: .35em; }
.hilfe-eintrag { width: 100%; text-align: left; display: flex; gap: .5em; align-items: center; padding: .45em .7em; }
.chronik { list-style: none; display: grid; gap: .2em; font-size: .95em; }
.chronik time { font-family: var(--zier); font-size: .75em; color: #6a563c; margin-right: .4em; }
/* Protokoll (A.0.56.3): Zeit als eigene Spalte, nur wenn sie wechselt; je Tag eine Überschrift */
.chronik li:not(.chronik-tag) { display: grid; grid-template-columns: 3.2em 1fr; gap: .4em; align-items: baseline; }
.chronik li.gleich { margin-top: -.1em; }
.chronik .chronik-tag { font-weight: 800; color: #5a3a1a; border-bottom: 1px solid rgba(107, 74, 34, .35); margin-top: .3em; }
.chronik-legende { margin: .5em 0 0; font-size: .82em; color: #6a563c; }
.chronik-legende .gut, .chronik .gut { color: #2f6d22; }
.chronik-legende .schlecht { color: #8a2a1a; }
.chronik-legende .geld { color: #6a4a10; }
/* Arbeitshilfe (A.0.56.3): nach Art gruppiert */
.hilfe-gruppe { margin: .5em 0 .2em; font-size: .85em; color: #5a3a1a; border-bottom: 1px solid rgba(107, 74, 34, .35); }
.hilfe-gruppe:first-child { margin-top: 0; }
.hilfe-gruppe small { color: #8a6a3a; font-weight: 500; }
.hilfe-liste .hilfe-eintrag { padding: .3em .6em; }
.chronik .schlecht { color: #8a2a1a; }
.chronik .gut { color: #2a6a2a; }
.chronik .geld { color: #6a4a10; }

/* Formular (Passwort) */
.formular { display: grid; gap: .5em; margin-top: .8em; }
.formular label { display: grid; gap: .2em; font-size: .9em; color: #5a4630; }
.formular input { font: 600 1em var(--schrift); padding: .35em .5em; border: 1px solid #6b4a22; border-radius: .3em; background: #fffaf0; color: #2a1d12; }
.formular-meldung { color: #9a2a1a; min-height: 1.2em; }

/* Gerät und Möbel (A.0.2.0) */
.gebraucht { font-size: .9em; color: #3a4a2a; margin: .15em 0; }
.sorte-marke { display: inline-block; margin-top: .25em; padding: .05em .55em; border-radius: 999px; font-size: .8em; font-weight: 700;
  border: 1px solid #6b4a22; background: #f3ead6; color: #4a3216; white-space: nowrap; }
.sorte-marke.luxus { background: linear-gradient(#fbe7a1, #e2b44a); border-color: #8a6414; color: #4a3206; }
.sorte-marke.gehoben { background: #d7eef2; border-color: #2a7a8c; color: #134e5a; }
.sorte-marke.gebraucht { background: #e9e1d2; border-color: #8b7d66; color: #4d4335; }
.sorte-marke.gebraucht.luxus { background: linear-gradient(#f4ead0, #dcc58a); }
.sorte-marke.gebraucht.gehoben { background: linear-gradient(#eef3f1, #d3e2e3); }
.sorte-marke.sonder { background: #f7d9d2; border-color: #a8322a; color: #7a140f; }
.sorte-marke.design { border-style: dashed; }
.sterne { font-size: .85em; letter-spacing: .05em; }
.sterne.guete-3 { color: #b07d0e; }
.sterne.guete-2 { color: #2a7a8c; }
.reiter { display: flex; gap: .4em; flex-wrap: wrap; margin-bottom: .5em; }
.reiter .knopf.an, .tat-reihe .knopf.an { background: linear-gradient(#f3d27a, #d9a93a); border-color: #8a6414; font-weight: 700; }
table.liste tr.wichtig td { background: rgba(217, 169, 58, .18); }
b.fehlt { color: #9a2a1a; }

/* Stadtkurier und Rangliste (A.0.8.0) */
/* Stadtkurier als Zeitung (A.0.58.0, ui/tafeln/stadt.js): Zeitungspapier statt brauner Tafel, Fraktur-Kopf, Spalten mit Linien */
.tafel.zeitung-tafel { width: min(97%, 64em); border: 0; border-radius: .15em; color: #1b1915; position: relative;
  background: linear-gradient(100deg, rgba(0, 0, 0, .035), transparent 12%, transparent 88%, rgba(0, 0, 0, .05)), #f2ecdc;
  box-shadow: 0 .6em 2.2em rgba(0, 0, 0, .7), inset 0 0 4em rgba(120, 100, 60, .18); }
.zeitung-tafel .tafel-kopf { position: absolute; top: 0; right: 0; z-index: 2; background: none; padding: .3em .5em; }
.zeitung-tafel .tafel-kopf h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.zeitung-tafel .tafel-zu { color: #1b1915; }
.zeitung-tafel .tafel-inhalt { padding: .8em 1.4em .4em; }
.zeitung-tafel .tafel-fuss { background: none; border-top: 1px solid #1b1915; margin: 0 1.4em; padding: .35em 0 .5em; }
.zb-fuss { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; }
.zb-fuss .blaettern { margin: 0; }
.zb-fuss .blaettern .knopf { background: #fffdf6; }
.zeitung-tafel .tafel-inhalt > p.hinweis { background: none; border-left-color: #1b1915; font-family: 'PT Serif', serif; font-style: italic; }
.zb-blatt { font-family: 'PT Serif', Georgia, serif; font-weight: 400; line-height: 1.38; }
.zb-oben { display: flex; justify-content: space-between; gap: 1em; font-size: .72em; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid #1b1915; padding: 0 3.6em .15em 0; }
.zb-titel { font: 400 3.6em / 1.05 'UnifrakturMaguntia', 'PT Serif', serif; text-align: center; margin: .08em 0 .02em; letter-spacing: .01em; color: #12100c; }
.zb-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; flex-wrap: wrap; font-size: .8em;
  border-top: 3px double #1b1915; border-bottom: 1px solid #1b1915; padding: .2em 0; margin-bottom: .7em; }
.zb-wetter { font-style: italic; }
.zb-wetter b { font-style: normal; }
.zb-neu { background: #a3201a; color: #fff; font: 700 .85em/1 'PT Serif', serif; letter-spacing: .1em; text-transform: uppercase; padding: .25em .5em; transform: rotate(-3deg); }
.zb-artikel h2, .zb-artikel h3 { font-family: 'Playfair Display', 'PT Serif', serif; color: #12100c; margin: 0 0 .2em; }
.zb-artikel p { margin: 0; text-align: justify; hyphens: auto; }
.zb-aufmacher { border-bottom: 1px solid #1b1915; padding-bottom: .6em; margin-bottom: .6em; }
.zb-aufmacher h2 { font-weight: 900; font-size: 2em; line-height: 1.08; }
.zb-aufmacher p { font-size: 1.08em; max-width: 44em; text-align: left; }
.zb-spalten { columns: 3 13em; column-gap: 1.6em; column-rule: 1px solid rgba(27, 25, 21, .45); }
.zb-spalten > * { break-inside: avoid; margin-bottom: .9em; }
.zb-spalten .zb-artikel h3 { font-weight: 700; font-size: 1.15em; line-height: 1.15; }
.zb-spalten .zb-artikel + .zb-artikel { border-top: 1px solid rgba(27, 25, 21, .35); padding-top: .6em; }
.zb-dach { display: block; font: 700 .72em/1.2 'PT Serif', serif; letter-spacing: .12em; text-transform: uppercase; color: #a3201a; margin-bottom: .15em; }
.zb-artikel.du h2, .zb-artikel.du h3 { color: #7d1712; }
.zb-wirkung { display: inline-block; margin-top: .35em; font: 700 .78em/1 'PT Serif', serif; padding: .25em .5em; border: 1.5px solid; }
.zb-wirkung.plus { color: #2e6b25; }
.zb-wirkung.minus { color: #a3201a; }
.zb-kasten { border: 1px solid #1b1915; padding: .45em .65em .5em; background: rgba(255, 255, 255, .25); }
.zb-kasten h4 { font: 900 .95em/1.1 'Playfair Display', serif; text-transform: uppercase; letter-spacing: .1em; color: #12100c; margin: 0 0 .35em;
  border-bottom: 2px solid #1b1915; padding-bottom: .15em; }
/* A.0.85.0: das Vermischte steht zwischen den Artikeln — Dachzeile in Schwarz statt Rot (Rot heißt: über deine Klinik) */
.zb-artikel.zb-bunt .zb-dach { color: #4a4134; }
.zb-spalten .zb-artikel.zb-bunt h3 { font-size: 1.02em; }
.zb-artikel.zb-bunt p { font-size: .94em; }
.zb-anzeigen p { margin: 0; font-size: .85em; padding: .3em 0; }
.zb-anzeigen p + p { border-top: 1px dotted rgba(27, 25, 21, .5); }
table.rangliste tr.du td { background: rgba(217, 169, 58, .22); font-weight: 600; }
table.rangliste tr.zu td { color: #8a7a60; }
table.rangliste .gut { color: #2a6a2a; }
table.rangliste .schlecht { color: #8a2a1a; }


/* Phase 4: Porträts auf den Bögen und im Tagesbericht */
.bogen-bild.foto { font-size: 1em; width: 5.4em; height: 5.4em; padding: 0; overflow: hidden; flex: none; }
.bogen-bild.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Dienstplan (A.0.18.0): eine Zeile je Stelle */
.plan-zeile { display: flex; align-items: center; gap: .8em; padding: .5em 0; border-bottom: 1px solid var(--rand); }
.plan-zeile .bogen-bild.foto { width: 3.4em; height: 3.4em; }
.plan-zeile > .bogen-bild:not(.foto) { flex: none; width: 1.3em; height: 1.3em; }
.plan-wer { flex: 1; display: flex; flex-direction: column; gap: .1em; min-width: 0; }
/* Farben fürs Pergament wie .hinweis und .fehlt (A.0.42.2 — vorher die des dunklen Themas, Kontrast 1,3–1,9) */
.plan-wer small, .plan-wer span { color: #5a4630; }
.plan-wer span { font-size: .9em; }
.plan-wer b.fehlt { color: #9a2a1a; }
.bericht-gesicht { width: 4.6em; height: 4.6em; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto; border: 3px solid #6b4a22; }

/* Anruf des Tages (A.0.28.0): wer anruft links in der Sprechblase, du rechts, was sonst passiert kursiv */
.anruf { display: flex; flex-direction: column; gap: .5em; padding: .2em 0 .4em; }
.anruf p { max-width: 82%; margin: 0; padding: .45em .8em; border-radius: .9em; line-height: 1.35; }
.anruf .anruf-er { align-self: flex-start; background: #fffdf6; border: 1px solid rgba(107, 74, 34, .35); border-bottom-left-radius: .2em; }
.anruf .anruf-du { align-self: flex-end; background: #dcefe9; border: 1px solid rgba(20, 110, 100, .35); border-bottom-right-radius: .2em; }
.anruf .anruf-du::before { content: 'Du: '; font-weight: 800; color: #0e5b6a; }
.anruf .anruf-info { align-self: center; font-style: italic; color: #6a563c; background: none; padding: .1em 0; }

/* Am Computer (A.0.25.0): Tafeln als Fenster auf dem Bildschirm — ohne Schleier, innerhalb der Anzeige über der
   Taskleiste, helle Titelleiste, das ✕ wird beim Zeigen rot */
.tafel-schleier.am-schirm { inset: 10.3% 9.6% 20.4%; padding: 0; background: none; }
.tafel.fenster { border: 1px solid rgba(20, 32, 48, .5); border-radius: .5em; background: #fbf8f1; box-shadow: 0 1em 2.6em rgba(0, 12, 30, .55); }
.tafel.fenster .tafel-kopf { background: linear-gradient(#f1f4f8, #dfe5ec); color: #1d2733; padding: .3em .35em .3em .9em; border-bottom: 1px solid #c4ccd6; }
.tafel.fenster .tafel-kopf h2 { font-family: var(--schrift); font-weight: 800; font-size: .95em; letter-spacing: 0; }
.tafel.fenster .tafel-zu { color: #1d2733; width: 2.1em; height: 1.55em; border: 0; border-radius: .3em; background: none; display: grid; place-items: center; }
.tafel.fenster .tafel-zu:hover, .tafel.fenster .tafel-zu:focus-visible { background: #d93a3a; color: #fff; outline: none; }

/* Geräte, die sich selbst malen (ui/handy.js, Tafel der Art „handy“): daneben tippen (.geraet-weg) legt sie weg */
.geraet-schleier { display: block; padding: 0; background: rgba(8, 5, 2, .38); }
.geraet-schleier .geraet-weg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: default; }
.geraet-schleier.auf { animation: geraetSchleier .2s ease-out; }
.geraet-schleier.auf .handy-gross { animation: handyAuf .26s cubic-bezier(.2, .9, .3, 1.08); }
@keyframes geraetSchleier { from { background: rgba(8, 5, 2, 0); } }
@keyframes handyAuf { from { transform: scale(.2); opacity: .4; } }
/* Der Pager groß (A.0.68.0 — deine Ansage 04.10.: „Wieso sieht der Pager plötzlich aus wie ein hässliches Tablett? Warum
   müssen dort auch so viele Infos gezeigt werden? Nur das wichtigste! Es ist ein Pager!“; A.0.59.0–A.0.67.0 fast so hoch
   wie das Bild, mit sieben Seiten): derselbe Pager wie oben rechts (spiel.css .handy), nur größer — quer im selben
   Seitenverhältnis, dunkles Kunststoffgehäuse, oben die Leuchte (gelb: Meldungen, rot: Warnungen), das grüne LCD mit
   höchstens fünf Zeilen (VT323, am Handy nicht unter 18 px), darunter links die Marke, in der Mitte ◀ OK ▶, rechts der
   Lautsprecher. Alle Maße in cqi des Geräts: es wächst als Ganzes. Warnungen stehen invertiert wie auf einem echten LCD. */
.handy-gross.pager-gross { position: absolute; right: 1.2%; top: 1.6%; width: clamp(min(420px, 94%), 38%, 860px); aspect-ratio: 2 / 1.02;
  container-type: inline-size; transform-origin: 97% 2%; font-family: var(--schrift); }
.pager-gehaeuse { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 4.4cqi 5.4cqi 0;
  border-radius: 13% / 23%; background: linear-gradient(170deg, #4a4f57, #26292e 45%, #131518);
  box-shadow: inset 0 0 0 .3cqi rgba(255, 255, 255, .16), inset 0 .6cqi 1.2cqi rgba(255, 255, 255, .07), 0 0 0 .2cqi #050607, 0 1.6cqi 4cqi rgba(0, 0, 0, .6); }
.pager-led { position: absolute; top: 1.55cqi; right: 15cqi; width: max(6px, 1.3cqi); aspect-ratio: 1; border-radius: 50%; background: #2f8a45;
  box-shadow: 0 0 .8cqi rgba(99, 245, 132, .6), inset 0 -.2cqi .3cqi rgba(0, 0, 0, .35); }
.pager-led.ruf { background: #f2b33a; box-shadow: 0 0 1.2cqi rgba(255, 196, 80, .85); animation: pagerRuf 1.6s ease-in-out infinite; }
.pager-led.warnt { background: #ef4a35; box-shadow: 0 0 1.2cqi rgba(255, 90, 60, .9); animation: pagerRuf 1s ease-in-out infinite; }
@keyframes pagerRuf { 50% { opacity: .35; box-shadow: none; } }
.pager-lcd { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 2.2cqi; color: #16200f;
  font: 400 max(18px, 4.6cqi) / 1.08 'VT323', ui-monospace, monospace;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .025) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 40% 30%, #bccc9f, #a2b486 75%);
  box-shadow: inset 0 .5cqi 1.4cqi rgba(0, 0, 0, .55), 0 0 0 .5cqi #0e1012, 0 0 0 .75cqi rgba(255, 255, 255, .08); }
.pager-kopf { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin: 0; padding: .1em .55em .05em;
  background: #16200f; color: #b6c79a; text-transform: uppercase; letter-spacing: .04em; }
.pager-kopf b { font-weight: 400; }
.pager-inhalt { flex: 1 1 auto; min-height: 0; overflow: auto; padding: .25em .55em .3em; scrollbar-width: none; }
.pager-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin: 0; }
.pager-zeile b { font-weight: 400; white-space: nowrap; }
.pager-zeile.warnung { background: #16200f; color: #b6c79a; margin-inline: -.2em; padding-inline: .2em; }
.pager-weiter { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pager-weiter:hover, .pager-weiter:focus-visible { background: #16200f; color: #b6c79a; outline: none; }
.pager-wo { margin: 0 0 .1em; text-transform: uppercase; letter-spacing: .04em; }
.pager-lcd.warnt .pager-wo { display: inline-block; background: #16200f; color: #b6c79a; padding: 0 .25em; margin-left: -.25em; }
.pager-text { margin: 0; }
.pager-mehr { margin: .15em 0 0; opacity: .75; }
.pager-leiste { flex: none; height: 11cqi; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqi; }
.pager-marke { justify-self: start; color: rgba(235, 238, 242, .32); font: 700 max(8px, 2cqi) / 1 var(--zier); letter-spacing: .32em; text-transform: uppercase;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .06); }
.pager-tasten { display: flex; align-items: center; gap: 2.4cqi; }
.pager-taste { width: max(34px, 7cqi); height: max(30px, 6cqi); padding: 0; border: 0; border-radius: 99px; cursor: pointer; color: #e6e9ed;
  font: 700 max(13px, 2.6cqi) / 1 var(--zier); letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(#555b64, #2a2d32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 .45cqi 0 #08090a, 0 .7cqi 1cqi rgba(0, 0, 0, .5);
  transition: transform .06s, box-shadow .06s; }
.pager-taste.breit { width: max(64px, 14cqi); }
.pager-taste:disabled { cursor: default; color: rgba(230, 233, 237, .3); }
.pager-taste:not(:disabled):hover, .pager-taste:focus-visible { outline: none; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 .45cqi 0 #08090a, 0 0 0 2px var(--gold); }
.pager-taste:not(:disabled):active { transform: translateY(.35cqi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 .1cqi 0 #08090a; }
.pager-gitter { justify-self: end; display: grid; gap: .7cqi; width: 9cqi; }
.pager-gitter i { display: block; height: max(2px, .55cqi); border-radius: 99px; background: #0a0b0d; box-shadow: 0 1px 0 rgba(255, 255, 255, .1); }
@media (prefers-reduced-motion: reduce) { .pager-led.ruf, .pager-led.warnt { animation: none; } }

/* ── Patchlog (A.0.64.0): je Tag aufklappbar, je Update Nummer und Uhrzeit, darunter Neu / Geändert / Behoben. Derselbe
   Bau in der Tafel im Spiel (Farben hier) und auf der Startseite unter dem Typenschild (Farben in titel.css). ───────── */
.patchlog { --p-linie: rgba(107, 74, 34, .25); --p-tag: #5a2a1a; --p-leise: #7a6248; --p-nummer: #6b4a22;
  --p-neu: #13806f; --p-neu-text: #fff; --p-geaendert: #e8b43a; --p-geaendert-text: #3b2a05; --p-behoben: #e4dac2; --p-behoben-text: #4a3a20; }
.patch-tag { border-top: 1px solid var(--p-linie); }
.patch-tag:last-child { border-bottom: 1px solid var(--p-linie); }
.patch-tag > summary { display: flex; align-items: baseline; gap: .5em; padding: .5em .1em; cursor: pointer; list-style: none; color: var(--p-tag); font-weight: 700; }
.patch-tag > summary::-webkit-details-marker { display: none; }
.patch-tag > summary::before { content: '▸'; flex: none; width: 1em; color: var(--p-leise); transition: transform .15s; }
.patch-tag[open] > summary::before { transform: rotate(90deg); }
.patch-tag > summary small { margin-left: auto; font-size: .85em; font-weight: 600; color: var(--p-leise); }
.patch { padding: .1em 0 .75em 1.5em; }
.patch h4 { display: flex; align-items: baseline; gap: .7em; margin: .25em 0 .35em; font-size: .9em; }
.patch h4 b { font-family: var(--zier); letter-spacing: .1em; color: var(--p-nummer); }
.patch h4 time { font-family: var(--schrift); font-size: .9em; font-weight: 600; color: var(--p-leise); }
.patch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35em; }
.patch li { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: .6em; align-items: baseline; line-height: 1.4; }
.patch-art { font-size: .75em; font-weight: 800; text-align: center; border-radius: 999px; padding: .1em .5em; }
.patch-neu .patch-art { background: var(--p-neu); color: var(--p-neu-text); }
.patch-geaendert .patch-art { background: var(--p-geaendert); color: var(--p-geaendert-text); }
.patch-behoben .patch-art { background: var(--p-behoben); color: var(--p-behoben-text); }
@media (prefers-reduced-motion: reduce) { .patch-tag > summary::before { transition: none; } }

/* Deine Klinik (A.0.78.0, tafeln/klinik.js): Name, Würfel, acht Zeichen, darunter das Schild doppelt so groß wie im Chefbüro */
.klinik-wahl { display: grid; grid-template-columns: 1fr auto; gap: .45em .5em; align-items: end; margin-top: .6em; }
.klinik-name { display: grid; gap: .2em; font-size: .9em; color: #5a4630; }
.klinik-name input { font: 700 1.1em var(--schrift); padding: .35em .55em; border: 1px solid #6b4a22; border-radius: .3em; background: #fffaf0; color: #2a1d12; min-width: 0; }
.klinik-wuerfel { margin: 0 0 .1em; white-space: nowrap; }
.klinik-fehler { grid-column: 1 / -1; margin: 0; }
.klinik-fehler:empty { display: none; }
.zeichen-wahl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: .35em; }
.zeichen-knopf { display: grid; justify-items: center; gap: .1em; padding: .3em .2em; }
.zeichen-knopf svg { width: 2.6em; height: 2.6em; }
.zeichen-knopf small { font-size: .78em; color: #5a4630; }
.zeichen-knopf.an { background: #f3d77e; border-color: #3a2a14; box-shadow: inset 0 0 0 2px #b5841c; }
.klinik-vorschau { grid-column: 1 / -1; justify-self: center; position: relative; width: 31.6cqw; height: 8.2cqw; margin: .3em 0 .1em; }
.klinik-vorschau .schild-text { left: 0; top: 0; width: 15.8cqw; height: 4.1cqw; transform: scale(2); transform-origin: 0 0; }
/* Handy quer (wenig Höhe): die acht Zeichen in einer Reihe, damit das Schild darunter ohne Rollen zu sehen ist */
@media (max-height: 520px) {
  .zeichen-wahl { grid-template-columns: repeat(8, 1fr); gap: .25em; }
  .zeichen-knopf { padding: .2em .1em; }
  .zeichen-knopf svg { width: 2.1em; height: 2.1em; }
  .zeichen-knopf small { font-size: .62em; }
}