/* generiert von tools/build-static.js aus css/win95.css */
:root { --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --mono: ui-monospace, Consolas, "Courier New", monospace; --title-a: #000080; --title-b: #1084d0; --chrome: #c0c0c0; }
.progress { height: 20px; background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #000; padding: 2px; display: flex; gap: 2px; overflow: hidden; }
.progress i { display: block; width: 8px; flex: 0 0 auto; background: var(--title-a); }
/* ---------- Erklär-Animationen (Retro) ---------- */
.szene { margin: 0 0 12px; }
.szene-stage { background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #000; padding: 6px; }
.szene svg { display: block; width: 100%; height: auto; max-height: 36vh; font-family: var(--ui-font); }
.szene-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0 0; }
.szene-bar .progress { flex: 1 1 120px; height: 16px; }
.szene-bar .muted { white-space: nowrap; font-size: 12px; }
.szene-bar .live { min-width: 52px; font-size: 11px; font-weight: 700; color: #808080; white-space: nowrap; }
.szene-bar .live.on { color: #008000; }
.szene-bar .live.on::before { content: '●'; margin-right: 4px; animation: szLive 1s steps(2) infinite; }
@keyframes szLive { 50% { opacity: 0; } }
.szene.playing .szene-stage { outline: 2px solid #000080; outline-offset: -2px; }
.szene-status { min-height: 2.6em; background: #ffffe1; border: 1px solid #808080; padding: 5px 8px; margin: 6px 0 0 !important; font-size: 12px; }
.szene-status.neu { animation: szNeu .35s steps(2) 1; }
@keyframes szNeu { from { background: #ffff80; } to { background: #ffffe1; } }
.szene-steps { margin: 6px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid #808080; font-size: 11.5px; counter-reset: none; }
.szene-steps li { display: flex; gap: 8px; align-items: flex-start; padding: 3px 8px; border-bottom: 1px solid #dfdfdf; line-height: 1.35; }
.szene-steps li:last-child { border-bottom: 0; }
.szene-steps .num { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: #808080; color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; margin-top: 0; }
.szene-steps .body { flex: 1 1 auto; min-width: 0; }
.szene.has-log .szene-steps li { cursor: pointer; color: #808080; }
.szene.has-log .szene-steps li b { font-weight: 700; }
.szene.has-log .szene-steps li.done { color: #000; }
.szene.has-log .szene-steps li.done .num { background: #008000; }
.szene.has-log .szene-steps li.cur { color: #000; background: #ffffe1; }
.szene.has-log .szene-steps li.cur .num { background: #000080; outline: 2px solid #ff8000; }
.szene.has-log .szene-steps li:hover { background: #f0f0f0; }
.szene.has-log .szene-steps li.cur:hover { background: #ffff80; }
.szene.has-log .szene-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0 !important; padding: 0; border: 0; }
.szene-ergebnis { margin: 6px 0 0; padding: 5px 8px; background: #e8ffe8; border: 1px solid #008000; color: #004000; font-size: 12px; font-weight: 700; }
.szene.has-log .szene-ergebnis[hidden] { display: block; visibility: hidden; }
/* Kostendiagramm Flatrate vs. Hybrid (Reiter Modell) */
.chart { margin: 10px 0 12px; outline: 0; }
.chart-stage { position: relative; background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #000; padding: 6px; }
.chart:focus-visible .chart-stage { outline: 2px solid #000080; outline-offset: -2px; }
.chart svg { display: block; width: 100%; height: auto; max-height: 38vh; font-family: var(--ui-font); }
.chart .ax { stroke: #c0c0c0; stroke-width: 1; }
.chart .ref { stroke: #c0c0c0; stroke-width: 1; stroke-dasharray: 2 4; }
.chart .ser { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .flat { stroke: #c0392b; } .chart .hyb { stroke: #2a4db0; }
.chart .band { fill: #c0392b; opacity: .10; }
.chart .area { fill: #2a4db0; opacity: .08; }
.chart .pt { fill: #2a4db0; stroke: #fff; stroke-width: 2; }
.chart .lbl text { font-size: 11.5px; font-weight: 700; fill: #000; }
.chart .key { stroke-width: 2.5; stroke-linecap: round; }
.chart .sub { font-size: 10.5px; fill: #404040; }
.chart .axt { font-size: 11px; fill: #404040; }
.chart svg [hidden] { display: none; }
.chart .cross { stroke: #000; stroke-width: 1; stroke-dasharray: 3 3; }
.chart .dot { stroke: #fff; stroke-width: 2; } .chart .dot.flat { fill: #c0392b; } .chart .dot.hyb { fill: #2a4db0; }
.chart-tip { position: absolute; top: 14px; left: 0; background: #ffffe1; border: 1px solid #808080; padding: 5px 8px; font-size: 11.5px; line-height: 1.4; max-width: 250px; pointer-events: none; box-shadow: 2px 2px 0 rgba(0,0,0,.3); z-index: 2; }
.chart-tip[hidden] { display: none; }
.chart-tip b { display: block; margin: 0 0 3px; }
.chart-tip div { display: flex; gap: 6px; align-items: baseline; }
.chart-tip div span { flex: 1 1 auto; }
.lk { display: inline-block; width: 14px; height: 0; border-top: 2.5px solid; vertical-align: middle; margin-right: 6px; flex: 0 0 auto; }
.lk.flat { border-color: #c0392b; } .lk.hyb { border-color: #2a4db0; }
.chart-legend { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 11.5px; margin: 6px 0 0; }
.chart figcaption { font-size: 11.5px; color: #404040; margin: 6px 0 0; }
.chart figcaption .linkbtn { font-size: inherit; }
/* Sitzungsdiebstahl-Szene (sessionklau) */
.szene .sk-node { fill: #fff; stroke: #000; stroke-width: 1; }
.szene .sk-atk .sk-node { fill: #fff6d6; stroke: #a05000; stroke-width: 1.6; }
.szene .sk-ms .sk-node { fill: #eef4ff; stroke: #000080; stroke-width: 1.4; }
.szene .sk-mbx .sk-node { fill: #eef4ff; stroke: #000080; stroke-width: 1.4; }
.szene .sk-fraud .sk-node { fill: #ffe0e0; stroke: #ff0000; stroke-width: 1.8; }
.szene .sk-dump .sk-node { fill: #ffe0e0; stroke: #ff0000; stroke-width: 1.8; }
.szene .sk-tag-red { fill: #ffe0e0; stroke: #ff0000; } .szene .sk-tagt-red { fill: #a00000; }
.szene .sk-ttl { fill: #000; font-size: 12px; font-weight: 700; }
.szene .sk-sub { fill: #404040; font-size: 9.5px; }
.szene .sk-flow { stroke: #a05000; stroke-width: 2.4; fill: none; marker-end: url(#sk-arrow); }
.szene .sk-steal { stroke: #ff0000; stroke-width: 2.4; fill: none; stroke-dasharray: 6 4; marker-end: url(#sk-arrowr); }
.szene .sk-lbl { fill: #a05000; font-size: 10px; font-weight: 700; }
.szene .sk-tokchip { fill: #ffe0e0; stroke: #ff0000; stroke-width: 1.4; }
.szene .sk-tokt { fill: #c00000; font-size: 10px; font-weight: 700; }
.szene .sk-tag { fill: #fff6d6; stroke: #a05000; stroke-width: 1; }
.szene .sk-tagt { fill: #a05000; font-size: 9.5px; font-weight: 700; }
.triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 8px; }
.triple > div { background: #fff; border: 1px solid #808080; padding: 8px 10px; font-size: 12px; line-height: 1.4; }
.triple b { display: block; margin: 0 0 3px; }
@media (max-width: 767px) { .triple { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .chart-stage { overflow-x: auto; } .chart svg { min-width: 540px; max-height: none; } .chart-tip { max-width: 210px; } }
.szene .szn { opacity: 0; transition: opacity .3s; pointer-events: none; }
.szene .szn.on { opacity: 1; }
.szene .szn circle { fill: #000080; stroke: #fff; stroke-width: 1.5; }
.szene .szn text { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.szene .szn.cur circle { fill: #ff8000; stroke: #000; animation: sznPulse 1s steps(2) infinite; }
@keyframes sznPulse { 50% { stroke: #ff8000; } }
@media (prefers-reduced-motion: reduce) { .szene .szn.cur circle { animation: none; } }
.szpick { display: grid; grid-template-columns: 220px 1fr; gap: 10px; align-items: start; }
.szpick select { width: 100%; font: inherit; background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #000; padding: 2px; }
.szpick option { padding: 2px 4px; }
@media (max-width: 767px) { .szpick { grid-template-columns: 1fr; } .szpick select { height: auto; } }
/* SVG-Klassen der Szenen in Windows-95-Farben */
.szene .box { fill: #fff; stroke: #000; stroke-width: 1; }
.szene .boxsoft { fill: #dfdfdf; stroke: #808080; stroke-width: 1; }
.szene .bar { fill: #dfdfdf; stroke: none; }
.szene .port { fill: #000080; stroke: #000; stroke-width: 1; }
.szene .dot1 { fill: #ff0000; } .szene .dot2 { fill: #ffff00; } .szene .dot3 { fill: #008000; }
.szene .lbl { fill: #000; font-weight: 700; }
.szene .sub { fill: #404040; font-size: 9.5px; }
.szene .line { stroke: #000; stroke-width: 1.5; }
.szene .dim { opacity: .5; } .szene .dimline { opacity: .3; }
.szene .docline { stroke: #808080; stroke-width: 2; opacity: .8; }
.szene .chiptext { fill: #000; font-size: 9px; font-weight: 700; }
.szene .chiplight { fill: #000; font-size: 9.5px; }
.szene .logtext { fill: #000; font-size: 10px; }
.szene .btntext { fill: #000; font-size: 10.5px; font-weight: 700; }
.szene .oktext { fill: #008000; font-size: 9.5px; font-weight: 700; }
.szene .warntext { fill: #a05000; font-size: 9.5px; font-weight: 700; }
.szene .badtext { fill: #ff0000; font-weight: 700; }
.szene .stoptext { fill: #ff0000; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.szene .shield { fill: #ffffe1; stroke: #000080; stroke-width: 2; }
.szene .shield-hot { stroke: #000080; fill: #c0c0ff; }
.szene .okmark { fill: none; stroke: #008000; stroke-width: 3; stroke-linecap: square; }
.szene .xmark { stroke: #ff0000; stroke-width: 2.6; fill: none; }
.szene .badline { stroke: #ff0000; stroke-width: 1.8; stroke-dasharray: 6 5; }
.szene .pbarbg { fill: #fff; stroke: #808080; } .szene .pbar { fill: #000080; }
.szene .pbar.is-on { animation: szFill 1.3s steps(10) forwards; }
@keyframes szFill { to { width: 200px; } }
.szene .go { opacity: 0; } .szene .go.is-on { opacity: 1; }
.szene .puls { fill: #000080; opacity: 0; } .szene .pulsok { fill: #008000; } .szene .pulsbad { fill: #ff0000; }
.szene .puls.is-on { opacity: 1; animation: szMove 1.7s steps(12) infinite; }
@keyframes szMove { from { transform: translate(0, 0); } to { transform: translate(var(--dx, 100px), var(--dy, 0px)); } }
.szene .beamv { fill: #000080; opacity: .85; animation: szSweepY 1.4s steps(8) infinite alternate; }
@keyframes szSweepY { from { transform: translateY(0); } to { transform: translateY(var(--dy, 80px)); } }
.szene .beamh { fill: #000080; opacity: .85; animation: szSweepX 2.1s steps(12) infinite alternate; }
@keyframes szSweepX { from { transform: translateX(0); } to { transform: translateX(var(--dx, 500px)); } }
@media (prefers-reduced-motion: reduce) { .szene .puls.is-on, .szene .beamv, .szene .beamh, .szene .pbar.is-on { animation: none; } }

/* ---------- Telefonanlage: Simulation ---------- */
.tel { margin: 0 0 10px; }
.tel-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 6px; }
.tel-bar .btn[aria-pressed="true"] { box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #fff; background: #dfdfdf; }
.tel-bar .btn.armed { background: repeating-linear-gradient(90deg, #dfdfdf 0 4px, #c0c0c0 4px 8px); }
.tel-stage { background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #000; padding: 6px; overflow: auto; }
.tel-stage svg { display: block; width: 100%; height: min(46vh, 520px); font-family: var(--ui-font); }
@media (max-width: 767px) { .tel-stage svg { height: auto; } }
.tel-stage .tel-m { display: none; }
@media (max-width: 767px) { .tel-stage .tel-d { display: none; } .tel-stage .tel-m { display: block; } }
.tel-log { background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #000; height: 84px; overflow: auto; padding: 4px 6px; font-family: var(--mono); font-size: 12px; margin: 6px 0 0; }
.tel-log .tl { margin: 0 0 2px; display: flex; gap: 8px; }
.tel-log .tl-time { color: #000080; flex: 0 0 auto; }
.tel-log .tl-ok { color: #008000; font-weight: 700; margin-left: auto; white-space: nowrap; }
.tel-log .tl-warn { color: #a05000; font-weight: 700; margin-left: auto; white-space: nowrap; }
.tel-result { min-height: 2.2em; background: #ffffe1; border: 1px solid #808080; padding: 5px 8px; margin: 6px 0 0 !important; font-size: 12px; }
.tel-result.ok { font-weight: 700; }
/* SVG-Klassen der Telefonanlage */
.tel-stage .infra-box { fill: #dfdfdf; stroke: #808080; }
.tel-stage .infra-box-label { fill: #404040; font-size: 11px; font-weight: 700; }
.tel-stage .tel-panel { fill: #f4f4f4; stroke: #808080; stroke-width: 1; }
.tel-stage .nn-box { fill: #fff; stroke: #000; stroke-width: 1; }
.tel-stage .tel-pbx-box { fill: #ffffe1; }
.tel-stage .nn-label { fill: #000; font-size: 12px; font-weight: 700; }
.tel-stage .nn-sub { fill: #404040; font-size: 10px; }
.tel-stage .nn-icon { stroke: #000080; fill: none; stroke-width: 1.75; stroke-linecap: square; }
.tel-stage .d1x-line { stroke: #c0c0c0; stroke-width: 2; fill: none; }
.tel-stage .d1x-line.is-on { stroke: #000080; stroke-dasharray: 6 6; animation: telDash .6s steps(3) infinite; }
.tel-stage .d1x-line.is-ok { stroke: #008000; stroke-dasharray: none; animation: none; }
.tel-stage .d1x-line.is-bad { stroke: #ff0000; stroke-dasharray: none; animation: none; }
.tel-stage .d1x-line-dashed { stroke-dasharray: 3 9; }
@keyframes telDash { to { stroke-dashoffset: -12; } }
.tel-stage .d1x-node.is-on .nn-box { stroke: #000080; stroke-width: 2; fill: #e0e0ff; }
.tel-stage .d1x-node.is-ok .nn-box { stroke: #008000; stroke-width: 2; fill: #e0ffe0; }
.tel-stage .d1x-node.is-bad .nn-box { stroke: #ff0000; stroke-width: 2; fill: #ffe0e0; }
.tel-stage .d1x-node.is-busy .nn-box { stroke: #ff8000; stroke-width: 2; fill: #fff0d0; }
.tel-stage .d1x-node.is-ok .nn-icon { stroke: #008000; } .tel-stage .d1x-node.is-bad .nn-icon { stroke: #ff0000; } .tel-stage .d1x-node.is-busy .nn-icon { stroke: #ff8000; }
.tel-stage .tel-mode rect { fill: #e0ffe0; stroke: #008000; stroke-width: 1.2; }
.tel-stage .tel-mode text { fill: #008000; font-size: 12px; font-weight: 700; }
.tel-stage .tel-mode .tm-urlaub { display: none; }
.tel-stage .tel-mode.is-urlaub .tm-open { display: none; } .tel-stage .tel-mode.is-urlaub .tm-urlaub { display: block; }
.tel-stage .tel-mode.is-urlaub rect { fill: #fff0d0; stroke: #ff8000; } .tel-stage .tel-mode.is-urlaub text { fill: #a05000; }
.tel-stage .tel-q { fill: #f4f4f4; stroke: #808080; stroke-width: 1.4; }
.tel-stage .tel-q.is-on { fill: #c0c0ff; stroke: #000080; animation: telBlink 1s steps(2) infinite; }
.tel-stage .tel-q.is-bad { fill: #ffe0b0; stroke: #ff8000; animation: telBlink .8s steps(2) infinite; }
.tel-stage .tel-q.is-ok { fill: #c0ffc0; stroke: #008000; animation: none; }
@keyframes telBlink { 50% { opacity: .45; } }
.tel-stage .tel-wave path { fill: none; stroke: #000080; stroke-width: 1.8; opacity: .15; }
.tel-stage .tel-wave.is-on path { animation: telWave 1.2s steps(4) infinite; }
.tel-stage .tel-wave.is-on path:nth-child(2) { animation-delay: .18s; } .tel-stage .tel-wave.is-on path:nth-child(3) { animation-delay: .36s; }
@keyframes telWave { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.tel-stage .tel-pop { opacity: 0; }
.tel-stage .tel-pop.is-on, .tel-stage .tel-pop.is-ok { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tel-stage .d1x-line.is-on, .tel-stage .tel-q.is-on, .tel-stage .tel-q.is-bad, .tel-stage .tel-wave.is-on path { animation: none; } }

/* 802.1X: VLAN-Chips, Ticket, Gerätesymbol je Szenario */
.tel-stage .d1x-chip rect { fill: #f4f4f4; stroke: #808080; stroke-width: 1; }
.tel-stage .d1x-chip text { fill: #404040; font-size: 11.5px; font-weight: 700; }
.tel-stage .d1x-chip.is-on rect { stroke: #000080; fill: #e0e0ff; }
.tel-stage .d1x-chip.is-ok rect { stroke: #008000; fill: #e0ffe0; } .tel-stage .d1x-chip.is-ok text { fill: #008000; }
.tel-stage .d1x-chip.is-bad rect { stroke: #ff0000; fill: #ffe0e0; } .tel-stage .d1x-chip.is-bad text { fill: #ff0000; }
.tel-stage .d1x-ticket { opacity: 0; } .tel-stage .d1x-ticket.is-on { opacity: 1; }
.tel-stage .d1x-ticket rect { fill: #ffffe1; stroke: #000; stroke-width: 1; }
.tel-stage .d1x-ticket text { fill: #000; font-size: 12px; font-weight: 700; }
.tel .d1x-icon-nb { display: none; }
.tel[data-mode="unknown"] .d1x-icon-nb { display: block; } .tel[data-mode="unknown"] .d1x-icon-ekg { display: none; }

/* ---------- Portal-Demo: einmal eintragen, überall aktuell ---------- */
.sync { display: grid; grid-template-columns: 240px 1fr; gap: 12px; align-items: start; }
@media (max-width: 767px) { .sync { grid-template-columns: 1fr; } }
.sync-form { background: var(--chrome); border: 1px solid; border-color: #fff #808080 #808080 #fff; padding: 8px 10px; }
.sync-form label { display: block; margin: 0 0 8px; }
.sync-form label span { display: block; font-size: 12px; margin-bottom: 2px; }
.sync-form .field, .sync-form select { width: 100%; box-sizing: border-box; font: inherit; }
.sync-status { font-size: 12px; margin: 6px 0 0; min-height: 2.4em; }
.sync-status.busy { color: #a05000; } .sync-status.done { color: #008000; font-weight: 700; }
.sync-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.sync-tile { background: #fff; border: 1px solid; border-color: #dfdfdf #000 #000 #dfdfdf; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080; padding: 2px; font-size: 12px; }
.sync-tile .thead { display: flex; align-items: center; gap: 6px; background: linear-gradient(90deg, var(--title-a), var(--title-b)); color: #fff; padding: 2px 5px; font-weight: 700; }
.sync-tile .thead img { width: 14px; height: 14px; }
.sync-tile .thead span:first-of-type { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-tile .tbadge { font-size: 10px; background: #008000; color: #fff; padding: 0 5px; }
.sync-tile.stale .tbadge { background: #a05000; } .sync-tile.busy .tbadge { background: #000080; }
.sync-tile.busy .tbody { opacity: .5; }
.sync-tile .tbody { padding: 6px 7px; min-height: 92px; }
.sync-tile .banner { background: #ffffe1; border: 1px solid #808080; padding: 3px 5px; margin: 4px 0; }
.sync-tile .sig { background: #000; color: #fff; padding: 6px 8px; }
.sync-tile .sig b { display: block; font-size: 13px; }
.sync-tile .sig small { display: block; color: #c0c0c0; }
.sync-tile .tel { font-family: var(--mono); font-size: 11px; margin: 0; }
.sync-tile .print { border: 1px dashed #808080; padding: 6px; text-align: center; }
.sync-tile .print b { display: block; }

/* ---------- Statische Grafik: Netzzonen ---------- */
.sgfx { background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #000; padding: 6px; margin: 0 0 12px; }
.sgfx svg { display: block; width: 100%; height: auto; max-height: 36vh; font-family: var(--ui-font); }
.sgfx .zone { fill: #dfdfdf; stroke: #808080; stroke-width: 1; }
.sgfx .zt { fill: #000; font-size: 13px; font-weight: 700; }
.sgfx .sub { fill: #404040; font-size: 9.5px; }
.sgfx .lbl { fill: #000; font-size: 11px; font-weight: 700; }
.sgfx .box { fill: #fff; stroke: #000; stroke-width: 1; }
.sgfx .box.bad { fill: #ffe0e0; stroke: #ff0000; stroke-width: 2; }
.sgfx .box.warn { fill: #fff6d6; stroke: #ff8000; stroke-width: 1.5; }
.sgfx .box.ok { fill: #e0ffe0; stroke: #008000; stroke-width: 1.5; }
.sgfx .fw { fill: #ffffe1; stroke: #000080; stroke-width: 2; }
.sgfx .badline { stroke: #ff0000; stroke-width: 2; stroke-dasharray: 6 4; }
.sgfx .warnline { stroke: #ff8000; stroke-width: 2; stroke-dasharray: 3 4; }
.sgfx .xx { fill: #ff0000; font-size: 16px; font-weight: 700; }
.sgfx .oktext { fill: #008000; font-size: 9.5px; font-weight: 700; }
.sgfx .warntext { fill: #a05000; font-size: 9.5px; font-weight: 700; }
.sgfx .badtext { fill: #ff0000; font-size: 9.5px; font-weight: 700; }

/* ---------- Eingabeaufforderung: blinkender Cursor im Namen ---------- */
.dicon[data-app="cmd"] .lbl::after { content: "_"; font-weight: 700; animation: cmdBlink 1s steps(2) infinite; }
@keyframes cmdBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dicon[data-app="cmd"] .lbl::after { animation: none; } }

/* ---------- BIOS-Setup (Entf/F2 beim Start) ---------- */
#biossetup { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: #0000aa; color: #aaaaaa; outline: 0; cursor: default;
  font-family: "Perfect DOS VGA 437", "Px437 IBM VGA8", "Lucida Console", Consolas, "DejaVu Sans Mono", "Courier New", monospace; font-size: min(1.95vw, 3vh, 20px); line-height: 1.25; }
#biossetup.open { display: flex; }
#biossetup::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); }
.bios { width: min(82ch, 100vw - 12px); position: relative; }
.bios .bhdr { text-align: center; color: #ffffff; white-space: pre; margin: 0 0 .5em; }
.bios .bframe { border: 3px double #aaaaaa; position: relative; }
.bios .bcols { display: flex; align-items: stretch; }
.bios .bcol { flex: 1 1 50%; min-width: 0; padding: .35em 1ch .35em 2ch; overflow: hidden; }
.bios .bcol + .bcol { border-left: 3px double #aaaaaa; }
.bios .bit { color: #ffff55; white-space: pre; display: inline-block; padding: 0 1ch; }
.bios .bit.sel { background: #aa0000; color: #ffffff; }
.bios .bkeys { border-top: 3px double #aaaaaa; padding: .3em 2ch; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); white-space: pre; color: #aaaaaa; overflow: hidden; }
.bios .bhelp { border-top: 3px double #aaaaaa; padding: .3em 2ch; text-align: center; color: #ffff55; min-height: 1.25em; white-space: pre; }
.bios .brow { white-space: pre; }
.bios .brow .bl { color: #ffff55; display: inline-block; width: 23ch; }
.bios .brow .bv { color: #ffffff; }
.bios .brow.sel .bl, .bios .brow.sel .bv { background: #aa0000; color: #ffffff; }
.bios .bkeys2 { margin: 1.25em -1ch 0 -2ch; padding: .3em 1ch 0 2ch; border-top: 3px double #aaaaaa; display: grid; grid-template-columns: 17ch minmax(0, 1fr); white-space: pre; color: #aaaaaa; overflow: hidden; }
.bios .bkeys2 .w { grid-column: 1 / -1; }
.bios .bpre { white-space: pre; padding: .35em 2ch; color: #ffff55; overflow: hidden; }
.bios .bpre b { color: #ffffff; font-weight: 400; }
.bios .bpre u { text-decoration: none; color: #aaaaaa; }
.bios [data-bk], .bios [data-bi], .bios [data-br] { cursor: pointer; }
.bios .bprompt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #aa0000; color: #ffffff; border: 3px double #ffffff; padding: .5em 3ch; white-space: pre; text-align: center; z-index: 2; box-shadow: 1ch 1ch 0 rgba(0,0,0,.45); }
.bios .bprompt b { font-weight: 400; color: #ffff55; }
.bios .bcur { display: inline-block; width: 1ch; height: 1em; vertical-align: -.15em; background: #ffffff; animation: blink 1s steps(1) infinite; }
@media (max-width: 767px) { #biossetup { font-size: 9px; } }

/* ---------- Anmeldung (Benutzer abmelden) ---------- */
#login { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center; background: #008080; padding: 12px; }
#login.open { display: flex; }
.logindlg { width: 440px; max-width: 100%; margin: 0; background: var(--chrome); border: 1px solid; border-color: #dfdfdf #000 #000 #dfdfdf; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, 3px 3px 0 rgba(0,0,0,.3); padding: 3px; }

/* ---------- MS-DOS-Modus ---------- */
body.dosmode #desktop { background: #000 !important; inset: 0 !important; }
body.dosmode #icons, body.dosmode #sidecards, body.dosmode #taskbar, body.dosmode #balloon, body.dosmode .win:not([data-id="cmd"]), body.dosmode .win[data-id="cmd"] .titlebar, body.dosmode .win[data-id="cmd"] .cmdchips, body.dosmode .win[data-id="cmd"] .resizer { display: none !important; }
body.dosmode .win[data-id="cmd"] { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border: 0; padding: 0; box-shadow: none; background: #000; }

/* ---------- Drucker ---------- */
.queue { border-collapse: collapse; width: 100%; background: #fff; font-size: 12px; }
.queue th, .queue td { border: 1px solid #c0c0c0; padding: 3px 6px; text-align: left; white-space: nowrap; }
.queue th { background: #dfdfdf; }
.queue td.err { color: #ff0000; font-weight: 700; }
.queue td.ok { color: #008000; font-weight: 700; }

/* ---------- Editor ---------- */
.notepad { flex: 1 1 auto; width: 100%; min-height: 100%; border: 0; resize: none; font-family: var(--mono); font-size: 13px; padding: 4px 6px; box-sizing: border-box; outline: none; background: #fff; }

@keyframes blink { 50% { opacity: 0; } }

/* ---------- Outlook Express (Schulungspostfach) ---------- */
.oe { display: flex; flex: 1 1 auto; min-height: 0; gap: 3px; }
.oe-folders { flex: 0 0 190px; display: flex; flex-direction: column; background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #000; min-height: 0; }
.oe-fh { background: var(--chrome); border-bottom: 1px solid #808080; padding: 3px 6px; font-weight: 700; }
.oe-folders ul { list-style: none; margin: 0; padding: 4px 0; flex: 1 1 auto; overflow: auto; }
.oe-folders li { display: flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: default; }
.oe-folders li.sel { background: var(--title-a); color: #fff; }
.oe-folders li.dim { color: #808080; }
.oe-score { border-top: 1px solid #808080; background: #ffffe1; padding: 6px 8px; font-size: 11.5px; line-height: 1.35; }
.oe-score.done { background: #e8ffe8; border-top: 2px solid #008000; }
.oe-score.fail { background: #ffecec; border-top: 2px solid #c00000; }
.oe-prog { display: flex; gap: 2px; padding: 2px; background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #000; margin: 0 0 5px; }
.oe-prog .seg { flex: 1 1 0; height: 9px; background: #c0c0c0; cursor: pointer; }
.oe-prog .seg.ok { background: #008000; } .oe-prog .seg.bad { background: #c00000; } .oe-prog .seg.show { background: #000080; }
.oe-prog .seg.cur { outline: 1px solid #000; outline-offset: 1px; }
.oe-fail { margin-top: 5px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .oe-fail b { color: #c00000; } .oe-fail .btn { font-weight: 700; }
.m-share { padding: 10px 14px; }
.oe-quiz { margin: 4px 14px 10px; padding: 8px 12px; }
.oe-score.done .oe-cert .btn { font-weight: 700; }
.oe-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.oe-listwrap { flex: 0 0 196px; overflow: auto; background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #000; }
.oe-list { border-collapse: collapse; width: 100%; font-size: 12px; }
.oe-list th { position: sticky; top: 0; z-index: 2; background: var(--chrome); border-right: 1px solid #808080; border-bottom: 1px solid #808080; text-align: left; padding: 2px 6px; font-weight: 400; }
.oe-list td { padding: 2px 6px; border-bottom: 1px solid #f0f0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; vertical-align: top; }
.oe-list td:first-child { white-space: nowrap; max-width: none; }
.oe-list td:first-child img { vertical-align: middle; }
.oe-list .clip { margin-left: 2px; font-size: 11px; }
.oe-list tr { cursor: default; }
.oe-list tr.unread td { font-weight: 700; }
.oe-list tr.sel td { background: var(--title-a); color: #fff; }
.oe-list tr.quar td { color: #808080; white-space: normal; }
.oe-list tr.quar .small { font-size: 11px; }
.oe-list td.subj { position: relative; padding-right: 8px; }
.oe-tag { display: inline-block; margin-left: 8px; padding: 0 5px; font-size: 10.5px; font-weight: 700; border: 1px solid; }
.oe-list td.subj .oe-tag { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); margin: 0; box-shadow: -6px 0 6px -2px #fff; }
.oe-list tr.sel td.subj .oe-tag { box-shadow: -6px 0 6px -2px var(--title-a); }
.oe-tag.ok { color: #008000; border-color: #008000; background: #e8ffe8; } .oe-tag.bad { color: #c00000; border-color: #c00000; background: #ffe8e8; }
.oe-list tr.sel .oe-tag { background: #fff; }
.oe-read { flex: 1 1 auto; min-height: 0; overflow: auto; background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #000; font-size: 12.5px; line-height: 1.45; }
.oe-head { background: var(--chrome); border-bottom: 1px solid #808080; padding: 6px 10px; display: grid; gap: 2px; }
.oe-head .muted { display: inline-block; min-width: 56px; }
.oe-addr { color: #000080; }
.oe-body { padding: 12px 14px; }
.oe-body p { margin: 0 0 8px; }
.oe-body .small, .oe-read .small { font-size: 11px; }
.oe-empty { padding: 20px 18px; display: flex; gap: 14px; align-items: flex-start; color: #000; }
.oe-empty img { width: 32px; height: 32px; }
.m-share { max-width: 460px; margin: 0 auto; border: 1px solid #c0c0c0; padding: 14px 16px; font-family: "Segoe UI", Arial, sans-serif; }
.m-share-h { color: #0078d4; font-weight: 700; font-size: 13px; margin: 0 0 10px; }
.m-doc { display: flex; gap: 10px; align-items: center; border: 1px solid #e0e0e0; padding: 8px 10px; margin: 0 0 10px; background: #fafafa; }
.m-docicon { display: inline-block; background: #c00000; color: #fff; font-weight: 700; font-size: 10px; padding: 8px 5px; }
.m-link { font: inherit; }
.oe-quiz { margin: 4px 14px 14px; padding: 10px 12px; background: #ffffe1; border: 1px solid #808080; }
.oe-quiz.ok { background: #e8ffe8; border-color: #008000; } .oe-quiz.bad { background: #ffe8e8; border-color: #c00000; }
.oe-quiz.show { background: #e8f0ff; border-color: #000080; }
.oe-tag.show { color: #000080; border-color: #000080; background: #e8f0ff; }
.oe-quiz .btns { margin-top: 6px; }
.oe-clues { margin: 8px 0; padding-left: 18px; }
.oe-clues li { margin: 0 0 4px; }
.oe-lesson { margin: 8px 0 0; font-weight: 700; }
/* Folge der anderen Einstufung („Als echt behandelt“, „Als gefährlich gemeldet“): immer an derselben Stelle zwischen Merkmalen und Lehre */
.oe-anders { margin: 8px 0 0; padding: 6px 8px; background: rgba(255,255,255,.7); border: 1px dashed #808080; }
@media (max-width: 767px) { .oe { flex-direction: column; } .oe-folders { flex: 0 0 auto; } .oe-folders ul { display: flex; flex-wrap: wrap; } .oe-folders li.dim { display: none; } .oe-listwrap { flex: 0 0 170px; flex: 0 0 34%; } .oe-list th:nth-child(4), .oe-list td:nth-child(4) { display: none; } }

/* ---------- Word mit Makro-Köder ---------- */
.word-bar { display: flex; align-items: center; gap: 12px; padding: 5px 10px; background: #fff4c2; border-top: 1px solid #c0a000; border-bottom: 1px solid #c0a000; font-size: 12.5px; flex: 0 0 auto; }
.word-bar .bad { color: #c00000; font-weight: 700; }
.word-page { flex: 1 1 auto; min-height: 0; overflow: auto; background: #808080; padding: 14px; }
.word-doc { background: #fff; max-width: 620px; margin: 0 auto; min-height: 100%; padding: 36px 48px; box-shadow: 2px 2px 0 rgba(0,0,0,.4); font-family: "Times New Roman", Times, serif; font-size: 14px; }
.word-lure { text-align: center; padding: 10px 20px 20px; border: 2px dashed #c0c0c0; margin: 0 0 20px; }
.word-logo { display: inline-block; width: 40px; height: 40px; line-height: 40px; background: #2b579a; color: #fff; font-weight: 700; font-size: 24px; font-family: Arial, sans-serif; margin: 0 0 8px; }
.word-blur { color: #c0c0c0; letter-spacing: 1px; }
.word-real { display: none; margin-top: 18px; padding: 10px 12px; background: #ffe8e8; border: 1px solid #c00000; font-family: var(--ui-font); font-size: 12.5px; }
.word-real pre { background: #fff; border: 1px solid #c0c0c0; padding: 6px 8px; font-size: 11.5px; overflow: auto; }
.word-doc.revealed .word-lure, .word-doc.revealed .word-blur { display: none; }
.word-doc.revealed .word-real { display: block; }
.oe-cert { margin-top: 5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oe-cert b { color: #008000; }
.m-teams { max-width: 460px; }
.m-teams-h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.m-teams-av { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; background: #5b5fc7; color: #fff; font-weight: 700; border-radius: 50%; flex: 0 0 auto; }
.m-ext { background: #ffe0b0; color: #7a4a00; font-size: 10px; font-weight: 700; padding: 1px 5px; border: 1px solid #c8922a; }
.m-qr { text-align: center; margin: 10px 0; }
.m-qr svg { border: 1px solid #c0c0c0; background: #fff; }
.szene .intro-note, .intro-note { background: #ffffe1; border: 1px solid #808080; padding: 6px 10px; margin: 0 0 8px; font-size: 12px; }
/* Phishing-Zertifikat – A4 Hochformat (Bildschirm: Druckvorschau, Druck: 1 Seite) */
.cert-desk { background: #808080; padding: 0; display: flex; justify-content: center; align-items: center; container-type: size; overflow: hidden; }
/* Alle Maße in em: die Seite skaliert über die Schriftgröße (Bildschirm: passend zum Fenster, Druck: 4,3 mm = 185 mm Breite) */
.cert-page { position: relative; font-size: 12px; font-size: max(8px, min(13px, (100cqh - 28px) / 60.92, (100cqw - 28px) / 43.08)); width: 43.08em; aspect-ratio: 210 / 297; box-sizing: border-box; background: #fffdf7; color: #000; line-height: 1.3;
  border: .3em double #000080; outline: 1px solid #c8a000; outline-offset: -.75em; padding: 3em 3.5em 2em; box-shadow: .25em .25em 0 rgba(0,0,0,.45); overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
  background-image: repeating-linear-gradient(135deg, rgba(0,0,128,.04) 0 2px, transparent 2px 12px); }
.cert-ribbon { position: absolute; top: 2.6em; right: -4.5em; transform: rotate(38deg); background: #008000; color: #fff; font-weight: 700; font-size: .92em; letter-spacing: .22em; padding: .4em 5em; box-shadow: 0 1px 0 #004000; }
.cert-wm { position: absolute; left: 50%; top: 50%; width: 58%; transform: translate(-50%, -48%); opacity: .05; pointer-events: none; }
.cert-head { display: flex; flex-direction: column; align-items: center; gap: .6em; }
.cert-logo { height: 3.5em; display: block; }
.cert-kick { font-size: .85em; letter-spacing: .18em; text-transform: uppercase; color: #000080; }
.cert-h { font-family: Georgia, "Times New Roman", serif; font-size: 4em; letter-spacing: .1em; margin: .25em 0 .1em; color: #000080; font-weight: 700; line-height: 1; }
.cert-rule { width: 70%; display: flex; align-items: center; gap: .75em; color: #c8a000; font-size: .77em; margin: 0 0 1.4em; }
.cert-rule::before, .cert-rule::after { content: ''; flex: 1 1 auto; border-top: 1px solid #c8a000; }
.cert-sub { margin: 0; font-size: 1em; color: #404040; font-style: italic; }
.cert-name { display: block; width: 82%; margin: .1em 0 .5em; border-bottom: 2px solid #000080; text-align: center; font-family: Georgia, "Times New Roman", serif; font-size: 2.3em; line-height: 1.2; font-weight: 700; color: #000; padding: .1em 0 .2em; min-height: 1.2em; overflow-wrap: anywhere; }
.cert-name.leer { font-size: 1.4em; font-weight: 400; font-style: italic; color: #a0a0a0; padding: .55em 0 .5em; }
.cert-txt { font-size: 1em; line-height: 1.5; margin: 0 0 1.1em; max-width: 34em; }
.cert-medal { width: 9.6em; height: 9.6em; box-sizing: border-box; border-radius: 50%; border: .23em solid #008000; padding: .35em; margin: 0 0 1.1em; background: #fff; flex: 0 0 auto; }
.cert-medal-in { width: 100%; height: 100%; border-radius: 50%; border: 1px solid #c8a000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em; }
.cert-big { font-family: Georgia, "Times New Roman", serif; font-size: 2.4em; font-weight: 700; color: #008000; line-height: 1; white-space: nowrap; }
.cert-mid { font-size: .8em; font-weight: 700; color: #008000; line-height: 1.1; }
.cert-small { font-size: .68em; color: #404040; max-width: 8.6em; line-height: 1.2; }
.cert-topics { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4em 1.6em; text-align: left; font-size: .885em; width: 100%; max-width: 40em; }
.cert-topics li { position: relative; padding-left: 1.3em; }
.cert-topics li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #008000; font-weight: 700; }
.cert-row { display: flex; justify-content: space-between; align-items: flex-end; gap: .9em; width: 100%; margin: auto 0 1em; }
.cert-val { font-weight: 700; border-bottom: 1px solid #000; padding: 0 .8em .25em; font-size: .96em; white-space: nowrap; }
.cert-sign { font-family: "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive; font-size: 1.5em; font-weight: 400; }
.cert-cap { font-size: .77em; color: #606060; margin-top: .3em; }
.cert-seal { display: flex; flex-direction: column; align-items: center; gap: .2em; font-size: .77em; color: #000080; font-weight: 700; }
.cert-seal img { width: 4.8em; height: 4.8em; }
.cert-foot { font-size: .81em; color: #404040; line-height: 1.5; border-top: 1px solid #c8a000; padding-top: .75em; width: 100%; }
.cert-btns { padding: 6px 4px 2px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 0 0 auto; }
.cert-btns .muted { flex: 1 1 120px; min-width: 0; white-space: normal; text-align: right; font-size: 11px; line-height: 1.25; }
.cert-feedback { flex: 0 0 auto; padding: 6px 8px 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.cert-fb-row { display: flex; gap: 8px; align-items: stretch; }
.cert-fb-row textarea { flex: 1 1 auto; font: inherit; font-size: 12px; resize: none; }
.oe-compose { display: grid; grid-template-columns: 72px 1fr; gap: 6px 8px; align-items: center; }
.oe-compose .oe-compose-full { grid-column: 1 / -1; }
.oe-compose textarea { font: inherit; resize: vertical; }
@media (max-width: 700px) {
  .cert-desk { display: block; padding: 10px; container-type: normal; overflow: auto; }
  .cert-page { font-size: 10.5px; width: 100%; aspect-ratio: auto; padding: 2.6em 1.6em 1.6em; }
  .cert-row { flex-wrap: wrap; justify-content: center; margin-top: 1.2em; }
  .cert-btns .muted { display: none; }
}
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  /* Urkunden, Zertifikate und Aushänge (alle Fenster mit .cert-page): Titelzeile, Knöpfe und Fußzeile nicht drucken, sonst rutscht der Druck auf ein zweites Blatt */
  body:has(.win.printing .cert-page) #printfoot { display: none !important; }
  .win.printing:has(.cert-page) .titlebar, .win.printing .cert-btns, .win.printing .cert-feedback { display: none !important; }
  .win.printing .cert-desk { background: #fff !important; padding: 0 !important; overflow: visible !important; display: block !important; container-type: normal !important; }
  /* 4,25 mm Schrift = 183 x 259 mm, bleibt auch mit Druckerrand auf einer A4-Seite. Ohne Streifenmuster und Wasserzeichen: Safari (iPhone, iPad) druckt Verläufe und Transparenz sonst als dunkle Fläche */
  .win.printing .cert-page { font-size: 4.25mm; width: 43.08em; height: auto; aspect-ratio: 210 / 297; margin: 0 auto; box-shadow: none; break-inside: avoid; page-break-inside: avoid; background: #fff; }
  .win.printing .cert-wm { display: none; }
  .win.printing .cert-name { border-bottom-color: #000; }
  .cert-page, .cert-ribbon, .cert-medal, .cert-topics li::before, .cert-wm, .cert-rule::before, .cert-rule::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
/* Animation in der Warnung (Registerkarte): Bühne etwas kleiner, damit Schrittliste und Knöpfe Platz haben */
.tabpanel[data-panel="ablauf"] .szene-stage .sc { display: block; max-width: 600px; margin: 0 auto; }
/* Willkommensdialog des Schulungspostfachs: Text links, Zertifikatsvorschau rechts */
/* Einstiegsseite nach dem Start (Fenster einstieg) */
.winbody.es { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 12px; }
.es-kopf { display: flex; gap: 16px; align-items: flex-start; }
.es-logo { height: 42px; flex: 0 0 auto; margin-top: 2px; }
.es-titel { font-size: 18px; display: block; margin-bottom: 4px; }
.es-kopf p { margin: 0; line-height: 1.45; }
.es-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.es-karte { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf; padding: 10px; }
.es-karte > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.es-karte b { font-size: 13px; }
.es-karte span { line-height: 1.4; font-size: 12px; }
.es-karte .btn { align-self: flex-start; margin-top: 4px; }
.es-fuss { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.es-tipp { padding: 8px 10px; line-height: 1.4; }
.es-fuss .btns { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.es-fuss label { display: flex; align-items: center; gap: 6px; }
.es-fuss label input { margin: 0; width: 13px; height: 13px; }
@media (max-width: 599px) { .es-karten { grid-template-columns: 1fr; } .winbody.es { padding: 10px 10px 8px; } }
/* Sicherheitshinweis nach dem Start: leicht rötlich hinterlegt und rot gerahmt, damit er sich von der Einstiegsseite abhebt */
.win.dialog.warnbox .winbody { background: #fbeeee; box-shadow: inset 0 0 0 1px #c00000; }
.intro-wrap { display: flex; gap: 16px; align-items: flex-start; }
.intro-ok { background: #e8ffe8; border: 1px solid #008000; border-left-width: 4px; padding: 6px 9px; margin: 0 0 8px; }
.intro-warn { background: #ffffe1; border: 1px solid #c8a000; border-left-width: 4px; padding: 6px 9px; margin: 0 0 8px; }
.intro-text { flex: 1 1 auto; min-width: 0; }
.intro-cert { flex: 0 0 auto; margin: 2px 8px 0 0; text-align: center; font-size: 11px; color: #404040; }
.intro-cert img { display: block; width: 150px; height: auto; border: 1px solid #000080; box-shadow: 5px 5px 0 rgba(0,0,0,.35); transform: rotate(-3deg); margin: 6px 8px 12px 4px; background: #fffdf7; }
@media (max-width: 700px) { .intro-cert { display: none; } }
/* Administrator-Modus (Easter Egg: Anmeldung als „Administrator“) */
body:not(.admin) .admin-only { display: none !important; }
body:not(.honeypot) .honeypot-only { display: none !important; }
body.admin #desktop { background-color: #4a1515 !important; }
body.admin #tray::before { content: 'Administrator'; color: #ffd0d0; background: #a00000; font-weight: 700; font-size: 11px; padding: 1px 6px; margin-right: 6px; border: 1px solid #600000; }
.vw-head { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 10px; }
.vw-ev td:nth-child(1) { white-space: nowrap; color: #404040; }
.vw-ev td:nth-child(4), .vw-users td:nth-child(4), .vw-svc td:nth-child(4) { white-space: normal; }
.vw-ev .lv { display: inline-block; min-width: 62px; text-align: center; font-size: 11px; font-weight: 700; padding: 1px 5px; color: #fff; background: #000080; }
.vw-ev .lv.warn { background: #808000; } .vw-ev .lv.err { background: #a00000; }
.vw-ev tr.sel td { background: #ffffe1; }
.vw-users tr.vw-warn td { background: #fff3f3; }
.vw-svc td.ok { color: #006000; font-weight: 700; } .vw-svc td.off { color: #606060; }
/* Registrierungs-Editor (Easter Egg) */
.regedit { display: flex; padding: 0 !important; }
.reg-tree { flex: 0 0 250px; border-right: 1px solid #808080; background: #fff; padding: 6px 4px; font-size: 12px; overflow: auto; white-space: nowrap; }
.reg-node { padding: 1px 4px; } .reg-node.lvl1 { padding-left: 18px; } .reg-node.lvl2 { padding-left: 32px; } .reg-node.lvl3 { padding-left: 46px; } .reg-node.lvl4 { padding-left: 60px; } .reg-node.lvl5 { padding-left: 74px; } .reg-node.lvl6 { padding-left: 88px; }
.reg-node.sel { background: #000080; color: #fff; }
.reg-aufgabe { background: #ffffe1; border-color: #c8a000; border-left-width: 4px; } .reg-aufgabe .legend { background: #ffffe1; color: #806000; font-weight: 700; }
.reg-vals { flex: 1 1 auto; min-width: 0; padding: 8px 10px; overflow: auto; }
.reg-table td { white-space: normal; word-break: break-all; } .reg-table tbody tr { cursor: default; } .reg-table tbody tr.sel td { background: #000080; color: #fff; }
/* Diskette (Easter Egg) */
.fd-table tbody tr { cursor: default; } .fd-table tbody tr.sel td { background: #000080; color: #fff; } .fd-table .ico16 { vertical-align: -3px; margin-right: 5px; }
.fd-txt { font-family: var(--mono); white-space: pre-wrap; background: #fff; border: 1px solid #808080; padding: 6px 8px; margin: 0 0 6px; font-size: 12px; }
@media (max-width: 700px) { .reg-tree { display: none; } }
/* Druckerbericht (Beispiel der Druckerüberwachung) */
.pm-head { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 10px; line-height: 1.4; }
.pm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 0 0 12px; }
.pm-tile { background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.pm-tile b { font-size: 22px; font-family: Georgia, "Times New Roman", serif; color: #000080; line-height: 1.1; } .pm-tile.err b { color: #a00000; } .pm-tile.warn b { color: #806000; }
.pm-tile span { font-size: 11px; line-height: 1.25; } .pm-tile small { color: #606060; }
.pm-finds { list-style: none; margin: 0; padding: 0; }
.pm-finds li { border-left: 4px solid #808080; background: #fff; margin: 0 0 5px; padding: 5px 8px; font-size: 12px; line-height: 1.4; }
.pm-finds li.crit { border-left-color: #a00000; } .pm-finds li.warn { border-left-color: #c08000; } .pm-finds li.info { border-left-color: #000080; } .pm-finds li.ok { border-left-color: #008000; }
.pm-sev { display: inline-block; min-width: 56px; text-align: center; font-size: 10px; font-weight: 700; padding: 1px 5px; margin-right: 8px; color: #fff; background: #808080; vertical-align: 1px; }
.pm-finds li.crit .pm-sev { background: #a00000; } .pm-finds li.warn .pm-sev { background: #c08000; } .pm-finds li.info .pm-sev { background: #000080; } .pm-finds li.ok .pm-sev { background: #008000; }
.pm-alert { font-style: normal; font-size: 10px; font-weight: 700; color: #a00000; border: 1px solid #a00000; padding: 0 4px; margin-left: 8px; vertical-align: 1px; }
.pm-table td { white-space: normal; vertical-align: top; } .pm-ok { color: #006000; font-weight: 700; } .pm-err { color: #a00000; font-weight: 700; } .pm-warn { color: #806000; font-weight: 700; }
.pm-vol { display: flex; align-items: flex-end; gap: 8px; height: 96px; padding: 18px 8px 16px; background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-sizing: border-box; }
.pm-vol div { flex: 1 1 0; background: #000080; position: relative; min-height: 2px; }
.pm-vol div span { position: absolute; bottom: 100%; left: 0; right: 0; text-align: center; font-size: 10px; margin-bottom: 1px; }
.pm-vol div i { position: absolute; top: 100%; left: 0; right: 0; text-align: center; font-size: 10px; font-style: normal; color: #404040; margin-top: 2px; }
.pm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 700px) { .pm-two { grid-template-columns: 1fr; } }
/* Sperrseite des DNS-Filters im IE */
.ie .blk { max-width: 620px; }
.ie .blk-head { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 12px; }
.ie .blk-head img { width: 32px; height: 32px; flex: 0 0 auto; }
.ie .blk-head h2 { margin: 0 0 4px; color: #c00000; }
.ie .blk-head p { margin: 0; }
.ie .blk-tab { border-collapse: collapse; margin: 0 0 12px; font-size: 13px; }
.ie .blk-tab th { text-align: left; padding: 4px 14px 4px 0; color: #404040; font-weight: 400; white-space: nowrap; vertical-align: top; }
.ie .blk-tab td { padding: 4px 0; font-weight: 700; word-break: break-all; }
.ie .blk .btns { margin: 0 0 14px; }
.ie .blk .small { font-size: 12px; }

/* ---------- Gefälschte Microsoft-Anmeldung im IE ---------- */
.ie-fake { flex: 1 1 auto; min-height: 0; overflow: auto; background: #f2f2f2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; font-family: "Segoe UI", Arial, sans-serif; color: #1b1b1b; }
.ie-fake .msbox { background: #fff; width: 100%; max-width: 440px; padding: 44px 44px 36px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.ie-fake .msword { font-size: 16px; font-weight: 600; margin: 0 0 14px; display: flex; align-items: center; gap: 2px; }
.ie-fake .sq { display: inline-block; width: 9px; height: 9px; } .ie-fake .sq.r { background: #f25022; } .ie-fake .sq.g { background: #7fba00; } .ie-fake .sq.b { background: #00a4ef; } .ie-fake .sq.y { background: #ffb900; margin-right: 6px; }
.ie-fake h2 { font-size: 24px; font-weight: 600; margin: 0 0 10px; }
.ie-fake .msin { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid #666; padding: 6px 0; font: inherit; font-size: 15px; outline: none; margin: 8px 0 14px; background: #fff; }
.ie-fake .msin:focus { border-bottom-color: #0067b8; }
.ie-fake .mslink { color: #0067b8; cursor: pointer; }
.ie-fake .msbtns { text-align: right; margin-top: 10px; }
.ie-fake .msbtn { background: #0067b8; color: #fff; border: 0; padding: 8px 26px; font: inherit; font-size: 15px; cursor: pointer; }
.ie-fake .small { font-size: 13px; }
.ie-fake .mspwwrap { position: relative; }
/* Die Sperrmeldung legt sich über das Kennwortfeld */
.ie-fake .pwblock { position: absolute; left: 0; right: 0; top: -8px; z-index: 2; background: #ffe8e8; border: 2px solid #c00000; color: #000; padding: 10px 12px; font-size: 13px; margin: 0; box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.ie-fake .msfoot { margin-top: 14px; font-size: 12px; color: #666; }
@media (max-width: 767px) { .ie-fake .msbox { padding: 24px 20px; } }
@media (max-height: 760px) { .oe-listwrap { flex: 0 0 150px; } }

/* ===== Honeypot (Easter Egg): IDS-Alarm, Scherz-Bluescreen, Protokollfenster, Urkunde ===== */
#hpalarm { position: fixed; inset: 0; z-index: 10003; background: #000; color: #c0c0c0; font-family: var(--mono); font-size: 15px; line-height: 1.5; display: none; padding: 34px 5vw; cursor: pointer; outline: none; overflow: auto; }
#hpalarm.open { display: block; }
#hpalarm .hp-banner { display: inline-block; background: #a00000; color: #fff; font-weight: 700; padding: 3px 12px; margin-bottom: 20px; animation: blink 1s steps(1) infinite; letter-spacing: .04em; }
#hpalarm pre { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
#hpalarm .d { color: #707070; } #hpalarm .r { color: #ff5555; } #hpalarm .g { color: #55ff55; } #hpalarm .y { color: #ffff55; }
#hpalarm .big { color: #ff5555; font-size: 1.6em; font-weight: 700; display: inline-block; margin: 6px 0 2px; }
#hpalarm .hp-go { margin-top: 22px; color: #fff; animation: blink 1s steps(1) infinite; }
#hpbsod { position: fixed; inset: 0; z-index: 10003; background: #0000aa; color: #fff; font-family: var(--mono); font-size: 15px; line-height: 1.35; display: none; padding: 40px 6vw; cursor: pointer; outline: none; overflow: auto; }
#hpbsod.open { display: block; }
#hpbsod .hdr { display: inline-block; background: #aaaaaa; color: #0000aa; padding: 0 8px; margin-bottom: 20px; font-weight: 700; }
#hpbsod pre { margin: 0; font: inherit; white-space: pre-wrap; }
#hpbsod .y { color: #ffff55; } #hpbsod .g { color: #55ff55; }
@keyframes hpflash { 0%, 100% { background: #fff; } 50% { background: #ffc0c0; } }
.hp-field { outline: 2px solid #a00000 !important; outline-offset: -1px; animation: hpflash .35s steps(2) 5; }
.win.hp-shake { animation: shake .22s linear 4; }
.hp-alert { background: #fff; border: 1px solid #808080; box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf; padding: 8px 10px; margin: 0 0 8px; }
.hp-alert-t { font-size: 11px; color: #606060; margin-bottom: 2px; }
.hp-alert-m { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.hp-calc { font-size: 20px; margin: 0 0 6px; font-family: var(--mono); }
.hp-prog { background: #fff; border: 1px solid #808080; box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf; padding: 8px 10px; margin: 6px 0 0; }
.hp-neu { background: #008000; color: #fff; font-weight: 700; padding: 0 6px; font-size: 11px; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hp-chip { display: inline-block; font-size: 11px; padding: 1px 7px; border: 1px solid #808080; background: #e8e8e8; color: #606060; }
.hp-chip.ok { background: #e0f0e0; color: #004000; border-color: #008000; }
.hp-head { display: flex; gap: 12px; align-items: center; margin: 0 0 10px; }
.hp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0 0 6px; }
.hp-tile { background: #fff; border: 1px solid #808080; box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf; padding: 6px 10px; }
.hp-tile b { display: block; font-size: 20px; font-family: Georgia, "Times New Roman", serif; color: #000080; }
.hp-tile span { font-size: 11px; color: #404040; }
.hp-sigs { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; font-size: 12px; }
.hp-sigs li { padding: 2px 0; } .hp-sigs li.ok b { color: #006000; }
.hp-logwrap { max-height: 190px; overflow: auto; background: #fff; border: 1px solid #808080; }
.hp-log { width: 100%; } .hp-log th { position: sticky; top: 0; z-index: 1; background: #c0c0c0; }
.hp-log td.hp-p { font-family: var(--mono); font-size: 11px; max-width: 260px; overflow-wrap: anywhere; }
.hp-log td.ok { color: #006000; font-weight: 700; white-space: nowrap; }
.cert-ribbon-red { background: #a00000; }
.cert-ribbon-gold { background: #a86f00; box-shadow: 0 1px 0 #4d3300; }
.cert-medal-red { border-color: #a00000; } .cert-medal-red .cert-big, .cert-medal-red .cert-mid { color: #a00000; }
.cert-topics-3 { grid-template-columns: 1fr 1fr 1fr; }
.cert-topics li.fehlt { color: #a0a0a0; text-decoration: line-through; } .cert-topics li.fehlt::before { content: '–'; color: #a0a0a0; }
.cert-hp .cert-txt { max-width: 36em; margin-bottom: .8em; } .cert-hp .cert-topics { margin-bottom: .9em; } .cert-hp .cert-rule { margin-bottom: 1.1em; }
@media (max-width: 640px) { .hp-sigs { grid-template-columns: 1fr; } }

/* ===== Team: Wer dahintersteckt ===== */
.team-head { display: flex; gap: 12px; align-items: center; margin: 0 0 12px; }
.team-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.team-card { background: #fff; border: 1px solid #808080; box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf; padding: 12px; display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.team-avatar { flex: 0 0 auto; background: #c0c0c0; border: 1px solid; border-color: #808080 #fff #fff #808080; padding: 3px; line-height: 0; }
.team-avatar svg { display: block; width: 96px; height: 96px; }
.team-body { min-width: 0; }
.team-name { display: block; font-size: 15px; }
.team-role { display: block; color: #000080; font-weight: 700; margin: 2px 0 8px; }
.team-head h1 { font-size: 14px; margin: 0 0 2px; }
.team-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12px; } .team-kv b { white-space: nowrap; }
.team-foot { margin: 12px 0 0; font-size: 12px; }
.team-strip { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12px; margin: -4px 0 0; }
.team-mini { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; }
.team-mini svg { display: block; width: 24px; height: 24px; background: #c0c0c0; border: 1px solid #808080; }
.pix { image-rendering: pixelated; image-rendering: crisp-edges; }
@media (max-width: 640px) { .team-cards { grid-template-columns: 1fr; } }

/* ===== Anmeldung mit Mitarbeiterkonto: Zugriff verweigert ===== */
#verweigert { position: fixed; inset: 0; z-index: 10004; background: #000; color: #e0e0e0; font-family: var(--mono); font-size: 15px; line-height: 1.5; display: none; padding: 34px 6vw; outline: none; overflow: auto; border: 12px solid #a00000; box-sizing: border-box; }
#verweigert.open { display: block; }
#verweigert .vw-banner { display: inline-block; background: #a00000; color: #fff; font-weight: 700; padding: 3px 12px; letter-spacing: .04em; margin-bottom: 18px; animation: blink 1s steps(1) infinite; }
#verweigert .vw-big { font-size: 2.2em; font-weight: 700; color: #ff5555; letter-spacing: .06em; margin: 0 0 18px; }
#verweigert pre { margin: 0 0 22px; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 110ch; }
#verweigert .r { color: #ff5555; font-weight: 700; } #verweigert .y { color: #ffff55; } #verweigert .g { color: #55ff55; }
#verweigert .btn { font-size: 14px; padding: 6px 16px; }
#login .vw-shake { animation: shake .22s linear 3; }
@media (max-width: 640px) { #verweigert { font-size: 13px; padding: 20px 16px; border-width: 8px; } #verweigert .vw-big { font-size: 1.6em; } }

/* ===== MS-DOS-Editor (Befehl edit) ===== */
.dosedit { background: #0000aa; color: #fff; font-family: var(--mono); font-size: 13px; line-height: 1.3; border: 2px solid #c0c0c0; }
.dosedit-menu, .dosedit-status { background: #c0c0c0; color: #000; padding: 1px 4px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.dosedit-text { margin: 0; padding: 6px 8px; min-height: 200px; max-height: 320px; overflow: auto; white-space: pre; font: inherit; color: #fff; }

/* ---------- IT-Sicherheitskonzept (Assistent mit Gap-Analyse) ---------- */
.kz .wizside { flex-basis: 172px; gap: 10px; }
.kz-reife { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.kz-reife b { font-size: 24px; line-height: 1; }
.kz-reife span { font-size: 11px; opacity: .9; font-weight: 400; line-height: 1.2; }
.kz-reife small { font-size: 10px; opacity: .8; }
.kz-bar { height: 10px; background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; padding: 1px; }
.kz-bar i { display: block; height: 100%; background: var(--title-a); }
.kz-bar i.gruen, .kz-ampel.gruen, .kz-dot.gruen { background: #008000; }
.kz-bar i.gelb, .kz-ampel.gelb, .kz-dot.gelb { background: #d8a800; }
.kz-bar i.rot, .kz-ampel.rot, .kz-dot.rot { background: #c00000; }
.kz-chips { display: flex; flex-wrap: wrap; gap: 3px; font-size: 10px; margin-top: 2px; }
.kz-chips span { border: 1px solid rgba(255,255,255,.3); padding: 1px 4px; opacity: .55; }
.kz-chips span.has { opacity: 1; }
.kz-chips .p1.has { background: #c00000; } .kz-chips .p2.has { background: #b07a00; } .kz-chips .p3.has { background: #004a8a; }
.kz-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: auto; }
.kz-dot { font: 9px/1 var(--ui-font); color: #fff; height: 18px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); cursor: default; padding: 0; }
.kz-dot.teil { background: rgba(255,255,255,.3); }
.kz-dot.na { background: #555; color: #ccc; }
.kz-dot.cur { outline: 2px solid #fff; outline-offset: -1px; font-weight: 700; }
.kz-main h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.kz-nr { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 12px; background: var(--title-a); color: #fff; padding: 1px 5px; }
.kz-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kz-intro { margin: 0 0 12px; color: #303030; }
.kz-link { background: none; border: 0; padding: 0; font: inherit; color: #000080; text-decoration: underline; cursor: pointer; }
.kz-hinweis { background: #ffffe1; border: 1px solid #c8a000; border-left-width: 4px; padding: 8px 10px; margin: 0 0 12px; }
.kz-warn { color: #a00000; }
.kz-ok { color: #006000; }
.kz-tag { display: inline-block; margin-left: 8px; background: #ffffe1; border: 1px solid #c8a000; color: #6a4e00; font-size: 11px; font-weight: 400; padding: 0 5px; vertical-align: 1px; white-space: nowrap; }
.kz-update ul { margin: 6px 0; padding-left: 18px; }
.kz-update li { margin: 3px 0; }
.kz-stand { margin-top: 14px; }
.kz-stamm { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.kz-stamm label { display: flex; flex-direction: column; gap: 3px; }
.kz-stamm label span { font-size: var(--ui-size); }
.kz-frage { border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #fff; padding: 8px 10px; margin: 0 0 8px; background: var(--chrome); }
.kz-frage.is-beantwortet { border-left: 4px solid #008000; }
.kz-gate { background: #e8e8f4; }
.kz-fk { display: flex; align-items: flex-start; gap: 8px; }
.kz-fk b { flex: 1 1 auto; }
.kz-qnr { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 11px; color: #606060; flex: 0 0 auto; padding-top: 2px; }
.kz-help { flex: 0 0 auto; width: 20px; height: 20px; padding: 0; font: 700 12px/1 var(--ui-font); border: 1px solid; border-color: #fff #000 #000 #fff; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf; background: var(--chrome); cursor: default; color: #000; }
.kz-help[aria-expanded="true"] { border-color: #000 #fff #fff #000; box-shadow: inset 1px 1px 0 #808080; background: #ffffe1; }
.kz-hilfe { background: #ffffe1; border: 1px solid #808080; padding: 6px 8px; margin: 6px 0 2px; font-size: var(--ui-size); line-height: 1.4; }
.kz-opts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.kz-opts label { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.kz-opts input { margin: 0; width: 13px; height: 13px; }
.kz-na { background: #e8f4e8; border: 1px solid #008000; padding: 6px 10px; }
.kz-progress { margin: 10px 0 6px; }
.kz-ampelbox { display: flex; gap: 12px; align-items: center; margin: 0 0 12px; }
.kz-ampel { width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #000; }
.kz-ampel.grau { background: #a0a0a0; }
.kz-ampelbox b { display: block; font-size: 15px; } .kz-ampelbox span { display: block; } .kz-ampelbox small { color: #606060; }
.kz-bars { margin: 0 0 14px; display: grid; grid-template-columns: minmax(150px, 1fr) 2fr auto; gap: 3px 8px; align-items: center; font-size: var(--ui-size); }
.kz-bar-row { display: contents; }
.kz-bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kz-bar-row .kz-bar { height: 12px; }
.kz-bar-na { grid-column: 2 / 4; color: #606060; font-style: italic; }
.kz-bar-pct { font-family: ui-monospace, Consolas, "Courier New", monospace; text-align: right; min-width: 40px; }
.kz-main h3 { margin: 14px 0 6px; font-size: 14px; }
.kz-gh { padding-left: 8px; border-left: 4px solid #808080; }
.kz-gh.p1 { border-color: #c00000; } .kz-gh.p2 { border-color: #d8a800; } .kz-gh.p3 { border-color: #004a8a; }
.kz-gap { border: 1px solid #808080; border-left: 4px solid #808080; padding: 6px 10px; margin: 0 0 6px; background: #fff; }
.kz-gap.p1 { border-left-color: #c00000; } .kz-gap.p2 { border-left-color: #d8a800; } .kz-gap.p3 { border-left-color: #004a8a; }
.kz-gap p { margin: 4px 0; }
.kz-gap-kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.kz-pbadge { font: 700 11px/1 ui-monospace, Consolas, "Courier New", monospace; border: 1px solid; padding: 2px 4px; }
.kz-gap.p1 .kz-pbadge { color: #c00000; } .kz-gap.p2 .kz-pbadge { color: #9a6a00; } .kz-gap.p3 .kz-pbadge { color: #004a8a; }
.kz-unklar { font-size: var(--ui-size); color: #9a6a00; font-style: italic; }
.kz-gap-fuss { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--ui-size); color: #505050; }
.kz-gap-fuss a { color: #000080; }
.kz-lauf em { color: #505050; }
.kz-aktionen { justify-content: flex-start; }
.kz-mobi { display: none; }
.kz-doc { display: none; }
@media (max-width: 767px) {
  .kz-mobi { display: block; background: var(--title-a); color: #fff; padding: 4px 8px; margin: -14px -18px 10px; font-size: var(--ui-size); }
  .kz-stamm { grid-template-columns: 1fr; }
  .kz-bars { grid-template-columns: 1fr auto; }
  .kz-bar-label, .kz-bar-na { grid-column: 1 / 3; }
  .kz-opts { gap: 4px 10px; }
}
@media print {
  .win.printing .kz, .win.printing .menubar { display: none !important; }
  .win.printing .kz-doc { display: block !important; font: 11pt/1.5 var(--ui-font); color: #000; }
  .kz-doc h1 { font-size: 24pt; margin: 4mm 0; }
  .kz-doc h2 { font-size: 13pt; margin: 7mm 0 2.5mm; color: #000080; border-bottom: 1pt solid #000080; padding-bottom: 1mm; break-after: avoid; }
  .kz-doc h3 { font-size: 11pt; margin: 4mm 0 1.5mm; break-after: avoid; }
  .kz-doc ul { margin: 1mm 0 3mm; padding-left: 6mm; }
  .kz-doc li { margin-bottom: 1.2mm; }
  .win.printing[data-id="konzept"] .titlebar { display: none !important; }
  .kzd-deckblatt { display: flex; flex-direction: column; min-height: 258mm; }
  .kzd-fuss { margin-top: auto; padding-top: 2.5mm; border-top: 1pt solid #000; font-size: 8pt; color: #444; }
  .kzd-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8mm; padding-bottom: 3mm; border-bottom: 1.5pt solid #000; }
  .kzd-logo { width: 32mm; height: auto; display: block; }
  .kzd-kopf-txt { text-align: right; font-size: 8.5pt; color: #444; line-height: 1.45; }
  .kzd-kopf-txt b { display: block; color: #111; font-size: 9.5pt; }
  .kzd-titel { margin: 10mm 0 6mm; }
  .kzd-eyebrow { letter-spacing: 3px; text-transform: uppercase; color: #000080; font-size: 9pt; margin: 0 0 2mm; font-weight: 700; }
  .kzd-titel h1 { font-size: 26pt; margin: 0 0 3mm; line-height: 1.15; }
  .kzd-sub { margin: 0; color: #444; font-size: 10.5pt; }
  .kzd-meta { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 1.4mm 6mm; margin: 0 0 6mm; padding: 3.5mm 5mm; background: #f3f3f3; border-left: 2.5pt solid #000080; font-size: 9.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kzd-meta dt { color: #555; margin: 0; }
  .kzd-meta dd { margin: 0; font-weight: 600; }
  .kzd-gesamt { display: flex; align-items: center; gap: 7mm; margin: 0 0 6mm; }
  .kzd-ring { width: 32mm; height: 32mm; flex-shrink: 0; }
  .kzd-gesamt small { display: block; color: #555; font-size: 8pt; text-transform: uppercase; letter-spacing: 1px; }
  .kzd-gesamt b { display: block; font-size: 15pt; margin: 1mm 0 1.5mm; }
  .kzd-gesamt p { margin: 0 0 1mm; font-size: 10pt; }
  .kzd-skala i { display: inline-block; width: 3mm; height: 3mm; margin-right: 1.2mm; vertical-align: -0.2mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kzd-bereiche h2 { font-size: 10pt; margin: 0 0 2.5mm; color: #000080; border-bottom: 1pt solid #000080; padding-bottom: 1mm; }
  .kzd-br { display: flex; align-items: center; gap: 3mm; font-size: 8.5pt; margin-bottom: 1.2mm; break-inside: avoid; }
  .kzd-br-l { flex: 0 0 66mm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kzd-br-bar { flex: 1 1 auto; height: 3.2mm; background: #ececec; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kzd-br-bar i { display: block; height: 100%; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kzd-br-p { flex: 0 0 11mm; text-align: right; font-variant-numeric: tabular-nums; }
  .kzd-br-na { flex: 1 1 auto; color: #777; font-style: italic; }
  .kzd-meta { border-collapse: collapse; margin: 4mm 0; }
  .kzd-meta td { padding: 1mm 6mm 1mm 0; vertical-align: top; font-size: 10pt; }
  .kzd-meta td:first-child { color: #555; }
  .kzd-reife { display: flex; align-items: center; gap: 8mm; margin: 7mm 0 3mm; }
  .kzd-ampel { display: flex; align-items: center; justify-content: center; width: 32mm; height: 32mm; flex-shrink: 0; color: #fff; font-size: 18pt; font-weight: 700; border: 1pt solid #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kzd-ampel.gruen { background: #008000; } .kzd-ampel.gelb { background: #d8a800; } .kzd-ampel.rot { background: #c00000; } .kzd-ampel.grau { background: #a0a0a0; }
  .kzd-reife b { display: block; font-size: 13pt; margin-bottom: 1.5mm; }
  .kzd-reife p { margin: 0 0 1mm; font-size: 10pt; }
  .kzd-skala { color: #555; font-size: 9pt; }
  .kzd-basis, .kzd-disclaimer { font-size: 8.5pt; color: #444; margin-top: 5mm; }
  .kzd-zweck p { color: #333; }
  .kzd-deckblatt { break-after: page; }
  .kzd-abs { font-weight: 700; margin: 2.5mm 0 1mm; }
  .kzd-offen { font-style: italic; color: #8a2020; }
  .kzd-plan { break-before: page; }
  .kzd-gap { border: 1pt solid #c9d8e2; border-left: 2.5pt solid #999; padding: 2.5mm 3.5mm 2mm; margin: 0 0 2.5mm; break-inside: avoid; }
  .kzd-gap.p1 { border-left-color: #c00000; } .kzd-gap.p2 { border-left-color: #d8a800; } .kzd-gap.p3 { border-left-color: #004a8a; }
  .kzd-gap p { margin: 0 0 1mm; }
  .kzd-gap-kopf { font-weight: 700; }
  .kzd-pb { border: 1pt solid; padding: 0 1.6mm; font-size: 8pt; margin-right: 2mm; }
  .kzd-gap-fuss { font-size: 9pt; color: #555; }
  .kzd-gap em { font-weight: 400; color: #9a6a00; }
}

/* Internet Explorer: Weboberfläche eines Netzwerkgeräts (Easter Egg Werkskennwort) */
.ie-geraet { flex: 1 1 auto; min-height: 0; overflow: auto; background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #000; }
.ews-kopf { background: #1f3f7a; color: #fff; padding: 8px 12px; display: flex; align-items: center; gap: 12px; }
.ews-logo { background: #fff; color: #1f3f7a; font-weight: 700; padding: 2px 6px; font-size: 12px; }
.ews-ip { margin-left: auto; font-family: var(--mono); }
.ews-body { display: flex; min-height: calc(100% - 36px); }
.ews-nav { flex: 0 0 150px; background: #e8edf5; border-right: 1px solid #b8c4d8; padding: 8px 0; }
.ews-nav a { display: block; padding: 5px 12px; color: #1f3f7a; text-decoration: none; }
.ews-nav a.akt { background: #fff; font-weight: 700; border-left: 3px solid #1f3f7a; }
.ews-main { flex: 1 1 auto; padding: 10px 16px 16px; min-width: 0; }
.ews-main h2 { font-size: 15px; margin: 6px 0 8px; color: #1f3f7a; border-bottom: 1px solid #b8c4d8; padding-bottom: 3px; }
.ews-tab { border-collapse: collapse; width: 100%; margin: 0 0 12px; }
.ews-tab th, .ews-tab td { text-align: left; padding: 3px 6px; border-bottom: 1px solid #e0e0e0; vertical-align: top; font-weight: normal; }
.ews-tab th { width: 140px; color: #505050; background: #f4f6fa; }
.ews-ok { color: #107c10; font-weight: 700; } .ews-warn { color: #a00000; font-weight: 700; }
.ews-login label { display: block; margin: 0 0 8px; } .ews-login input { display: block; margin-top: 2px; width: 220px; max-width: 100%; font: inherit; padding: 2px 4px; border: 1px solid #808080; background: #fff; }
.ews-btn { font: inherit; padding: 3px 14px; background: #e8edf5; border: 1px solid #1f3f7a; color: #1f3f7a; cursor: pointer; }
.ews-fehler { color: #a00000; margin: 8px 0 0; }
@media (max-width: 640px) { .ews-body { display: block; } .ews-nav { display: flex; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid #b8c4d8; } }
/* Köderdatei: Dateiliste im Dialog */
.koeder-datei { background: none; border: 1px dotted transparent; font: inherit; color: inherit; padding: 1px 3px; cursor: default; text-align: left; }
.koeder-datei:hover, .koeder-datei:focus { background: #000080; color: #fff; outline: none; }

/* Sicherheitsführerschein */
.sf-main h3 { margin: 10px 0 6px; font-size: 14px; }
.sf-zeit { display: inline-block; font-family: var(--mono); font-size: 12px; background: #000080; color: #fff; padding: 1px 6px; margin-right: 6px; vertical-align: 1px; }
.sf-status { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 8px 10px; margin: 0 0 10px; background: #ffffe1; border: 1px solid #c8a000; font-size: var(--ui-size); }
.sf-rot { color: #a00000; }
.sf-tag { list-style: none; margin: 0 0 10px; padding: 0; }
.sf-tag li { margin: 0 0 4px; }
.sf-tag button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #fff; padding: 6px 8px; font: inherit; color: inherit; cursor: default; }
.sf-tag button:hover, .sf-tag button:focus { background: #f0f0ff; outline: none; }
.sf-tag li.done button { border-left: 4px solid #008000; }
.sf-tag li.cur button { border-left: 4px solid #000080; background: #f4f6ff; }
.sf-tag .sf-mt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sf-tag .sf-mt small { color: #505050; }
.sf-tag .sf-st { flex: 0 0 auto; font-size: 11px; color: #606060; white-space: nowrap; }
.sf-tag .sf-st.ok { color: #006000; font-weight: 700; }
.sf-gf { display: block; padding: 8px 10px; margin: 0 0 8px; background: #f4f6fa; border: 1px solid #b8c4d8; line-height: 1.4; }
.sf-hinweis { padding: 8px 10px; margin: 0 0 10px; background: #ffffe1; border: 1px solid #c8a000; line-height: 1.45; }
.sf-hinweis .btn { margin-top: 6px; }
.sf-btns { padding: 6px 0 0; }
.sf-szene { border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #fff; padding: 10px 12px; background: #fff; }
.sf-szene-kopf h3 { margin: 2px 0 6px; }
.sf-frage { margin: 8px 0 6px; }
.sf-optionen { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.sf-opt { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; padding: 8px 10px; font: inherit; color: #000; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; cursor: default; line-height: 1.4; }
.sf-opt:hover:not([disabled]), .sf-opt:focus:not([disabled]) { background: #d8d8d8; outline: none; }
.sf-opt[disabled] { cursor: default; }
.sf-opt.ok { background: #d8f0d8; border-color: #008000; }
.sf-opt.falsch { background: #f6d8d8; border-color: #a00000; }
.sf-opt.richtig { background: #eef8ee; border-color: #008000; border-style: dashed; }
.sf-opt.dim { opacity: .55; }
.sf-buchstabe { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; background: #000080; color: #fff; font-weight: 700; font-size: 11px; }
.sf-folge { padding: 8px 10px; border: 1px solid; line-height: 1.45; }
.sf-folge.ok { background: #e8f6e8; border-color: #008000; }
.sf-folge.falsch { background: #fbe9e9; border-color: #a00000; }
/* Folgen der nicht gewählten Antworten: ruhig und kleiner, die Buchstaben verweisen auf die Knöpfe darüber */
.sf-andere { margin-top: 8px; padding: 8px 10px; border: 1px solid #c0c0c0; background: #f4f4f4; font-size: 12px; line-height: 1.45; }
.sf-andere > b { display: block; margin-bottom: 2px; }
.sf-andere-item { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.sf-andere-item .sf-buchstabe { width: 18px; height: 18px; font-size: 10px; background: #808080; margin-top: 1px; }
.sf-andere-item .sf-buchstabe.ok { background: #008000; }
.sf-etikett { font-weight: 700; } .sf-etikett.ok { color: #006000; } .sf-etikett.falsch { color: #a00000; }
.sf-merke { margin: 6px 0 12px; padding-left: 20px; } .sf-merke li { margin: 0 0 6px; line-height: 1.45; }
.sf-praxis { padding: 8px 10px; margin: 0 0 10px; background: #f4f6fa; border: 1px solid #b8c4d8; line-height: 1.45; } .sf-praxis .btn { margin-top: 6px; }
.sf-bar { margin: 0 0 10px; }
.sf-fragebox { border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #fff; padding: 10px 12px; background: #fff; margin: 0 0 8px; }
.sf-fragekopf { display: flex; align-items: center; gap: 6px; font-size: 11px; margin: 0 0 4px; }
.sf-aussage { font-size: 14px; margin: 6px 0 8px; font-style: italic; }
.sf-antworten { display: flex; flex-direction: column; gap: 4px; }
.sf-antworten.sf-rf { flex-direction: row; gap: 10px; }
.sf-aw { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid transparent; line-height: 1.4; cursor: default; }
.sf-aw:hover { background: #f4f6ff; } .sf-aw.sel { background: #e6eaff; border-color: #000080; }
.sf-aw input { margin: 3px 0 0; flex: 0 0 auto; }
.sf-order { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.sf-step { display: flex; gap: 10px; align-items: center; text-align: left; width: 100%; padding: 6px 10px; font: inherit; color: #000; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; cursor: default; line-height: 1.4; }
.sf-step.gew { background: #d8f0d8; border-color: #008000; }
.sf-step .sf-nr { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; background: #000080; color: #fff; font-weight: 700; font-size: 11px; }
.sf-ergebnis { display: flex; gap: 14px; align-items: center; padding: 10px 12px; margin: 0 0 10px; border: 2px solid; line-height: 1.45; }
.sf-ergebnis.ok { background: #e8f6e8; border-color: #008000; } .sf-ergebnis.falsch { background: #fbe9e9; border-color: #a00000; }
.sf-prozent { font: 700 30px/1 Georgia, "Times New Roman", serif; min-width: 90px; text-align: center; }
.sf-ergebnis.ok .sf-prozent { color: #008000; } .sf-ergebnis.falsch .sf-prozent { color: #a00000; }
.sf-tab { border-collapse: collapse; width: 100%; margin: 0 0 10px; } .sf-tab th, .sf-tab td { text-align: left; padding: 3px 6px; border-bottom: 1px solid #e0e0e0; }
.sf-fehler { padding: 8px 10px; margin: 0 0 6px; background: #fff8f8; border: 1px solid #e0b0b0; line-height: 1.45; }
.sf-abzeichen { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 0 0 10px; }
.sf-abz { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px 8px; border: 1px solid #808080; background: #f4f4f4; opacity: .45; filter: grayscale(1); }
.sf-abz.hat { opacity: 1; filter: none; background: #ffffe1; border-color: #c8a000; }
.sf-abz img { width: 32px; height: 32px; } .sf-abz small { color: #505050; line-height: 1.3; }
.sf-codeform { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0 0 6px; }
.sf-codeform label { display: flex; flex-direction: column; gap: 2px; font-size: var(--ui-size); } .sf-codeform .field { width: 100%; box-sizing: border-box; }
.cert-sf .cert-h { font-size: 2.6em; letter-spacing: .06em; }
.cert-sf .cert-txt { max-width: 36em; margin-bottom: .6em; } .cert-sf .cert-topics { margin-bottom: .8em; font-size: .83em; }
/* Etwas dichter gesetzt, damit auch die lange Fassung (Führerschein mit Geschäftsführungsmodul, sechs Fußzeilen) sicher auf die Seite passt */
.cert-sf .cert-medal { width: 8.4em; height: 8.4em; margin-bottom: .9em; } .cert-sf .cert-big { font-size: 2.05em; } .cert-sf .cert-row { margin-bottom: .7em; } .cert-sf .cert-foot { font-size: .74em; }
@media (max-width: 640px) { .sf-codeform { grid-template-columns: 1fr; } .sf-antworten.sf-rf { flex-direction: column; } .sf-ergebnis { flex-direction: column; align-items: flex-start; } }

/* Anmeldemethoden (Fenster Kennwörter) */
.am-karte { border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #fff; background: #fff; padding: 8px 10px; margin: 0 0 8px; line-height: 1.45; }
.am-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 2px; } .am-kopf b { font-size: 13px; }
.am-tag { display: inline-block; font-size: 11px; padding: 0 6px; border: 1px solid #a00000; color: #a00000; background: #fff4f4; }
.am-tag.ok { border-color: #008000; color: #006000; background: #eef8ee; }
.am-kurz { margin: 0 0 4px; font-style: italic; color: #404040; }
.am-karte p { margin: 0 0 6px; }
.am-pm { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0 0 6px; } .am-pm ul { margin: 0; padding-left: 18px; } .am-pm li { margin: 0 0 2px; }
.am-plus li::marker { content: '+ '; color: #006000; } .am-minus li::marker { content: '– '; color: #a00000; }
.am-meta { display: flex; gap: 16px; font-size: 11px; color: #404040; margin: 0 0 4px; } .am-pkt { letter-spacing: 1px; color: #000080; }
.am-empf { background: #ffffe1; border: 1px solid #c8a000; padding: 4px 8px; margin: 0; }
.am-matrix { border-collapse: collapse; width: 100%; margin: 0 0 6px; font-size: 11px; }
.am-matrix th { text-align: left; padding: 3px 4px; font-weight: 400; background: #f4f6fa; border-bottom: 1px solid #c0c0c0; white-space: nowrap; }
.am-matrix thead th { text-align: center; vertical-align: bottom; } .am-matrix td { text-align: center; padding: 2px; border-bottom: 1px solid #e8e8e8; }
.am-ah { background: none; border: 0; padding: 0; font: inherit; color: #000080; text-decoration: underline; cursor: default; }
.am-z { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 22px; font: 700 13px/1 var(--ui-font); color: #fff; border: 1px solid rgba(0,0,0,.4); cursor: default; vertical-align: middle; }
.am-z.gruen { background: #008000; } .am-z.gelb { background: #d8a800; color: #000; } .am-z.rot { background: #c00000; } .am-z.grau { background: #a0a0a0; }
button.am-z:hover, button.am-z:focus { outline: 2px solid #000080; outline-offset: 1px; }
.am-legende { font-size: 11px; color: #404040; margin: 0 0 8px; } .am-legende .am-z { width: 20px; height: 16px; font-size: 11px; margin: 0 2px 0 6px; }
.am-detail { margin: 0 0 6px; }
.am-dz { padding: 8px 10px; border: 1px solid; border-left-width: 6px; background: #fff; line-height: 1.45; }
.am-dz.gruen { border-color: #008000; } .am-dz.gelb { border-color: #d8a800; } .am-dz.rot { border-color: #c00000; } .am-dz.grau { border-color: #a0a0a0; }
.am-f { font-weight: 700; }
.am-ablauf { margin: 6px 0 10px; padding-left: 24px; } .am-ablauf li { margin: 0 0 6px; line-height: 1.45; padding: 4px 8px; background: #fff; border: 1px solid #e0e0e0; }
.am-ablauf li.ende { font-weight: 700; border-width: 2px; } .am-ablauf li.ende.rot { border-color: #c00000; background: #fbe9e9; } .am-ablauf li.ende.gruen { border-color: #008000; background: #e8f6e8; } .am-ablauf li.ende.gelb { border-color: #d8a800; background: #fff8dc; } .am-ablauf li.ende.grau { border-color: #a0a0a0; }
.am-ablauf li.dlg { font-style: italic; color: #404040; background: #f4f6fa; }
.am-block { border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #fff; background: #fff; padding: 8px 10px; margin: 0 0 12px; line-height: 1.45; }
.am-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.am-zeit { border-collapse: collapse; width: 100%; } .am-zeit th { text-align: left; font-weight: 400; padding: 3px 6px 3px 0; border-bottom: 1px solid #e0e0e0; width: 62%; } .am-zeit td { padding: 3px 0; border-bottom: 1px solid #e0e0e0; font-weight: 700; }
.am-codebox { background: #000; color: #0f0; font-family: var(--mono); padding: 10px 12px; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.am-code { font-size: 30px; letter-spacing: 3px; margin: 0 0 6px; } .am-codebox .kz-bar { margin: 0 0 4px; background: #202020; } .am-codebox .kz-bar i { background: #0f0; } .am-codebox .muted { color: #8f8; font-size: 11px; } .am-codebox code { color: #fff; }
.am-schirm { background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; padding: 8px 10px; min-height: 60px; margin: 0 0 6px; }
.am-zahl { font: 700 30px/1 var(--ui-font); color: #000080; margin: 6px 0 0; }
.am-handy { background: #202020; border: 6px solid #202020; border-radius: 14px; color: #000; min-height: 90px; } .am-handy > div { background: #fff; border-radius: 8px; min-height: 78px; }
.am-push { padding: 10px; line-height: 1.4; } .am-push.ok { background: #e8f6e8; border-radius: 8px; } .am-push.falsch { background: #fbe9e9; border-radius: 8px; } .am-push.bomb { background: #fff8dc; border-radius: 8px; }
.am-push label { display: block; margin: 6px 0; } .am-push input { width: 60px; font: inherit; font-size: 16px; text-align: center; padding: 2px; margin-left: 6px; }
.am-pbtn { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.am-wdlg { max-width: 420px; margin: 4px 0 8px; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 4px 4px 0 rgba(0,0,0,.35); }
.am-wdlg-t { background: #000080; color: #fff; font-weight: 700; padding: 3px 8px; display: flex; align-items: center; gap: 6px; } .am-wdlg.fehler .am-wdlg-t { background: #a00000; }
.am-wdlg-b { padding: 10px 12px; line-height: 1.4; } .am-wdlg-b p { margin: 4px 0 8px; } .am-wdlg-b label { margin-right: 6px; } .am-wdlg-b input { width: 80px; font: inherit; padding: 2px 4px; }
.am-logbox { background: #fff; border: 1px solid #808080; padding: 6px 8px; min-height: 40px; max-height: 220px; overflow: auto; }
.am-log { margin: 0 0 6px; padding: 4px 8px; border-left: 4px solid #000080; background: #f4f6fa; line-height: 1.4; } .am-log.ok { border-color: #008000; background: #e8f6e8; } .am-log.falsch { border-color: #a00000; background: #fbe9e9; }
@media (max-width: 640px) { .am-pm, .am-zwei { grid-template-columns: 1fr; } .am-matrix { font-size: 10px; } .am-z { width: 22px; height: 20px; } }

/* Führerschein: Bildfragen (Mail-Vergleich, Anmeldeseite) */
.sf-mails { display: flex; flex-direction: column; gap: 6px; margin: 0 0 6px; }
.sf-mail { display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; padding: 8px 10px; font: inherit; color: #000; background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #fff; cursor: default; line-height: 1.4; }
.sf-mail:hover, .sf-mail:focus { background: #f4f6ff; outline: none; }
.sf-mail.sel { border: 2px solid #000080; background: #e6eaff; box-shadow: none; }
.sf-mail-kopf { font-size: 12px; } .sf-mail-addr { color: #404040; font-family: var(--mono); font-size: 11px; }
.sf-mail-betreff { font-weight: 700; }
.sf-mail-text { color: #202020; }
.sf-mail-link { font-size: 11px; color: #000080; } .sf-mail-link span { font-family: var(--mono); color: #404040; word-break: break-all; }
.sf-mail-anhang { font-size: 11px; color: #404040; }
.sf-browser { border: 2px solid; border-color: #fff #404040 #404040 #fff; background: #c0c0c0; margin: 0 0 6px; font-family: "Segoe UI", Arial, sans-serif; }
.sf-browser-tabs { padding: 4px 6px 0; } .sf-browser-tab { display: inline-block; background: #fff; border: 1px solid #808080; border-bottom: 0; padding: 2px 10px; font-size: 12px; }
.sf-browser-addr { display: flex; align-items: stretch; gap: 4px; padding: 4px 6px; background: #fff; border-top: 1px solid #808080; border-bottom: 1px solid #808080; }
.sf-bereich { font: inherit; color: inherit; cursor: default; border: 2px dashed transparent; background: none; text-align: left; }
.sf-bereich:hover, .sf-bereich:focus { border-color: #000080; outline: none; }
.sf-bereich.sel { border-color: #000080; border-style: solid; background: #e6eaff; }
.sf-schloss { flex: 0 0 auto; padding: 0 6px; font-size: 14px; }
.sf-url { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 12px; padding: 3px 6px; background: #f4f4f4; word-break: break-all; }
.sf-browser-body { background: #f2f2f2; padding: 14px; display: flex; justify-content: center; }
.sf-login { background: #fff; width: 100%; max-width: 360px; padding: 18px 20px 16px; box-shadow: 0 2px 6px rgba(0,0,0,.2); display: flex; flex-direction: column; gap: 8px; }
.sf-logo { font-weight: 700; font-size: 14px; padding: 2px 4px; display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; }
.sf-logo .sq { display: inline-block; width: 9px; height: 9px; } .sf-logo .sq.r { background: #f25022; } .sf-logo .sq.g { background: #7fba00; } .sf-logo .sq.b { background: #00a4ef; } .sf-logo .sq.y { background: #ffb900; }
.sf-login-h { font-size: 18px; font-weight: 600; }
.sf-hinweis { font-size: 12px; color: #404040; padding: 2px 4px; line-height: 1.4; }
.sf-feld { font-size: 13px; padding: 6px 4px; border-bottom: 1px solid #808080 !important; border-radius: 0; }
.sf-feld.sel, .sf-feld:hover { border: 2px solid #000080; }
.sf-login-btn { align-self: flex-end; background: #0067b8; color: #fff; padding: 6px 22px; font-size: 13px; margin-top: 4px; }
.sf-bereich-ok { margin: 0 0 6px; } .sf-ok { padding: 6px 12px; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; font-weight: 700; }
.sf-ok.sel { border: 2px solid #000080; background: #e6eaff; }

/* Software-Fenster: Update aufschieben, Geräte */
.up-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.up-dlg { max-width: 420px; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 4px 4px 0 rgba(0,0,0,.35); }
.up-dlg-t { background: #000080; color: #fff; font-weight: 700; padding: 3px 8px; display: flex; align-items: center; gap: 6px; }
.up-dlg.up-dringend .up-dlg-t { background: #a00000; }
.up-dlg-b { padding: 10px 12px; line-height: 1.45; }
.up-shake { animation: upshake .45s; } @keyframes upshake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .up-shake { animation: none; } }
.up-chronik { margin: 0; padding: 2px; list-style: none; max-height: 400px; overflow-y: auto; overflow-x: hidden; position: relative; scrollbar-gutter: stable; } .up-chronik li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 8px; margin: 0 0 4px; background: #fff; border: 1px solid #e0e0e0; line-height: 1.4; position: relative; }
.up-chronik li.offen { opacity: .5; } .up-chronik li.da { border-color: var(--up-f, #000080); } .up-chronik li.ende { border: 2px solid #c00000; background: #fbe9e9; font-weight: 700; }
.up-chronik li.zukunft { opacity: .85; border-style: dashed; border-color: var(--up-f, #808080); }
.up-tag { flex: 0 0 auto; font-family: var(--mono); font-size: 11px; background: var(--up-f, #000080); color: #fff; padding: 1px 5px; }
/* Belohnung: die verhinderten Tage fliegen davon, Splitter in den Tagesfarben, dann der Stempel */
.up-chronik.up-boom { overflow: hidden; animation: upFlash .9s ease-out; }
@keyframes upFlash { 0% { background: #fff; } 25% { background: #d8f5d8; } 100% { background: transparent; } }
.up-chronik li.boom { animation: upBoom .7s cubic-bezier(.3, .7, .6, 1) forwards; z-index: 2; }
@keyframes upBoom { 0% { transform: none; opacity: 1; } 18% { transform: scale(1.12); opacity: 1; } 100% { transform: translate(var(--dx, 120px), var(--dy, -60px)) rotate(var(--rot, 30deg)) scale(.3); opacity: 0; } }
.up-frag { position: absolute; width: 7px; height: 7px; border: 1px solid rgba(0,0,0,.4); opacity: 0; animation: upFrag .8s ease-out forwards; pointer-events: none; }
@keyframes upFrag { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(270deg); opacity: 0; } }
.up-stempel { display: inline-block; margin: 0 0 8px; padding: 6px 14px; border: 3px double #008000; color: #008000; font-weight: 700; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; transform: rotate(-4deg); background: rgba(255,255,255,.7); animation: upStempel .45s cubic-bezier(.2, 1.4, .5, 1) both; }
.up-stempel small { display: block; font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 400; }
@keyframes upStempel { 0% { transform: rotate(-14deg) scale(2.4); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-4deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .up-chronik.up-boom, .up-chronik li.boom, .up-frag, .up-stempel { animation: none; } .up-chronik li.boom { opacity: 0; } }
.up-ende { padding: 8px 10px; margin: 0 0 8px; border: 2px solid; line-height: 1.45; } .up-ende.gruen { background: #e8f6e8; border-color: #008000; } .up-ende.gelb { background: #fff8dc; border-color: #d8a800; } .up-ende.rot { background: #fbe9e9; border-color: #c00000; }
.up-tab { border-collapse: collapse; width: 100%; margin: 0 0 8px; font-size: 11px; } .up-tab th { text-align: left; padding: 3px 5px; background: #f4f6fa; border-bottom: 1px solid #c0c0c0; font-weight: 400; } .up-tab td { padding: 3px 5px; border-bottom: 1px solid #e8e8e8; vertical-align: top; }
.up-tab tr[data-up-g] { cursor: default; } .up-tab tr[data-up-g]:hover td { background: #f4f6ff; } .up-tab tr.sel td { background: #e6eaff; }
.up-ampel { display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(0,0,0,.4); vertical-align: -2px; } .up-ampel.gruen { background: #008000; } .up-ampel.gelb { background: #d8a800; } .up-ampel.rot { background: #c00000; }
.up-info { padding: 8px 10px; border: 1px solid; border-left-width: 6px; background: #fff; line-height: 1.45; } .up-info.gruen { border-color: #008000; } .up-info.gelb { border-color: #d8a800; } .up-info.rot { border-color: #c00000; }
/* Virenschutz: Ein Klick, zwei Konten */
.re-situation { padding: 8px 10px; background: #ffffe1; border: 1px solid #c8a000; margin: 0 0 8px; line-height: 1.45; }
.re-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.re-spalte h3 { margin: 0 0 6px; font-size: 13px; } .re-spalte.admin h3 { color: #a00000; }
.re-spalte ol { margin: 0; padding-left: 22px; } .re-spalte li { margin: 0 0 6px; padding: 4px 8px; background: #fff; border: 1px solid #e0e0e0; line-height: 1.4; opacity: .35; transition: opacity .3s; }
.re-spalte li.da { opacity: 1; border-color: #000080; } .re-spalte.admin li.da { border-color: #a00000; }
.re-spalte li.re-ende { font-weight: 700; border-width: 2px; } .re-spalte li.re-ende.gruen.da { background: #e8f6e8; border-color: #008000; } .re-spalte li.re-ende.rot.da { background: #fbe9e9; border-color: #c00000; }
/* Internet Explorer: Schreckseite */
.ie-schreck { flex: 1 1 auto; min-height: 0; overflow: auto; background: #b00000; color: #fff; font-family: Arial, Helvetica, sans-serif; display: flex; flex-direction: column; }
.schreck-kopf { background: #700000; font-weight: 700; font-size: 18px; text-align: center; padding: 10px; letter-spacing: 1px; animation: schreckblink 1s steps(1) infinite; }
@keyframes schreckblink { 50% { background: #ff2020; } } @media (prefers-reduced-motion: reduce) { .schreck-kopf { animation: none; } }
.schreck-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; gap: 10px; }
.schreck-dlg { background: #f0f0f0; color: #000; width: 100%; max-width: 440px; border: 1px solid #404040; box-shadow: 6px 6px 0 rgba(0,0,0,.4); }
.schreck-dlg-t { background: #0067b8; color: #fff; font-weight: 700; padding: 5px 8px; display: flex; justify-content: space-between; align-items: center; } .schreck-dlg-t button { background: none; border: 0; color: #fff; font: 700 16px/1 Arial; cursor: default; }
.schreck-dlg-b { padding: 10px 12px; line-height: 1.45; } .schreck-dlg-b p { margin: 0 0 8px; }
.schreck-tel { font-size: 26px; font-weight: 700; color: #b00000; text-align: center; }
.schreck-shake { animation: upshake .45s; }
.schreck-fuss { font-size: 11px; opacity: .85; margin: 0; }
@media (max-width: 640px) { .up-zwei, .re-zwei { grid-template-columns: 1fr; } }

/* ---------- KI-Assistent (Demo) ---------- */
.ki-wrap { display: grid; grid-template-columns: 210px 1fr; gap: 10px; align-items: start; }
.ki-aufgaben { display: flex; flex-direction: column; gap: 4px; }
.ki-aufgaben .btn { text-align: left; justify-content: flex-start; }
.ki-aufgaben .btn.done::before { content: "✓ "; color: #008000; font-weight: 700; }
.ki-stand { margin: 6px 0 0; font-size: 11px; }
.ki-chat { background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #fff; padding: 10px; min-height: 300px; max-height: 440px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.ki-chat > p { margin: 0; }
.ki-msg { max-width: 94%; padding: 6px 10px; line-height: 1.45; border: 1px solid #808080; overflow-wrap: anywhere; animation: kiIn .25s ease-out; }
@keyframes kiIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ki-cursor { display: inline-block; width: .55em; height: 1em; vertical-align: -.15em; background: #000; margin-left: 1px; animation: kiBlink .8s steps(2) infinite; }
.ki-msg.bot.tippt::before { content: "Assistent schreibt …"; }
.ki-msg.user { align-self: flex-end; background: #e4ecf7; }
.ki-msg.bot { align-self: flex-start; background: #f4f4f4; }
.ki-msg.bot::before { content: "Assistent"; display: block; font-size: 11px; color: #404040; margin-bottom: 2px; }
.ki-msg.user::before { content: "Sie"; display: block; font-size: 11px; color: #404040; margin-bottom: 2px; }
.ki-denkt span { display: inline-block; font-weight: 700; animation: kiBlink 1s steps(2) infinite; }
.ki-denkt span:nth-child(2) { animation-delay: .33s; } .ki-denkt span:nth-child(3) { animation-delay: .66s; }
@keyframes kiBlink { 50% { opacity: .2; } }
.ki-mark { background: #ffd9d9; outline: 1px solid #a00000; color: #000; }
.ki-stopp { border: 2px solid #a00000; background: #fff3f3; padding: 8px 10px; line-height: 1.45; }
.ki-stopp-text { margin: 6px 0; padding: 6px 8px; background: #fff; border: 1px solid #c0c0c0; }
.ki-btns { justify-content: flex-start; margin: 0; }
.ki-urteil { padding: 8px 10px; border: 1px solid; line-height: 1.45; }
.ki-urteil.rot { background: #fbe9e9; border-color: #a00000; }
.ki-urteil.gelb { background: #fff8dc; border-color: #806000; }
.ki-urteil.gruen { background: #e8f6e8; border-color: #008000; }
.ki-doc { margin: 6px 0 0; padding: 6px 8px; background: #fff; border: 1px solid #808080; font-size: 12px; overflow-wrap: anywhere; }
.ki-doc-t { font-weight: 700; margin-bottom: 4px; }
.ki-doc p { margin: 2px 0; }
.ki-versteckt { color: #fff; background: #fff; user-select: text; }
.ki-versteckt.zeigen { color: #000; background: #fff3b0; outline: 1px solid #806000; }
.ki-tab { border-collapse: collapse; width: 100%; font-size: var(--text-size); }
.ki-tab th, .ki-tab td { border: 1px solid #c0c0c0; padding: 5px 7px; vertical-align: top; text-align: left; line-height: 1.4; }
.ki-tab thead th { background: #dfdfdf; font-weight: 700; }
.ki-tab tbody th { font-weight: 700; white-space: normal; }
.ki-tab th small { display: block; font-weight: 400; color: #404040; }
.ki-ampel { display: inline-block; width: 10px; height: 10px; border: 1px solid #000; margin-right: 6px; vertical-align: middle; }
.ki-ampel.rot { background: #c00000; } .ki-ampel.gelb { background: #e0b000; } .ki-ampel.gruen { background: #008000; }
@media (prefers-reduced-motion: reduce) { .ki-denkt span, .ki-msg, .ki-cursor { animation: none; } }
@media (max-width: 767px), (pointer: coarse) and (max-width: 1024px) {
  .ki-wrap { grid-template-columns: 1fr; }
  .ki-chat { max-height: none; min-height: 200px; }
  .up-chronik { max-height: 46vh; }
  .ki-tab thead { display: none; }
  .ki-tab tr, .ki-tab th, .ki-tab td { display: block; }
  .ki-tab tr { margin: 0 0 8px; border: 1px solid #c0c0c0; }
  .ki-tab th, .ki-tab td { border: 0; border-top: 1px solid #e0e0e0; }
  .ki-tab th { border-top: 0; background: #dfdfdf; }
  .ki-tab td::before { content: attr(data-l) ": "; font-weight: 700; }
}

/* ---------- Backup-Tresor ---------- */
.bk-tueren { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0; }
.bk-tuer { background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #fff; padding: 8px 10px; line-height: 1.4; font-size: 12px; }
.bk-tuer p { margin: 4px 0; } .bk-tuer-kopf { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; margin-bottom: 6px; } .bk-tuer-kopf small { grid-column: 2; color: #404040; }
.bk-schloss { width: 18px; height: 16px; border: 2px solid #000080; border-radius: 3px; position: relative; background: #e4ecf7; grid-row: 1 / 3; margin-top: 8px; box-sizing: border-box; }
.bk-schloss::before { content: ""; position: absolute; left: 3px; top: -10px; width: 8px; height: 10px; border: 2px solid #000080; border-bottom: 0; border-radius: 6px 6px 0 0; box-sizing: border-box; }
.bk-schwach { color: #600000; } .bk-stand { margin-top: 6px; font-size: 11px; color: #008000; font-weight: 700; }
.bk-matrix { border-collapse: collapse; width: 100%; margin: 0 0 8px; font-size: 12px; }
.bk-matrix th { text-align: left; padding: 4px 6px; background: #f4f6fa; border-bottom: 1px solid #c0c0c0; font-weight: 400; vertical-align: top; } .bk-matrix thead th { text-align: center; } .bk-matrix th small { display: block; color: #404040; font-size: 11px; }
.bk-matrix td { text-align: center; padding: 3px; border-bottom: 1px solid #e8e8e8; }
.bk-z { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 110px; padding: 4px 6px; color: #fff; border: 1px solid rgba(0,0,0,.4); cursor: default; font: inherit; line-height: 1.2; }
.bk-z.gruen { background: #008000; } .bk-z.rot { background: #c00000; } .bk-z.sel { outline: 2px solid #000; outline-offset: 1px; }
.bk-sym { font-size: 15px; font-weight: 700; } .bk-rto { font-size: 11px; }
.bk-spiel { background: #fff; border: 1px solid #808080; padding: 8px 10px; margin: 0 0 10px; line-height: 1.45; } .bk-spiel h3 { margin: 0 0 4px; } .bk-spiel p { margin: 0 0 4px; }
.bk-ablauf { margin: 6px 0; padding-left: 20px; } .bk-ablauf li { opacity: 0; transition: opacity .3s; } .bk-ablauf li.da { opacity: 1; }
.bk-urteil { padding: 8px 10px; border: 1px solid; margin-top: 6px; } .bk-urteil.gruen { background: #e8f6e8; border-color: #008000; } .bk-urteil.rot { background: #fbe9e9; border-color: #a00000; }
.bk-regler { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 6px 0; } .bk-regler label { display: grid; gap: 2px; font-size: 12px; } .bk-regler input { width: 100%; } .bk-regler span { font-weight: 700; }
.bk-vorgabe { background: #f4f6fa; border: 1px solid #b8c4d8; padding: 6px 10px; margin: 0 0 10px; line-height: 1.45; } .bk-vorgabe p { margin: 2px 0; } .bk-vorgabe ul { margin: 2px 0 2px 18px; padding: 0; } .bk-vorgabe li.ok { color: #006000; } .bk-vorgabe li.nicht { color: #800000; }
.bk-rechner { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 6px; } .bk-rechner label { font-size: 12px; } .bk-rechner input { width: 70px; margin-left: 4px; }
.bk-rechnung { background: #fff8dc; border: 1px solid #d8a800; padding: 6px 10px; margin: 0; line-height: 1.45; }
.bk-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 8px; } .bk-mini { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; background: #fff; border: 2px solid #000080; padding: 8px 10px; font-size: 12px; } .bk-mini small { grid-column: 2; color: #404040; } .bk-mini .bk-schloss { grid-row: 1 / 3; }
.bk-mini.rot { border-color: #c00000; background: #fbe9e9; } .bk-mini.rot .bk-schloss { border-color: #c00000; background: #f4c0c0; } .bk-mini.rot .bk-schloss::before { border-color: #c00000; transform: rotate(-35deg) translate(-4px, -1px); }
.bk-mini.gruen { border-color: #008000; background: #e8f6e8; animation: bkPuls .6s 2; } .bk-mini.gruen .bk-schloss { border-color: #008000; background: #c8e8c8; } .bk-mini.gruen .bk-schloss::before { border-color: #008000; }
@keyframes bkPuls { 50% { box-shadow: 0 0 0 4px rgba(0,128,0,.3); } }
.bk-angriff { margin: 0; padding: 0; list-style: none; } .bk-angriff li { display: grid; grid-template-columns: 90px 1fr; gap: 0 8px; padding: 6px 8px; margin: 0 0 4px; background: #fff; border: 1px solid #e0e0e0; line-height: 1.4; } .bk-zeit { font-family: var(--mono); font-size: 11px; color: #404040; }
.bk-folge { grid-column: 2; margin-top: 4px; padding: 4px 8px; border-left: 4px solid; } .bk-folge.rot { border-color: #c00000; background: #fbe9e9; } .bk-folge.gruen { border-color: #008000; background: #e8f6e8; font-weight: 700; }
.bk-zr-kopf { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 6px; } .bk-staende { display: flex; gap: 4px; flex-wrap: wrap; } .bk-hinweis { background: #fff8dc; border: 1px solid #d8a800; padding: 6px 10px; margin: 0 0 6px; line-height: 1.4; }
.bk-dateien { border-collapse: collapse; width: 100%; font-size: 12px; margin: 0 0 10px; } .bk-dateien th { text-align: left; padding: 3px 5px; background: #f4f6fa; border-bottom: 1px solid #c0c0c0; font-weight: 400; } .bk-dateien td { padding: 3px 5px; border-bottom: 1px solid #ececec; vertical-align: top; }
.bk-dateien tr.bk-ordner td { background: #e8e8e8; font-weight: 700; } .bk-dateien tr.bk-ordner img { vertical-align: -3px; } .bk-dateien tr.bk-fehlt td { color: #808080; } .bk-dateien .bk-tag { display: inline-block; padding: 0 5px; font-size: 11px; background: #e4ecf7; white-space: nowrap; } .bk-dateien .bk-tag.weg { background: #fbe9e9; color: #800000; } .bk-dateien .bk-tag.neu { background: #e8f6e8; color: #006000; }
.bk-dateien small { display: block; color: #404040; } .bk-dateien .btn { min-height: 0; padding: 1px 8px; }
.bk-plan { border-collapse: collapse; width: 100%; font-size: 12px; margin: 0 0 10px; } .bk-plan th, .bk-plan td { text-align: left; padding: 3px 6px; border-bottom: 1px solid #e0e0e0; vertical-align: top; } .bk-plan thead th { background: #f4f6fa; font-weight: 400; }
.bk-protokoll { margin: 0; padding: 0; list-style: none; } .bk-protokoll li { padding: 4px 8px; background: #fff; border: 1px solid #e0e0e0; margin: 0 0 3px; font-size: 12px; line-height: 1.4; } .bk-protokoll .bk-zeit { margin-right: 8px; }
.bk-pruef { display: grid; grid-template-columns: 300px 1fr; gap: 12px; align-items: start; margin: 0 0 10px; }
.bk-vm { width: 300px; aspect-ratio: 4 / 3; background: #000; color: #c0c0c0; border: 6px solid #808080; border-radius: 4px; box-shadow: inset 0 0 0 2px #404040; font-family: var(--mono); font-size: 11px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.bk-vm pre { margin: 0; padding: 8px; align-self: flex-start; width: 100%; white-space: pre-wrap; box-sizing: border-box; } .bk-vm-aus { color: #606060; }
.bk-vm.logo { background: #000080; } .bk-logo { text-align: center; color: #fff; font-family: var(--ui-font); font-size: 18px; } .bk-logo b { font-size: 30px; display: block; } .bk-logo small { display: block; font-size: 11px; margin-top: 10px; color: #c0c0c0; }
.bk-vm.login, .bk-vm.foto { background: #008080; } .bk-login { background: #c0c0c0; color: #000; font-family: var(--ui-font); font-size: 11px; border: 2px solid; border-color: #fff #000 #000 #fff; width: 210px; padding: 0 0 8px; } .bk-login-t { background: #000080; color: #fff; font-weight: 700; padding: 2px 6px; margin-bottom: 8px; } .bk-login label { display: flex; justify-content: space-between; align-items: center; padding: 2px 8px; gap: 6px; } .bk-login label span { background: #fff; border: 1px solid #808080; padding: 0 4px; min-width: 90px; text-align: left; } .bk-login-ok { margin: 8px auto 0; width: 60px; text-align: center; border: 2px solid; border-color: #fff #000 #000 #fff; background: #c0c0c0; }
.bk-vm.foto::after { content: ""; position: absolute; inset: 0; background: #fff; animation: bkFlash .5s ease-out forwards; } .bk-foto { position: absolute; bottom: 6px; left: 6px; right: 6px; background: #fff; color: #000; font-family: var(--ui-font); font-size: 11px; padding: 3px 6px; border: 1px solid #000; z-index: 2; }
@keyframes bkFlash { from { opacity: 1; } to { opacity: 0; } }
.bk-vlog { font-family: var(--mono); font-size: 12px; margin: 0; min-height: 70px; white-space: pre-wrap; background: #fff; border: 1px solid #c0c0c0; padding: 6px; }
.bk-kalender { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 0 0 6px; } .bk-kw { border: 1px solid rgba(0,0,0,.4); background: #008000; color: #fff; font: inherit; font-size: 10px; padding: 4px 2px; text-align: center; cursor: default; } .bk-kw.fehler { background: #c00000; } .bk-kw.sel { outline: 2px solid #000; outline-offset: 1px; } .bk-kw b { display: block; font-size: 13px; }
.bk-kal-info { padding: 6px 10px; border: 1px solid; margin: 0 0 10px; line-height: 1.45; } .bk-kal-info.ok { background: #e8f6e8; border-color: #008000; } .bk-kal-info.fehler { background: #fbe9e9; border-color: #a00000; }
@media (prefers-reduced-motion: reduce) { .bk-mini.gruen { animation: none; } .bk-vm.foto::after { display: none; } .bk-ablauf li { transition: none; } }
@media (max-width: 767px), (pointer: coarse) and (max-width: 1024px) {
  .bk-tueren, .bk-minis, .bk-regler, .bk-pruef { grid-template-columns: 1fr; }
  .bk-vm { width: 100%; max-width: 300px; }
  .bk-kalender { grid-template-columns: repeat(6, 1fr); }
  .bk-matrix { font-size: 11px; } .bk-matrix th small { display: none; } .bk-z { min-width: 0; padding: 3px 4px; } .bk-rto { display: none; }
  .bk-angriff li { grid-template-columns: 1fr; } .bk-folge { grid-column: 1; }
  .bk-dateien th:nth-child(4), .bk-dateien td:nth-child(4) { display: none; }
}

/* ===== Sicher daheim: Nachrichten-App, Fake-Shop, Anruf, Codewort, Checkliste, Aushang ===== */
.na-body { padding: 0; display: flex; flex-direction: column; min-height: 0; }
.na { display: flex; flex: 1 1 auto; min-height: 0; height: 100%; background: #fff; }
.na-liste { flex: 0 0 260px; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #c0c0c0; background: #f7f7f7; }
.na-liste > [data-na-liste] { flex: 1 1 auto; overflow: auto; min-height: 0; }
.na-kopf { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #075e54; color: #fff; min-height: 42px; box-sizing: border-box; }
.na-kopf .muted { color: #d8f0e8; font-size: 11px; margin-left: auto; }
.na-kopf small { display: block; font-size: 11px; opacity: .85; font-weight: 400; }
.na-back { display: none; }
.na-fuss { padding: 6px; border-top: 1px solid #c0c0c0; font-size: 11px; display: flex; align-items: center; flex-wrap: wrap; }
.na-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid #e4e4e4; padding: 8px 10px; font: inherit; color: #000; cursor: default; }
.na-item:hover, .na-item:focus { background: #eef3f0; outline: none; }
.na-item.cur { background: #e2efe9; }
.na-avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #cfd8dc; color: #37474f; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.na-mitte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.na-mitte b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.na-mitte small { color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.na-rechts { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.na-rechts small { color: #777; font-size: 11px; }
.na-neu { font-style: normal; background: #25d366; color: #fff; border-radius: 10px; font-size: 10px; min-width: 16px; height: 16px; line-height: 16px; text-align: center; padding: 0 4px; }
.na-mark { font-style: normal; font-weight: 700; font-size: 13px; } .na-mark.ok { color: #008000; } .na-mark.falsch { color: #a00000; }
.na-chat { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.na-verlauf { flex: 1 1 auto; overflow: auto; min-height: 0; padding: 10px 12px; background: #e5ddd5; display: flex; flex-direction: column; gap: 6px; }
.na-verlauf > p.muted { background: #fff8e1; color: #333; padding: 8px 10px; margin: 0; border-radius: 6px; align-self: center; max-width: 36em; }
.na-tag { align-self: center; background: #d4ebf2; color: #333; font-size: 11px; padding: 2px 8px; border-radius: 6px; margin-bottom: 4px; }
.na-msg { max-width: 82%; padding: 6px 9px; border-radius: 8px; line-height: 1.4; box-shadow: 0 1px 0 rgba(0,0,0,.15); overflow-wrap: anywhere; }
.na-msg.er { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
.na-msg.sie { align-self: flex-end; background: #dcf8c6; border-top-right-radius: 0; }
.na-frage { align-self: stretch; background: #fff; border: 1px solid #c0c0c0; padding: 8px 10px; margin-top: 6px; }
.na-folge { align-self: stretch; padding: 8px 10px; border: 1px solid; line-height: 1.45; margin-top: 6px; background: #fff; }
.na-folge.ok { border-color: #008000; background: #eaf6ea; } .na-folge.falsch { border-color: #a00000; background: #fbe9e9; }
.na-folge ul { margin: 6px 0 0; padding-left: 18px; } .na-folge li { margin: 0 0 3px; }
@media (max-width: 599px) {
  .na-liste { flex: 1 1 auto; border-right: 0; } .na-chat { display: none; }
  .na.offen .na-liste { display: none; } .na.offen .na-chat { display: flex; } .na.offen .na-back { display: inline-flex; }
}
/* Fake-Shop (nachgebaute Seite im Internet Explorer) */
.ie-extra { flex: 1 1 auto; min-height: 0; overflow: auto; background: #fff; }
.fs-wrap { display: flex; flex-direction: column; min-height: 100%; }
.fs { flex: 1 1 auto; font-family: Arial, Helvetica, sans-serif; color: #222; font-size: 13px; }
.fs [data-fs] { cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; }
.fs [data-fs]:hover { outline-color: #ffb300; }
.fs .fs-found { outline: 2px dashed #a00000 !important; background-color: #fff3f3; }
.fs-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #ddd; flex-wrap: wrap; }
.fs-logo { font-weight: 900; font-size: 20px; letter-spacing: .04em; color: #111; } .fs-logo small { display: block; font-weight: 400; font-size: 11px; color: #777; letter-spacing: 0; }
.fs-nav { color: #555; font-size: 12px; }
.fs-banner { background: #e53935; color: #fff; font-weight: 700; padding: 8px 16px; text-align: center; }
.fs-banner [data-fs] { background: #b71c1c; padding: 2px 8px; border-radius: 3px; font-weight: 400; display: inline-block; }
.fs-main { display: flex; gap: 20px; padding: 18px 16px; flex-wrap: wrap; }
.fs-bild { flex: 1 1 220px; max-width: 320px; background: #f3f3f3; border: 1px solid #ddd; padding: 20px; box-sizing: border-box; } .fs-bild svg { width: 100%; height: auto; }
.fs-info { flex: 1 1 240px; min-width: 0; } .fs-info h2 { margin: 0 0 8px; font-size: 20px; }
.fs-preis { font-size: 16px; margin: 0 0 8px; display: inline-block; } .fs-preis b { font-size: 26px; color: #e53935; } .fs-preis s { color: #888; } .fs-rot { color: #e53935; font-weight: 700; font-size: 12px; margin-left: 6px; }
.fs-text { margin: 0 0 8px; line-height: 1.45; }
.fs-zahlung { margin: 0 0 10px; padding: 6px 8px; background: #fff8e1; border: 1px solid #ffe082; display: inline-block; }
.fs-kauf { display: block; background: #ff9800; color: #fff; border: 0; font: inherit; font-weight: 700; font-size: 16px; padding: 10px 24px; margin: 0 0 10px; cursor: pointer; border-radius: 3px; } .fs-kauf:hover { background: #fb8c00; }
.fs-siegel { display: inline-block; border: 2px solid #43a047; color: #2e7d32; font-weight: 700; padding: 6px 10px; border-radius: 4px; font-size: 12px; line-height: 1.3; } .fs-siegel small { font-weight: 400; color: #555; }
.fs-bew { padding: 0 16px 14px; } .fs-bew h3 { font-size: 15px; margin: 0 0 8px; } .fs-bewertung { background: #fafafa; border: 1px solid #eee; padding: 6px 10px; margin: 0 0 6px; line-height: 1.4; } .fs-sterne { color: #fbc02d; letter-spacing: 1px; }
.fs-foot { border-top: 1px solid #ddd; padding: 10px 16px; color: #777; font-size: 12px; } .fs-foot span { text-decoration: underline; }
.fs-panel { position: sticky; bottom: 0; background: #ffffe1; border-top: 2px solid #c8a000; padding: 8px 12px; font-size: var(--ui-size); line-height: 1.4; display: flex; flex-direction: column; gap: 4px; }
.fs-erkl { min-height: 1.3em; }
/* Der Anruf */
.an { display: flex; flex-direction: column; gap: 8px; padding: 10px; height: 100%; box-sizing: border-box; min-height: 0; }
.an-kopf { display: flex; gap: 10px; align-items: center; background: #1b1b1b; color: #fff; padding: 8px 10px; flex: 0 0 auto; } .an-kopf small { display: block; font-size: 11px; opacity: .8; } .an-kopf b { display: block; font-size: 15px; } .an-kopf .muted { color: #bbb; font-size: 11px; }
.an-verlauf { flex: 1 1 auto; min-height: 120px; overflow: auto; background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #fff; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.an-tag { align-self: center; font-size: 11px; color: #555; background: #eee; padding: 2px 8px; }
.an-msg { max-width: 88%; padding: 6px 9px; line-height: 1.45; border: 1px solid #808080; } .an-msg small { display: block; font-size: 11px; color: #404040; }
.an-msg.er { align-self: flex-start; background: #f4f4f4; } .an-msg.sie { align-self: flex-end; background: #e4ecf7; }
.an-ende { align-self: stretch; padding: 8px 10px; border: 1px solid; line-height: 1.45; } .an-ende.gut { background: #e8f6e8; border-color: #008000; } .an-ende.mittel { background: #fff8e1; border-color: #c8a000; } .an-ende.schlecht { background: #fbe9e9; border-color: #a00000; }
.an-antworten { flex: 0 0 auto; } .an-wahl { display: flex; flex-direction: column; gap: 6px; }
.an-wartet { padding: 10px 4px; min-height: 2.6em; font-style: italic; }
.an-msg, .an-ende, .na-folge { animation: anEin .3s ease-out; }
@keyframes anEin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .an-msg, .an-ende, .na-folge { animation: none; } }
@media (max-width: 599px) { .an { padding: 6px; gap: 6px; } .an-kopf { padding: 6px 8px; } .an-kopf .ico32 { display: none; } .an-verlauf { min-height: 90px; } }
/* Einstiegsmeldung: Hilde, Sabine und Lukas als Pixelgrafik (img/familie.png, 96 x 36, dreifach vergrößert); auf sehr
   niedrigen Bildschirmen ausgeblendet, damit der Knopf ohne Wischen sichtbar bleibt */
.intro-familie { text-align: center; margin: 10px 0 0; }
.intro-familie img { width: 288px; max-width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
@media (max-height: 700px) { .intro-familie { display: none; } }
/* Vollbild-Meldung am Handy (msgbox mit cls: 'vollbild'): füllt den Desktop samt Visitenkarte, Text oben, Grafik unten, Knopf darunter */
@media (max-width: 599px), (pointer: coarse) and (max-height: 500px) {
  .win.dialog.vollbild { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-height: none; }
  .win.dialog.vollbild .winbody { display: flex; flex-direction: column; }
  .win.dialog.vollbild .dlg { flex: 1 1 auto; min-height: 0; }
  .win.dialog.vollbild .dlg .row { flex: 1 1 auto; min-height: 0; overflow: auto; align-items: stretch; }
  .win.dialog.vollbild .dlg .row > div { display: flex; flex-direction: column; }
  .win.dialog.vollbild .intro-familie { margin-top: auto; padding-top: 12px; }
}
/* Familien-Codewort */
.cw { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.cw-liste { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 6px 0; }
.cw-wort { background: #fff; border: 2px solid #000080; padding: 8px 14px; font-size: 18px; font-weight: 700; font-family: var(--mono); }
/* Checkliste Familiengeräte */
.fc-liste { padding-left: 0; list-style: none; margin: 0 0 12px; }
.fc-liste li { margin: 0 0 6px; }
.fc-punkt { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; background: #fff; border: 1px solid #c0c0c0; line-height: 1.4; cursor: default; }
.fc-punkt input { margin: 3px 0 0; flex: 0 0 auto; } .fc-punkt.ok { background: #eaf6ea; border-color: #008000; } .fc-punkt.ok span { color: #405040; }
.fc-stand { background: #ffffe1; border: 1px solid #c8a000; padding: 6px 10px; display: inline-block; font-weight: 700; margin: 0; }
.fc-kopf { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 12px; }
/* Aushang A4 */
.cert-poster { justify-content: flex-start; gap: .45em; }
.cert-poster .cert-logo { height: 4.2em; margin: 0 auto .2em; }
.poster-kick { font-size: 1.15em; letter-spacing: .12em; text-transform: uppercase; color: #000080; }
.poster-h { font-family: Georgia, "Times New Roman", serif; font-size: 4.8em; margin: .05em 0; line-height: 1; color: #000080; font-weight: 700; }
.poster-sub { font-size: 1.4em; margin: 0 auto .3em; max-width: 26em; line-height: 1.35; }
.poster-mitte { display: flex; gap: 1.6em; align-items: center; text-align: left; margin: .3em 0 .4em; width: 100%; }
.poster-module { flex: 1 1 auto; margin: 0; padding: 0; list-style: none; font-size: 1.3em; line-height: 1.55; } .poster-module li { position: relative; padding-left: 1.3em; } .poster-module li::before { content: '✓'; position: absolute; left: 0; color: #008000; font-weight: 700; }
.poster-qrbox { flex: 0 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .3em; } .poster-qr { width: 13em; height: 13em; border: .15em solid #000080; padding: .35em; background: #fff; box-sizing: border-box; } .poster-qrbox b { font-size: 1.6em; color: #000080; } .poster-qrbox small { font-size: .95em; color: #404040; }
.poster-fakten { font-size: 1.15em; line-height: 1.45; margin: 0 auto .3em; max-width: 32em; }
.poster-fuss { margin-top: auto; border-top: 1px solid #000080; padding-top: .6em; font-size: .95em; line-height: 1.4; width: 100%; } .poster-fuss span { color: #404040; font-size: .9em; }

.btn[aria-pressed="true"] { background: #000080; color: #fff; }
.tel-bar .btn { padding: .35em .7em; font-size: .9rem; }
.szene-bar .btn { padding: .3em .7em; font-size: .9rem; }