/* Aussehen „DOS“ – 80×25 Zeichen, VGA-Farben. Rahmen per CSS, damit das Raster in jeder Schrift stimmt. */
@font-face { font-family: "VT323"; src: url("/vendor/fonts/vt323-latin-400-normal.woff2") format("woff2"); font-display: block; }
.look-dos { background: #000; }
.d-wrap { height: 100%; display: grid; place-items: center; background: #000; overflow: hidden; }
.d-scr { position: relative; width: 80ch; height: 25em; line-height: 1em; font-family: "VT323", "DejaVu Sans Mono", "Consolas", monospace; background: #0000aa; color: #aaaaaa; overflow: hidden; cursor: default; user-select: none;
  box-shadow: 0 0 0 .3em #111, 0 0 1.2em rgba(80, 120, 255, .25); }
.d-scr::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(rgba(0, 0, 0, .09) 0 1px, transparent 1px 3px); }
.d-scr > * { position: absolute; }
.d-row { height: 1em; white-space: pre; overflow: hidden; }
.d-bar { background: #00aaaa; color: #000; display: flex; justify-content: space-between; white-space: pre; }
.d-stat { display: flex; gap: 3ch; white-space: pre; color: #aaaaaa; }
.d-stat b { color: #ffff55; font-weight: 400; }
.d-brand { color: #fff !important; }
.d-line { display: flex; white-space: pre; align-items: center; }
.d-sum { color: #ffff55; font-weight: 400; background: #000077; }
.d-errl { background: #aa0000; color: #fff; }
.d-warn { background: #aa5500; color: #fff; }
.d-okl { background: #00aa00; color: #fff; }
.d-dim { color: #8f8fe0; }
.d-fbar { display: flex; white-space: pre; background: #000; }
.d-fk b { color: #fff; font-weight: 400; }
.d-fk i { font-style: normal; background: #00aaaa; color: #000; }

/* Rahmen: Doppellinie mitten durch die äußeren Zeichenzellen */
.d-box { position: absolute; background: #0000aa; color: #aaaaaa; }
.d-box::before { content: ""; position: absolute; inset: .5em .5ch; border: .2em double #aaaaaa; pointer-events: none; }
.d-box.sh { box-shadow: 2ch 1em 0 rgba(0, 0, 0, .85); }
.d-btitle { position: absolute; top: 0; left: 2ch; height: 1em; white-space: pre; background: inherit; color: #ffffff; z-index: 1; }
.d-in { position: absolute; left: 1ch; right: 1ch; top: 1em; bottom: 1em; overflow: hidden; }
.d-in > * { position: relative; }
.d-in .d-row[style] { position: absolute; }
.d-head { color: #55ffff; }
.d-sel { background: #00aaaa; color: #000; }
.d-mark { color: #ffffff; }
.d-sub { color: #aaaaaa; }
.d-ohne { color: #ff5555; }
.d-teil { color: #55ffff; }
.d-new { color: #55ff55; font-weight: 400; }
.d-err { color: #ff5555; font-weight: 400; }
.d-more { position: absolute; color: #ffff55; }
.d-ring::before { border-color: #ff5555; animation: d-blink 1s step-end infinite; }
.d-ring .d-btitle { color: #ff5555; }
.d-blink { animation: d-blink 1s step-end infinite; color: #ffff55; }
@keyframes d-blink { 50% { opacity: .25; } }

/* Eingabefelder */
.d-fld { font: inherit; line-height: 1em; height: 1em; padding: 0; margin: 0; border: 0; border-radius: 0; vertical-align: top; background: #00006e; color: #ffff55; caret-color: #ffffff; outline: 0; }
.d-fld.on, .d-fld:focus { background: #00aaaa; color: #000; caret-color: #000; }
.d-ph { color: #ffffff; }

/* Fenster */
.d-dlg { background: #aaaaaa; color: #000; z-index: 20; }
.d-dlg::before { border-color: #ffffff; }
.d-dlg .d-btitle { color: #000; background: #aaaaaa; }
.d-dlg .d-fld { background: #000077; color: #ffff55; }
.d-dlg .d-fld.on { background: #000077; color: #ffffff; caret-color: #fff; }
.d-bar2 { background: #0000aa; color: #ffff55; }
.d-dim2 { color: #444; }
.d-red { background: #aa0000; color: #fff; z-index: 25; }
.d-red::before { border-color: #ffff55; }
.d-red .d-btitle { color: #ffff55; }
.d-hint { z-index: 30; background: transparent; }
.d-hint::before { display: none; }
.d-hint .d-in { inset: 0; }
.d-hintbg { position: absolute !important; inset: 0; color: #fff; padding: 0 1ch; }
.d-big { color: #fff; text-shadow: .05ch 0 0 #fff; animation: d-blink .6s step-end 4; }
.d-cols { display: flex; gap: 0; }
.d-col { overflow: hidden; }
.d-chead { color: #000; background: #8a8a8a; }
.d-chead.on { background: #000; color: #fff; }
.d-ohne2 { color: #aa0000; text-decoration: line-through; }

/* Partypizza: Blech als Raster, runde Pizza als Kreis */
.d-pie { position: absolute; display: grid; border: .12em solid #000; background: #fff; color: #000; }
.d-pie.round { border-radius: 50%; overflow: hidden; width: 22ch !important; left: 5ch !important; }
.d-pie.n2 { grid-template-columns: 1fr 1fr; } .d-pie.n3 { grid-template-columns: 1fr 1fr 1fr; } .d-pie.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.d-pie.round.n3 { grid-template-columns: 1fr 1fr 1fr; }
.d-cell { border: .06em solid #000; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1em; text-align: center; }
.d-cell b { font-weight: 400; font-size: 1.6em; line-height: 1; }
.d-cell small { font-size: .85em; color: #333; }
.d-cell.on { background: #0000aa; color: #ffff55; }
.d-cell.on small { color: #ffff55; }

/* Bon im Textmodus */
.d-bontxt { position: absolute !important; inset: 0 0 1.5em 0; overflow: auto; background: #fff; }
.d-bontxt pre { margin: 0; padding: .3em 1ch; font-family: "DejaVu Sans Mono", "Consolas", "Courier New", monospace; font-size: .55em; line-height: 1.15; color: #000; border-bottom: .1em dashed #888; }

/* Balken im Textmodus (Vorhersage) */
.d-hb { display: inline-block; height: .78em; vertical-align: -.05em; }
.d-hb i { display: block; height: 100%; background: currentColor; opacity: .85; }
.d-vb { display: flex; align-items: flex-end; }
.d-vb i { width: 3ch; margin: 0 1ch; background: #aaa; flex: none; }
.d-onl { position: absolute; background: #aa0000; color: #ffff55; z-index: 5; }
.d-online .d-onlh { color: #ffff55; }
.d-warnl { color: #ffff55; }