/* ============ Programme ============ */
.selectable{user-select:text;cursor:text}
tt,.mono{font-family:var(--mono)}

/* Editor */
.np-area{flex:1;width:100%;font-family:var(--mono);font-size:13px;line-height:1.35;white-space:pre-wrap;padding:4px 6px;user-select:text}

/* Dokumentanzeige */
.dv-tb select{height:20px;font-size:11px}
.dv-tb .dv-b{min-width:22px;padding:0 4px}
.dv-ruler{height:14px;flex:none;margin:2px 0;background:repeating-linear-gradient(90deg,#fff 0 9px,#808080 9px 10px) 0 6px/100% 8px no-repeat,#fff;box-shadow:var(--thin-in)}
.dv-scroll{flex:1;overflow:auto;background:#808080;box-shadow:var(--sunken);padding:16px}
.dv-page{background:#fff;max-width:640px;margin:0 auto;padding:36px 46px;font-family:"Times New Roman",Times,serif;font-size:15px;line-height:1.45;box-shadow:3px 3px 0 #404040;color:#000;min-height:100%}
.dv-page h2{font-size:20px;margin:0 0 10px}
.dv-page h3{font-size:16px;margin:16px 0 6px}

.iv-wrap{flex:1;background:#808080;box-shadow:var(--sunken);display:flex;align-items:center;justify-content:center;overflow:auto;padding:10px}

/* Hilfe */
.help{padding:10px 14px;overflow:auto;line-height:1.5;background:#fff;box-shadow:var(--sunken);flex:1;font-size:12px}
.help h2{display:flex;align-items:center;gap:8px;margin:2px 0 8px;font-size:16px;color:#000080}
.help h3{margin:12px 0 4px;font-size:13px}
.help-note{background:#ffffe1;border:1px solid #808080;padding:6px}

/* Lektion */
.lesson{padding:10px 12px 4px;line-height:1.45;font-size:12px}
.ls-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.ls-badge{width:66px;height:66px;flex:none;background:#000080;color:#ffff00;text-align:center;font-weight:bold;font-size:10px;padding-top:10px;box-shadow:var(--raised);border:2px solid #ffd800}
.ls-badge b{font-size:26px;color:#fff;display:block}
.ls-act{color:#808080;font-size:11px}
.ls-title{font-size:18px;font-weight:bold;color:#000080}
.ls-box{background:#fff;box-shadow:var(--sunken);padding:8px 10px;margin-bottom:7px}
.ls-box.big{display:flex;gap:10px;background:#ffffe1;font-size:13px}
.ls-box ul{margin:4px 0 0 0;padding-left:20px}

/* Mail */
.pb-main{flex:1;display:flex;gap:3px;min-height:0;margin-top:2px}
.pb-folders{width:170px;flex:none;overflow:auto;padding:4px}
.pb-root{padding:2px 2px 4px;display:flex;align-items:center;gap:4px}
.pb-fold{display:flex;align-items:center;gap:4px;padding:3px 4px 3px 14px;white-space:nowrap}
.pb-fold.on span{background:var(--sel);color:#fff;padding:0 2px}
.pb-right{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.pb-list{height:38%;min-height:90px;overflow:auto}
.pb-t{width:100%;border-collapse:collapse;table-layout:fixed}
.pb-t th{position:sticky;top:0;background:var(--face);box-shadow:var(--raised);font-weight:normal;text-align:left;padding:2px 4px;white-space:nowrap}
.pb-t td{padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-t td svg{vertical-align:-3px}
.pb-t tr.un td{font-weight:bold}
.pb-t tr.on td{background:var(--sel);color:#fff}
.pb-prev{flex:1;overflow:auto;min-height:0}
.pb-empty{text-align:center;color:#808080;padding-top:40px}
.mv-wrap{flex:1;overflow:auto;background:#fff;box-shadow:var(--sunken)}
.mv-head{background:var(--face);padding:6px 8px;box-shadow:inset 0 -1px #808080}
.mv-head td{padding:1px 6px 1px 0;vertical-align:top}
.mv-body{padding:10px 14px;font-family:Arial,sans-serif;font-size:13px;line-height:1.5}
.mv-body p{margin:0 0 9px}
.mail-btn{display:inline-block;background:#1c5fc4;color:#fff!important;padding:6px 14px;text-decoration:none;font-weight:bold;border:2px outset #6aa0ff;font-family:Arial;cursor:pointer}
.mail-btn:active{border-style:inset}
.mail-att{display:inline-flex;align-items:center;gap:4px;padding:1px 4px;margin-right:6px;cursor:pointer;color:#0000ee;text-decoration:underline}
.mail-att:hover{background:#ffffe1}

/* Browser */
.br-tb{position:relative;padding-right:56px}
.br-tb .tbtn{font-size:11px}
.lupa-btn.on{box-shadow:var(--thin-in);background:#ffffe1}
.br-throb{position:absolute;right:2px;top:2px;bottom:2px;width:48px;background:#000;box-shadow:var(--thin-in);display:flex;align-items:center;justify-content:center;overflow:hidden}
.br-throb.on .br-throb-in{animation:throb .9s linear infinite}
@keyframes throb{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.85)}100%{transform:rotate(360deg) scale(1)}}
.br-addr{display:flex;align-items:center;gap:4px;padding:3px 2px;flex:none;box-shadow:inset 0 -1px #808080,inset 0 1px #fff}
.br-url-wrap{flex:1;display:flex;align-items:center;height:22px;padding-left:3px;gap:2px}
.br-url-wrap svg{width:14px;height:14px}
.br-url,.ex-path{flex:1;box-shadow:none!important;height:18px!important;padding:1px 3px}
.br-go{min-width:0;padding:0 8px;height:22px}
.br-main{flex:1;display:flex;gap:3px;min-height:0;margin-top:2px}
.br-side{width:200px;flex:none;overflow:auto}
.br-side-h{display:flex;justify-content:space-between;padding:3px 5px;background:var(--face);box-shadow:var(--thin-out)}
.br-side-x{cursor:pointer}
.br-side-d{padding:4px;display:flex;gap:4px;align-items:center}
.br-side-i{padding:2px 4px 2px 16px;display:flex;gap:4px;align-items:center;color:#0000ee;cursor:pointer;white-space:nowrap}
.br-side-i:hover{text-decoration:underline}
.br-view{flex:1;overflow:auto;background:#fff;position:relative}
.webpage.loading{animation:pageload .7s steps(7) both}
@keyframes pageload{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* Explorer */
.ex-main{flex:1;display:flex;min-height:0;gap:0;margin-top:2px}
.ex-left{width:180px;flex:none;background:linear-gradient(180deg,#fff 0,#fff 40%,#dfe8f5 100%);box-shadow:var(--sunken);padding:12px 10px;overflow:auto;line-height:1.4}
.ex-l-name{font-family:"Arial Black",Arial;font-size:17px;margin:4px 0 6px;word-break:break-word}
.ex-l-bar{height:3px;background:linear-gradient(90deg,#000080,#1084d0,#ffd800,transparent);margin-bottom:10px}
.ex-l-hint{color:#555}
.ex-view{flex:1;overflow:auto;display:flex;flex-wrap:wrap;align-content:flex-start;gap:2px;padding:6px}
.ex-item{width:84px;height:76px;display:flex;flex-direction:column;align-items:center;padding-top:4px;text-align:center;outline:none}
.ex-item span{margin-top:3px;padding:0 2px;line-height:12px;word-break:break-word;max-width:82px}
.ex-item.sel span{background:var(--sel);color:#fff}
.ex-item.sel svg{filter:brightness(.6) sepia(1) hue-rotate(185deg) saturate(5)}
.ex-item.hid{opacity:.55}
.ex-empty{color:#808080;padding:10px}
.props{line-height:1.6}
.props-top{display:flex;gap:12px;align-items:center}
.props-top input{flex:1}
.props td:first-child{width:80px;color:#000}
.props-warn{background:#ffe9e9;border:1px solid #c00;padding:6px;margin-top:6px;display:flex;gap:6px;line-height:1.35}
.props-warn svg{flex:none}

/* Terminal */
.term{flex:1;background:#000;color:#c0c0c0;font-family:var(--mono);font-size:13px;line-height:1.3;padding:6px;overflow:auto;box-shadow:var(--sunken);position:relative;user-select:text}
.term-out div{white-space:pre-wrap;word-break:break-word}
.term-out .err{color:#ff5555}
.term-out .hit{color:#55ff55}
.term-line{display:flex}
.term-pr{white-space:pre}
.term-in{flex:1;background:transparent;border:0;outline:none;color:#fff;font:inherit;padding:0;caret-color:#fff}
.term-mx{position:absolute;inset:0;width:100%;height:100%}

/* Fall 017 */
.cs-head{display:flex;align-items:center;gap:10px;padding:6px 8px;background:#e9cf98;border:1px solid #8a6a2a;margin-bottom:6px;position:relative;font-size:12px}
.cs-sub{color:#5a3d10}
.cs-stamp{position:absolute;right:12px;top:6px;border:3px double #c00;color:#c00;font-weight:bold;font-size:11px;text-align:center;padding:1px 6px;transform:rotate(-8deg);font-family:"Courier New";line-height:1.1}
.cs-panel{line-height:1.45}
.cs-chap{font-family:"Arial Black",Arial;color:#000080;font-size:13px;margin-bottom:4px}
.cs-goal{font-size:13px;margin:2px 0 6px}
.cs-hint{background:#ffffe1;border:1px solid #c0a000;padding:5px 7px;margin:0 0 6px}
.cs-secret{background:#000;color:#ffd800;padding:8px}
.cs-ev{display:flex;gap:8px;height:100%;min-height:260px}
.cs-evlist{width:48%;overflow:auto;padding:2px}
.cs-evi{display:flex;gap:5px;align-items:center;padding:3px 4px;white-space:nowrap;overflow:hidden}
.cs-evi span{overflow:hidden;text-overflow:ellipsis}
.cs-evi.on{background:var(--sel);color:#fff}
.cs-evd{flex:1}
.cs-evc{text-align:center;padding-top:50px;color:#555}
.cs-card{background:#fffbe0;border:1px solid #b09040;padding:12px;box-shadow:3px 3px 0 rgba(0,0,0,.25);transform:rotate(-1deg);font-size:12px}
.cs-card.log{background:#eef}
.cs-card.talk{background:#efe}
.cs-card.secret{background:#222;color:#ffd800}
.cs-card-k{font-size:9px;letter-spacing:2px;color:#a00;font-weight:bold;margin-bottom:3px}
.cs-card p{margin:6px 0}
.cs-card small{color:#666}
.cs-prog{display:flex;gap:12px}
.cs-chaps{width:46%}
.cs-ch{padding:3px 4px;display:flex;gap:6px}
.cs-ch.done{color:#006000}
.cs-ch.cur{background:#ffffe1;font-weight:bold}
.cs-ch.lock{color:#808080}
.cs-meters{flex:1}
.cs-meter{margin-bottom:12px}
.cs-ml{display:flex;justify-content:space-between;margin-bottom:2px}
.cs-meter small{color:#555}

/* Banner (gemeinsam) */
.pl-banner{display:flex;gap:10px;align-items:center;padding:6px 8px;background:linear-gradient(90deg,#000080,#1084d0);color:#fff;margin-bottom:4px;flex:none;line-height:1.4}
.pl-banner small{color:#cfe0ff}
.wl-count{margin-left:auto;background:#000;color:#0f0;font-family:var(--mono);font-size:20px;padding:2px 10px;box-shadow:var(--sunken)}

/* PhishLab */
.pl-main{flex:1;display:flex;gap:6px;min-height:0}
.pl-form{width:46%;overflow:auto;padding-right:4px}
.pl-form fieldset{margin:2px 0 6px;padding:8px 8px 6px}
.pl-opt{display:flex;align-items:flex-start;padding:2px 0;line-height:1.3}
.pl-opt input{margin-top:1px}
.pl-opt.lock{color:#808080}
.pl-opt small{display:block;color:#a00;font-size:10px}
.pl-right{flex:1;display:flex;flex-direction:column;min-width:0}
.pl-prev{flex:1;overflow:auto;background:#808080;box-shadow:var(--sunken);padding:10px}
.pl-mail{background:#fff;border:1px solid #000;font-family:Arial;font-size:12px}
.pl-mh{background:#ece9d8;padding:6px;border-bottom:1px solid #999;line-height:1.5}
.pl-mb{padding:10px;line-height:1.5}
.pl-actions{padding-top:6px;text-align:right}
.pl-sim{flex:1;display:flex;flex-direction:column;gap:6px;overflow:auto}
.pl-screen{position:relative;background:#008080;box-shadow:var(--sunken);padding:8px;min-height:230px;overflow:hidden}
.pl-sbar{background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-weight:bold;padding:2px 4px;display:flex;gap:4px;align-items:center}
.pl-inbox{background:#fff}
.pl-row{padding:3px 6px;border-bottom:1px solid #ddd}
.pl-row.new{background:#ffffcc;animation:newblink .4s steps(1) 4}
.pl-open{margin-top:6px}
.pl-cursor{position:absolute;left:70%;top:80%;transition:left .6s ease,top .6s ease;z-index:5;pointer-events:none}
.pl-report{display:inline-block;margin-left:10px;padding:5px 10px;border:2px outset #ccc;background:#eee}
.pl-b.hit,.pl-report.hit{outline:3px solid #ff0;outline-offset:2px}
.pl-screen.fakeopen::after{content:"🎣 Fake-Seite geöffnet!";position:absolute;inset:0;background:rgba(200,0,0,.85);color:#fff;font:bold 22px Arial;display:flex;align-items:center;justify-content:center;animation:balloonIn .3s steps(3)}
.pl-martin{display:flex;gap:8px;align-items:flex-start}
.pl-think{flex:1;background:#fff;border:2px solid #000;border-radius:14px;padding:8px 12px;min-height:40px;font-size:13px;font-style:italic;position:relative}
.pl-think::before{content:"";position:absolute;left:-10px;top:14px;width:10px;height:10px;background:#fff;border:2px solid #000;border-radius:50%}
.pl-meter{display:flex;gap:8px;align-items:center}
.pl-meter .progress{flex:1}
.pl-result{padding:8px 10px;line-height:1.45;box-shadow:var(--sunken)}
.pl-result.bad{background:#ffe9e9}
.pl-result.good{background:#e6ffe6}
.pl-result ul{margin:4px 0;padding-left:20px}

/* WebLab */
.wl-main{flex:1;display:flex;gap:8px;min-height:0}
.wl-br{flex:1;display:flex;flex-direction:column;background:#c0c0c0;box-shadow:var(--win);padding:3px}
.wl-cap{font-weight:bold;padding:2px 4px;background:#008000;color:#fff}
.wl-br.fake .wl-cap{background:#c00000}
.wl-bar{display:flex;align-items:center;gap:4px;background:#fff;box-shadow:var(--sunken);padding:3px 4px;margin:3px 0;font-family:var(--mono);font-size:11px;white-space:nowrap;overflow:hidden}
.wl-page{flex:1;background:#fff;box-shadow:var(--sunken);font-family:Arial;font-size:12px;overflow:auto}
.wl-banner{background:#c00;color:#fff;font-weight:bold;text-align:center;padding:6px}
.wl-banner.ok{background:#e5ecf4;color:#003366}
.wl-head{background:#003366;color:#fff;padding:8px;font-size:16px;display:flex;align-items:center;gap:6px}
.wl-form{padding:14px 22px;line-height:2}
.wl-in{background:#fff;border:1px solid #888;height:18px;width:170px}
.wl-in.short{width:60px}
.wl-pin{color:#c00}
.wl-btn{display:inline-block;margin-top:8px;border:2px outset #ccc;background:#ddd;padding:0 14px;line-height:22px}
.wl-foot{text-align:center;color:#888;font-size:10px;padding:6px}
.wl-certbar{padding-top:3px}
.wl-certbar button{display:inline-flex;align-items:center;gap:4px}
.wl-br.fake .wl-page,.wl-br.fake .wl-bar{cursor:crosshair}
.wl-br.fake [data-d]{position:relative}
.wl-br.fake [data-d].found{outline:3px solid #ff0000;outline-offset:2px;border-radius:2px;animation:found .5s steps(2) 3}
@keyframes found{50%{outline-color:#ffff00}}
.wl-list{height:96px;flex:none;overflow:auto;margin-top:6px;padding:4px;line-height:1.5}

/* Password Lab */
.pw-tabs{flex:none}
.pw-panel{display:flex;flex-direction:column}
.pw-pin{display:flex;gap:14px;flex:1}
.pw-left{flex:1}
.pw-right{width:220px;display:flex;flex-direction:column;align-items:center;gap:4px}
.pw-target{display:flex;gap:8px;align-items:center;background:#fff;box-shadow:var(--sunken);padding:6px;margin-bottom:10px;line-height:1.4}
.pw-odo{display:flex;gap:6px;justify-content:center;margin:6px 0 10px;flex-wrap:wrap}
.pw-dig{width:58px;height:78px;background:linear-gradient(180deg,#111 0,#2a2a2a 48%,#000 50%,#1a1a1a 100%);box-shadow:var(--sunken),inset 0 0 0 4px #222;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.pw-dig::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#000}
.pw-dig span{font-family:"Courier New",monospace;font-weight:bold;font-size:52px;color:#35ff6a;text-shadow:0 0 8px rgba(53,255,106,.7)}
.pw-odo.red .pw-dig span{color:#ff5050;text-shadow:0 0 8px rgba(255,60,60,.7)}
.pw-odo.small .pw-dig{width:22px;height:34px}
.pw-odo.small .pw-dig span{font-size:20px}
.pw-odo.win .pw-dig{animation:winflash .25s steps(1) 8}
.pw-odo.win .pw-dig span{color:#ffff00}
@keyframes winflash{50%{background:#205020}}
.pw-odo.locked{filter:grayscale(1) brightness(.6)}
.pw-stats{display:flex;gap:6px;margin-bottom:8px}
.pw-stats>div{flex:1;background:#000;color:#0f0;box-shadow:var(--sunken);padding:4px 6px;font-family:var(--mono)}
.pw-stats small{display:block;color:#7fbf7f;font-family:var(--ui);font-size:10px}
.pw-stats b{font-size:17px}
.pw-est{margin-top:4px;color:#000080}
.pw-gridcap{font-size:10px;color:#555}
.pw-grid{width:200px;height:200px;image-rendering:pixelated;box-shadow:var(--sunken);border:2px solid #000}
.pw-log{width:200px;height:170px;overflow:hidden;background:#000;color:#0a0;font-family:var(--mono);font-size:11px;padding:3px 5px}
.pw-log .ok{color:#ff0;font-weight:bold}
.pw-msg{line-height:1.45;margin-top:4px}
.pw-big{font-family:"Arial Black",Arial;font-size:17px;padding:6px 8px;margin:4px 0;box-shadow:var(--sunken)}
.pw-big.ok{background:#e6ffe6;color:#006000}
.pw-big.bad{background:#ffe9e9;color:#a00}
.pw-lockbig{display:flex;gap:10px;align-items:center;background:#c00000;color:#fff;font-family:"Arial Black",Arial;font-size:18px;padding:8px 12px;margin:4px 0;animation:shake .4s,winflash .3s steps(1) 4}
.pw-smart p,.pw-strong p{margin:0 0 8px;line-height:1.45}
.pw-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.pw-chip{background:#fff;box-shadow:var(--raised);padding:4px 8px;line-height:1.2}
.pw-chip b{font-size:14px;font-family:var(--mono)}
.pw-chip small{display:block;color:#666;font-size:10px}
.pw-chip.dossier{background:#ffffe1;outline:2px solid #c0a000}
.pw-smain{display:flex;gap:10px}
.pw-slist{width:320px;height:250px;overflow:auto;background:#000;font-family:var(--mono);font-size:14px;padding:4px 8px;color:#0c0}
.pw-cand{padding:2px 0;animation:balloonIn .15s steps(2)}
.pw-cand span{color:#666}
.pw-cand b{color:#f55}
.pw-cand.ok{color:#ff0;background:#203000}
.pw-cand.ok b{color:#ff0}
.pw-sside{flex:1}
.pw-inrow{display:flex;gap:6px;margin-bottom:6px}
.pw-in{flex:1;font-family:var(--mono)!important;font-size:14px!important;height:24px!important}
.pw-info{background:#fff;box-shadow:var(--sunken);padding:6px;line-height:1.5;margin-bottom:6px}
.pw-info .g{color:#006000}
.pw-info .r{color:#c00}
.pw-bars{margin:6px 0}
.pw-bar{display:flex;align-items:center;gap:6px;margin:3px 0}
.pw-bar span{width:130px}
.pw-bar div{flex:1;height:12px;box-shadow:var(--thin-in);background:#fff}
.pw-bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,#000080 0 6px,#1084d0 6px 8px)}
.pw-bar small{width:44px;text-align:right}
.pw-progline{display:flex;gap:8px;align-items:center}
.pw-progline .progress{flex:1}
.pw-tleft{margin:4px 0}

/* Messenger */
.ms-main{flex:1;display:flex;gap:6px;min-height:0}
.ms-left{width:190px;display:flex;flex-direction:column;gap:4px}
.ms-me{display:flex;gap:6px;align-items:center;background:linear-gradient(90deg,#ffe14a,#fff6c0);padding:4px;box-shadow:var(--thin-out)}
.ms-contacts{flex:1;overflow:auto;padding:2px}
.ms-c{display:flex;gap:6px;align-items:center;padding:4px;line-height:1.3}
.ms-c.on{background:var(--sel);color:#fff}
.ms-phone{min-height:34px;font-weight:bold}
.ms-right{flex:1;display:flex;flex-direction:column;min-width:0;gap:4px}
.ms-head{display:flex;gap:8px;align-items:center;padding:2px}
.ms-log{flex:1;overflow:auto;padding:8px;background:#fff}
.ms-b{display:flex;gap:6px;margin-bottom:8px;align-items:flex-start}
.ms-b>div{max-width:80%}
.ms-b small{color:#808080}
.ms-b p{margin:2px 0 0;background:#eef4ff;border:1px solid #9ab;padding:5px 8px;border-radius:0 8px 8px 8px;line-height:1.35;font-size:12px}
.ms-b.me{flex-direction:row-reverse}
.ms-b.me p{background:#e6ffe6;border-color:#8b8;border-radius:8px 0 8px 8px}
.ms-b.me small{display:block;text-align:right}
.ms-sys{color:#808080;text-align:center;font-style:italic}
.ms-typing{height:14px;color:#808080;font-style:italic}
.ms-qs{display:flex;flex-direction:column;gap:3px}
.ms-qs button{text-align:left;padding:3px 8px;min-height:22px}
.ph-main{flex:1;display:flex;gap:12px;padding:6px}
.ph-side{flex:1;line-height:1.45}
.ph-side h3{margin:0 0 6px;color:#000080}
.ph-rule{background:#ffffe1;border:1px solid #c0a000;padding:5px}
.ph-ctx{padding:8px;min-height:70px;margin:8px 0;background:#fff;font-size:12px}
.ph-score{margin-bottom:8px}
.ph-dev{width:210px;height:420px;background:#222;border-radius:26px;padding:42px 12px 40px;box-shadow:0 0 0 3px #555,6px 6px 0 rgba(0,0,0,.3);position:relative;flex:none}
.ph-dev.buzz{animation:buzz .35s}
@keyframes buzz{0%,100%{transform:none}20%{transform:translate(-3px,1px) rotate(-1deg)}40%{transform:translate(3px,-1px) rotate(1deg)}60%{transform:translate(-3px,0)}80%{transform:translate(3px,1px)}}
.ph-scr{height:100%;background:linear-gradient(180deg,#2b6fd6,#7ec0ff);position:relative;overflow:hidden;display:flex;flex-direction:column}
.ph-stat{display:flex;justify-content:space-between;color:#fff;font-weight:bold;padding:3px 6px;background:rgba(0,0,0,.25)}
.ph-wall{position:absolute;top:120px;left:0;right:0;text-align:center;color:#fff;opacity:.6}
.ph-notes{position:relative;z-index:1;padding:6px;display:flex;flex-direction:column;gap:5px;overflow:auto}
.ph-note{background:#fff;border:1px solid #000;box-shadow:2px 2px 0 rgba(0,0,0,.3);animation:slidein .25s steps(4);font-size:11px}
@keyframes slidein{from{transform:translateY(-40px);opacity:0}}
.ph-note.sms .ph-nh{background:#2f8a4a}
.ph-nh{background:#000080;color:#fff;font-weight:bold;padding:2px 5px}
.ph-nb{padding:4px 6px;line-height:1.35}
.ph-nbtn{display:flex;gap:3px;padding:3px}
.ph-nbtn button{min-width:0;flex:1;padding:0 2px;font-size:10px;min-height:20px}
.ph-note.right .ph-nbtn{background:#e6ffe6;color:#060;font-weight:bold;padding:4px 6px}
.ph-note.wrong .ph-nbtn{background:#ffe0e0;color:#a00;font-weight:bold;padding:4px 6px}
.ph-off{color:#fff;text-align:center;font-size:30px;padding-top:110px}
.ph-off small{font-size:12px}
.ph-home{position:absolute;bottom:9px;left:50%;margin-left:-14px;width:28px;height:22px;border-radius:6px;border:2px solid #666}

/* Sicherheit */
.at-head{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.at-tip{background:#ffffe1;border:1px solid #c0a000;padding:5px;margin:6px 0 0}
.at-tip.bad{background:#ffe9e9;border-color:#c00}
.inf{flex:1;background:#000080;color:#fff;padding:10px;display:flex;flex-direction:column;transition:background .3s steps(3)}
.inf.red{background:#600000}
.inf-files{display:flex;flex-wrap:wrap;gap:6px}
.inf-f{width:110px;display:flex;flex-direction:column;align-items:center;text-align:center;font-size:10px}
.inf-f.locked span{text-decoration:line-through;color:#ff8080}
.inf-msg{margin-top:auto;font-size:13px;line-height:1.45;text-align:center}
.inf-ok{display:block;background:#ffffe1;color:#000;padding:6px;margin-top:6px}
.qa{padding:12px}
.qa-anim{position:relative;height:70px;display:flex;justify-content:space-between;align-items:center;padding:0 10px}
.qa-file{transition:transform 1.3s steps(10)}
.qa-file.go{transform:translateX(230px) scale(.5)}
.qa-vault{text-align:center;background:#404040;color:#fff;padding:4px 8px;box-shadow:var(--raised)}
.qa-st{margin:6px 0}
.sb-main{flex:1;display:flex;flex-direction:column;gap:6px;padding:4px}
.sb-box{height:120px;position:relative;background:repeating-linear-gradient(45deg,#f2d89a 0 10px,#e2c27a 10px 20px);box-shadow:var(--sunken);display:flex;align-items:center;padding:0 20px}
.sb-pc{position:relative}
.sb-virus{position:absolute;left:28px;top:-16px;transform:scale(.7)}
.sb-virus.act{animation:buzz .4s infinite}
.sb-lbl{position:absolute;left:8px;top:6px;font-weight:bold;color:#6b4a00}
.sb-wall{position:absolute;left:55%;top:10px;bottom:10px;width:10px;background:repeating-linear-gradient(0deg,#a33 0 8px,#622 8px 10px);box-shadow:2px 0 0 #000}
.sb-net{position:absolute;right:20px;text-align:center}
.sb-net small{display:block}
.sb-box.block .sb-wall{animation:winflash .2s steps(1) 6;box-shadow:0 0 12px #f00}
.sb-log{flex:1;overflow:auto;padding:6px;background:#000;color:#ccc;font-family:var(--mono);font-size:12px;line-height:1.5}
.sb-l{animation:balloonIn .2s steps(2)}
.sb-l.warn{color:#ffd800}
.sb-l.bad{color:#ff5050;font-weight:bold}
.sb-v{display:flex;gap:10px;background:#ffe9e9;border:2px solid #c00;padding:8px;line-height:1.4}
.sc-head{display:flex;gap:10px;align-items:center;padding:6px 8px;background:linear-gradient(90deg,#1c5fc4,#7ec0ff);color:#fff;font-size:13px}
.sc-stat{display:flex;gap:8px;margin:6px 0}
.sc-stat>div{flex:1;background:#fff;box-shadow:var(--sunken);padding:4px 6px}
.sc-q{margin-bottom:6px}
.sc-qi{display:flex;gap:4px;align-items:center}
.sc-logf{flex:1;display:flex;flex-direction:column;min-height:0}
.sc-log{max-height:170px;overflow:auto}
.sc-log table{width:100%;border-collapse:collapse}
.sc-log td{padding:3px 5px;border-bottom:1px solid #ddd;vertical-align:top;cursor:pointer}
.sc-log tr:hover td{background:#ffffe1}
.sc-log tr.key td{color:#a00}
.sc-log tr.got td{background:#e6ffe6}

/* PacketScope */
.ps-map{position:relative;height:200px;flex:none;background:#fff;box-shadow:var(--sunken);overflow:hidden;background-image:linear-gradient(#eef 1px,transparent 1px),linear-gradient(90deg,#eef 1px,transparent 1px);background-size:20px 20px}
.ps-node{position:absolute;display:flex;flex-direction:column;align-items:center;text-align:center;width:150px;z-index:2}
.ps-node small{color:#0000c0;font-family:var(--mono)}
.ps-lap{left:3%;top:26px}
.ps-net{left:calc(50% - 75px);top:26px}
.ps-srv{right:3%;top:26px}
.ps-line{position:absolute;top:48px;height:3px;background:#000;z-index:1}
.ps-line.l1{left:calc(3% + 110px);width:calc(47% - 185px)}
.ps-line.l2{left:calc(50% + 40px);right:calc(3% + 110px)}
.ps-hack{left:calc(50% - 150px);top:96px;width:300px;flex-direction:row;gap:6px;text-align:left;opacity:.25}
.ps-map.cafe .ps-hack,.ps-map .ps-hack{opacity:1}
.ps-map:not(.cafe) .ps-hack b::after{content:" (Kollege im Netz?)";font-weight:normal;color:#808080}
.ps-sees{flex:1;min-height:42px;max-height:60px;overflow:auto;padding:3px 5px;font-family:var(--mono);font-size:11px;background:#001800;color:#0f0;word-break:break-all}
.ps-sees.plain{color:#ff0;background:#300}
.ps-tap{position:absolute;left:50%;top:50px;width:2px;height:46px;border-left:2px dashed #c00;z-index:1}
.ps-pkt{position:absolute;top:34px;left:calc(3% + 60px);z-index:3;font-size:22px;background:#ffff80;border:2px solid #000;padding:0 4px;opacity:0;transition:left .85s linear;line-height:1.2}
.ps-pkt.show{opacity:1}
.ps-pkt.enc{background:#c0ffc0}
.ps-pkt.at1{left:calc(50% - 18px)}
.ps-pkt.at2{left:calc(97% - 100px)}
.ps-cert{position:absolute;left:3%;top:110px;width:180px;background:#fff;border:2px solid #c00;padding:5px;z-index:4;color:#a00;animation:shake .4s;line-height:1.35}
.ps-cert span{display:inline-block;margin-top:3px;border:2px outset #ccc;background:#ddd;color:#000;padding:0 8px}
.ps-bottom{flex:1;display:flex;gap:6px;min-height:0;margin-top:6px}
.ps-list{flex:1;overflow:auto}
.ps-list table{width:100%;border-collapse:collapse}
.ps-list th{position:sticky;top:0;background:var(--face);box-shadow:var(--raised);font-weight:normal;text-align:left;padding:2px 4px}
.ps-list td{padding:3px 4px;white-space:nowrap}
.ps-list tr.on td{background:var(--sel);color:#fff}
.ps-q{width:300px;line-height:1.45;overflow:auto}
.ps-qh{background:#fff;box-shadow:var(--sunken);padding:5px;margin-bottom:6px;word-break:break-all}
.ps-expl .ok,.ac-res .ok,.ac-alert{background:#e6ffe6;border:1px solid #080;padding:5px;margin-top:4px}
.ps-expl .bad,.ac-res .bad{background:#ffe9e9;border:1px solid #c00;padding:5px;margin-top:4px}
.ac-alert{background:#ffe9e9;border-color:#c00}

/* Zugriffsmanager */
.ac-consent{max-width:560px;line-height:1.45}
.ac-ch{display:flex;gap:10px;align-items:center;background:#fff;box-shadow:var(--sunken);padding:8px;margin-bottom:6px}
.ac-perms{background:#fff;box-shadow:var(--sunken);padding:4px}
.ac-p{display:flex;flex-wrap:wrap;padding:4px;border-bottom:1px solid #eee}
.ac-p span{flex:1}
.ac-why{width:100%;padding-left:20px;font-size:11px}
.ac-p.right .ac-why{color:#060}
.ac-p.wrong{background:#ffe9e9}
.ac-p.wrong .ac-why{color:#a00}
.ac-apps table{width:100%;border-collapse:collapse}
.ac-apps th{background:var(--face);box-shadow:var(--raised);font-weight:normal;text-align:left;padding:2px 5px}
.ac-apps td{padding:3px 5px;white-space:nowrap}
.ac-apps td svg{vertical-align:-3px}
.ac-apps tr.on td{background:var(--sel);color:#fff}
.ac-det{margin-top:6px;line-height:1.45}
.ac-dt td{padding:1px 8px 1px 0}

/* LogViewer */
.lv-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:3px 2px 5px}
.lv-filter label{gap:4px}
.lv-filter button{min-width:0;padding:0 8px}
.lv-tl{flex:none;background:#fff;box-shadow:var(--sunken);padding:3px 8px 16px;margin-bottom:4px}
.lv-tlh{font-size:10px;color:#555}
.lv-track{position:relative;height:22px;border-bottom:1px solid #000;margin:4px 10px 0}
.lv-track i{position:absolute;bottom:2px;width:10px;height:10px;margin-left:-5px;border:1px solid #000}
.lv-track i.r{background:#c00000;height:16px}
.lv-track i.b{background:#0000c0}
.lv-track i.g{background:#a0a0a0}
.lv-track span{position:absolute;top:24px;font-size:9px;margin-left:-12px;color:#555}
.lv-table{flex:1;overflow:auto;min-height:0}
.lv-table table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px}
.lv-table th{position:sticky;top:0;background:var(--face);box-shadow:var(--raised);font-family:var(--ui);font-weight:normal;text-align:left;padding:2px 4px}
.lv-table td{padding:2px 4px;white-space:nowrap;border-bottom:1px solid #eee}
.lv-table tr.fail td{color:#a00}
.lv-table tr.warn td{color:#806000}
.lv-table tr.alert td{color:#fff;background:#c00000}
.lv-table tr.on td{outline:1px dotted #000;outline-offset:-1px;background:#ffffe1;color:#000}
.lv-table tr.mk td{font-weight:bold}
.lv-table tr.scan td{background:#000080!important;color:#fff!important}
.lv-table tr.good td{background:#c8f0c8!important;color:#000!important}
.lv-table tr.meh td{background:#fff3b0!important;color:#000!important}
.lv-table tr.badrow td{background:#ffc8c8!important;color:#000!important}
.lv-table td.ipbad{color:#c00000;font-weight:bold}
.lv-table tr.alert td.ipbad{color:#ff0}
.lv-table td.ipm{color:#0000c0}
.lv-bottom{flex:none;display:flex;gap:6px;margin-top:4px}
.lv-det{flex:1;background:#fff;box-shadow:var(--sunken);padding:5px;min-height:62px;line-height:1.4}
.lv-act{width:200px;display:flex;flex-direction:column;gap:6px;justify-content:center}

/* Beweistafel */
.bd-main{flex:1;display:flex;gap:6px;min-height:0}
.bd-left{width:250px;display:flex;flex-direction:column}
.bd-lh{padding:3px 2px}
.bd-lh small{color:#555}
.bd-cards{flex:1;overflow:auto;padding:6px;background:#d8c8a8}
.bd-card{background:#fffbe0;border:1px solid #b09040;padding:7px 8px 6px;margin-bottom:7px;box-shadow:2px 2px 0 rgba(0,0,0,.25);transform:rotate(var(--r));position:relative;cursor:pointer;line-height:1.3}
.bd-card small{display:block;color:#555;font-size:10px;margin-top:2px}
.bd-card.log{background:#eef}
.bd-card.talk{background:#efe}
.bd-card.secret{background:#222;color:#ffd800}
.bd-card.pick{outline:3px solid #ff0000;transform:rotate(0) scale(1.03);z-index:2}
.bd-card.used{opacity:.45}
.pin{position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8080,#c00000);box-shadow:1px 1px 0 #000}
.bd-cork{flex:1;position:relative;overflow:auto;background:#b5803a;background-image:radial-gradient(#9a6a2a 1px,transparent 1.5px),radial-gradient(#c9944a 1px,transparent 1.5px);background-size:7px 7px,11px 11px;box-shadow:var(--sunken);padding:14px}
.bd-strings{position:absolute;left:0;top:0;pointer-events:none;z-index:3;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.35))}
.bd-strings .str{stroke-dasharray:600;stroke-dashoffset:0;animation:drawstr .8s ease}
@keyframes drawstr{from{stroke-dashoffset:600}}
.bd-center{position:relative;z-index:2;width:150px;margin:0 auto 14px;background:#fff;padding:6px;text-align:center;box-shadow:3px 3px 0 rgba(0,0,0,.35);line-height:1.3}
.bd-center b,.bd-center small{display:block}
.bd-center small{color:#a00}
.bd-photo{display:inline-block;border:3px solid #fff;outline:1px solid #888}
.bd-qs{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.bd-q{background:#fff;padding:9px 8px 8px;box-shadow:3px 3px 0 rgba(0,0,0,.35);position:relative;cursor:pointer;min-height:96px;line-height:1.35}
.bd-q.secret{background:#222;color:#ffd800}
.bd-qq{font-weight:bold;margin-bottom:6px}
.bd-slot{border:2px dashed #999;color:#999;text-align:center;padding:12px 4px}
.bd-q.done{background:#f0fff0}
.bd-q.secret.done{background:#333}
.bd-ans span{color:#060;font-weight:bold}
.bd-q.secret .bd-ans span{color:#ffd800}
.bd-meas{position:relative;z-index:2;background:#fffbe0;margin-top:14px;padding:8px;box-shadow:3px 3px 0 rgba(0,0,0,.35)}
.bd-ml{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;margin-top:4px}
.bd-ml label.wrong{color:#a00}
.bd-bar{display:flex;gap:6px;align-items:center;padding-top:5px;flex:none}
.bd-st{flex:1}
.bd-blame{color:#a00}

/* Enden */
.ending{position:fixed;inset:0;z-index:250000;background:#000;color:#ddd;display:flex;align-items:center;justify-content:center;font-family:"Courier New",monospace;animation:balloonIn .6s steps(6)}
.ending.true{background:radial-gradient(ellipse at center,#06203a,#000 70%)}
.ending.secret{background:radial-gradient(ellipse at center,#2a2000,#000 70%)}
.ending.wrong{background:radial-gradient(ellipse at center,#3a0606,#000 70%)}
.end-in{max-width:720px;padding:24px}
.end-tag{font-family:"Arial Black",Arial;font-size:26px;color:#35ff6a;text-shadow:0 0 10px rgba(53,255,106,.5);margin-bottom:22px}
.ending.wrong .end-tag{color:#ff5050;text-shadow:0 0 10px rgba(255,80,80,.5)}
.ending.secret .end-tag{color:#ffd800;text-shadow:0 0 10px rgba(255,216,0,.5)}
.end-lines div{font-size:17px;line-height:1.6;min-height:1.6em}
.end-btns{margin-top:26px;display:flex;gap:10px}
.end-btns button{font-size:12px;min-height:28px}
.end-skip{margin-top:20px;color:#555;font-size:11px}

/* Minesweeper */
.ms98{padding:6px;background:var(--face)}
.ms-top{display:flex;justify-content:space-between;align-items:center;box-shadow:var(--sunken);padding:5px 6px;margin-bottom:6px;background:var(--face)}
.ms-led{background:#000;color:#ff0000;font-family:"Courier New",monospace;font-weight:bold;font-size:22px;padding:0 3px;letter-spacing:1px;box-shadow:var(--thin-in);line-height:26px}
.ms-face{min-width:26px;width:26px;height:26px;min-height:26px;padding:0;font-size:15px;line-height:1}
.ms-grid{display:grid;box-shadow:var(--sunken);padding:3px;background:var(--face);width:max-content}
.mc{width:16px;height:16px;box-shadow:var(--raised);background:var(--face);font-weight:bold;font-size:11px;text-align:center;line-height:16px;font-family:Arial}
.mc.op{box-shadow:none;border-left:1px solid #808080;border-top:1px solid #808080;line-height:15px}
.mc.boom{background:#ff0000}
.mc[data-n="1"]{color:#0000ff}.mc[data-n="2"]{color:#008000}.mc[data-n="3"]{color:#ff0000}.mc[data-n="4"]{color:#000080}.mc[data-n="5"]{color:#800000}.mc[data-n="6"]{color:#008080}

/* DFÜ */
.dial{padding:12px}
.dial-pic{display:flex;align-items:center;gap:6px;justify-content:center}
.dial-line{display:flex;gap:8px;width:120px;justify-content:center}
.dial-line i{width:8px;height:8px;background:#000080;animation:dots 1s steps(1) infinite}
.dial-line i:nth-child(2){animation-delay:.33s}.dial-line i:nth-child(3){animation-delay:.66s}
@keyframes dots{0%{opacity:1}50%{opacity:.15}}
.dial-st{margin-top:10px;text-align:center}