/* LippOS – Oberfläche im Stil der klassischen Luna-Optik (eigene Umsetzung) */
:root {
  --font: Tahoma, "Segoe UI", Verdana, sans-serif;
  --blue-dark: #0a246a;
  --title-a: #0997ff; --title-b: #0053ee; --title-c: #0050ee; --title-d: #06f;
  --title-inactive-a: #7a96df; --title-inactive-b: #6a86d6;
  --face: #ece9d8;
  --face-dark: #aca899;
  --select: #316ac5;
  --taskbar-a: #1f2f86; --taskbar-b: #3168d5; --taskbar-c: #4993e6; --taskbar-d: #2157d7;
  --start-a: #3c8f3c; --start-b: #4fae4f; --start-c: #308d30;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; font: 11px/1.35 var(--font); color: #000; }
button { font: inherit; }
[hidden] { display: none !important; }
img { user-select: none; -webkit-user-drag: none; }

/* ================= Anmeldung ================= */
.login { position: fixed; inset: 0; display: flex; flex-direction: column; background: #5a7edc; color: #fff; }
.login-top, .login-bottom { background: #00309c; flex: 0 0 80px; position: relative; }
.login-top::after, .login-bottom::before { content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #00309c, #f99736 30%, #f99736 70%, #00309c); }
.login-top::after { bottom: 0; background: linear-gradient(90deg, #00309c, #6d8fe0 30%, #fff 50%, #6d8fe0 70%, #00309c); }
.login-bottom::before { top: 0; }
.login-bottom { display: flex; align-items: center; padding: 0 32px; font-size: 13px; }
.login-bottom span { display: flex; align-items: center; gap: 8px; opacity: .9; }
.login-mid { flex: 1; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 15% 20%, #9db9eb 0, #5a7edc 45%, #4a6fd4 100%); }
.login-left { width: 340px; text-align: right; padding-right: 32px; }
.login-logo { width: 72px; height: 72px; filter: drop-shadow(1px 2px 2px rgba(0,0,0,.35)); }
.login-brand { font: 36px/1 "Franklin Gothic Medium", "Trebuchet MS", var(--font); margin: 8px 0 16px; text-shadow: 1px 1px 2px rgba(0,0,0,.3); }
.login-brand b { color: #fca04a; font-weight: 600; }
.login-left p { font-size: 15px; margin: 0; }
.login-divider { width: 1px; align-self: stretch; margin: 40px 0;
  background: linear-gradient(transparent, rgba(255,255,255,.8) 30%, rgba(255,255,255,.8) 70%, transparent); }
.login-right { width: 420px; padding-left: 32px; }
.user-tile { display: flex; gap: 14px; align-items: flex-start; padding: 10px; border-radius: 8px;
  background: linear-gradient(90deg, #0d3aa8, rgba(13,58,168,0)); }
.user-tile-name { font-size: 20px; margin: 2px 0 10px; }
.gbtn { min-height: 40px; }
.login-msg { margin-top: 8px; font-size: 12px; min-height: 16px; color: #ffe08a; }
.avatar { width: 32px; height: 32px; border-radius: 4px; border: 2px solid #fff; display: grid; place-items: center;
  background: linear-gradient(135deg, #fca04a, #e0590c); color: #fff; font: bold 16px var(--font);
  box-shadow: 0 1px 3px rgba(0,0,0,.4); flex: none; }
.avatar.big { width: 64px; height: 64px; border-width: 3px; font-size: 32px; border-radius: 6px; }

/* ================= Desktop ================= */
.desktop { position: fixed; inset: 0; background-color: #3a6ea5; }
/* Hintergründe (eigene Umsetzung, keine Originalbilder) */
.wp-huegel {
  background: url(/wallpapers/huegel.svg) center / cover no-repeat,
    linear-gradient(#1f62cf 0%, #6aa9ec 55%, #8ccc4a 56%, #2c7a1f 100%);
}
.wp-azur { background: radial-gradient(ellipse 120% 80% at 70% 110%, #b9e3ff 0, transparent 60%), linear-gradient(160deg, #0b3a8c 0%, #1f6fd6 45%, #6fb4f2 100%); }
.wp-abend { background: radial-gradient(circle at 70% 78%, #ffe28a 0 4%, #ffb347 8%, transparent 30%), linear-gradient(#2a1a5e 0%, #7a2e7e 35%, #e0584a 68%, #f6a04d 82%, #3b2a4a 83%, #1d1530 100%); }
.wp-nacht {
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 42%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 47% 12%, #fff, transparent), radial-gradient(1px 1px at 63% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 78% 16%, #fff, transparent), radial-gradient(1px 1px at 88% 48%, #fff, transparent),
    radial-gradient(1px 1px at 36% 64%, #dfe8ff, transparent), radial-gradient(1.5px 1.5px at 8% 70%, #fff, transparent),
    radial-gradient(circle at 82% 22%, #fdf6d8 0 2.2%, rgba(253,246,216,.25) 3%, transparent 9%),
    linear-gradient(#020b24 0%, #0c1f52 60%, #1d3b7a 100%);
}
.wp-blau { background: #3a6ea5; }
.wp-gruen { background: #3b7d4f; }
.wp-grau { background: #6b7685; }
.wp-custom { background-color: #3a6ea5; }
.wp-custom.fit-fill { background-size: cover; background-position: center; background-repeat: no-repeat; }
.wp-custom.fit-center { background-size: auto; background-position: center; background-repeat: no-repeat; }
.wp-custom.fit-tile { background-size: auto; background-position: 0 0; background-repeat: repeat; }

/* Desktop-Symbole (frei positioniert) */
.icons { position: absolute; inset: 0 0 30px 0; overflow: hidden; }
.dicon { position: absolute; width: 84px; padding: 3px 2px; border: 1px dotted transparent; background: none; color: #fff; text-align: center; cursor: default; touch-action: none; }
.dicon .dimg { position: relative; display: block; width: 40px; height: 40px; margin: 0 auto 4px; }
.dicon .dimg img { width: 40px; height: 40px; display: block; filter: drop-shadow(1px 1px 1px rgba(0,0,0,.4)); }
.dicon .dimg img.arrow { position: absolute; left: 0; bottom: 0; width: 14px; height: 14px; filter: none; }
.dicon .dlabel { display: inline-block; max-width: 82px; text-shadow: 1px 1px 1px #000, 0 0 2px #000; padding: 0 2px; overflow-wrap: break-word; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dicon:focus { outline: none; }
.dicon:focus .dlabel { background: var(--select); text-shadow: none; -webkit-line-clamp: 6; }
.dicon:focus .dimg img:not(.arrow) { filter: drop-shadow(1px 1px 1px rgba(0,0,0,.4)) brightness(.75) sepia(1) hue-rotate(180deg) saturate(3); }
.dicon.moving { opacity: .75; z-index: 5; }

/* Kontextmenü */
.ctx { position: fixed; z-index: 20000; min-width: 190px; padding: 2px; background: #fff; border: 1px solid #8d8d8d; box-shadow: 2px 2px 3px rgba(0,0,0,.35); }
.ctx-item { display: block; width: 100%; text-align: left; padding: 3px 22px 3px 22px; border: 0; background: none; cursor: default; white-space: nowrap; }
.ctx-item.b { font-weight: bold; }
.ctx-item:hover:not(:disabled), .ctx-item:focus { background: var(--select); color: #fff; outline: none; }
.ctx-item:disabled { color: #a0a0a0; }
.ctx-sep { height: 1px; margin: 3px 1px; background: #c5c5c5; }

/* ================= Taskleiste ================= */
.taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; display: flex; z-index: 10000;
  background: linear-gradient(var(--taskbar-c) 0, var(--taskbar-b) 3px, var(--taskbar-d) 10%, var(--taskbar-b) 90%, var(--taskbar-a) 100%); }
.start { height: 30px; padding: 0 22px 0 8px; display: flex; align-items: center; gap: 5px; border: 0; cursor: pointer;
  color: #fff; font: italic bold 17px "Trebuchet MS", var(--font); text-shadow: 1px 1px 2px rgba(0,0,0,.5);
  border-radius: 0 12px 12px 0; box-shadow: inset -2px -2px 3px rgba(0,0,0,.25), inset 1px 2px 3px rgba(255,255,255,.4);
  background: linear-gradient(var(--start-b) 0%, var(--start-a) 50%, var(--start-c) 100%); }
.start img { width: 20px; height: 20px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,.4)); }
.start:hover { filter: brightness(1.1); }
.start.on { filter: brightness(.85); }
.tasks { flex: 1; display: flex; gap: 3px; padding: 3px 6px; overflow: hidden; }
.taskbtn { flex: 0 1 160px; min-width: 40px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid #1941a5;
  border-radius: 3px; color: #fff; background: linear-gradient(#3c81f3, #2b6de0); box-shadow: inset 1px 1px 0 rgba(255,255,255,.3);
  white-space: nowrap; overflow: hidden; cursor: pointer; text-align: left; }
.taskbtn img { width: 16px; height: 16px; }
.taskbtn span { overflow: hidden; text-overflow: ellipsis; }
.taskbtn.active { background: linear-gradient(#1e52b7, #1949a8); box-shadow: inset 1px 1px 2px rgba(0,0,0,.4); }
.tray { display: flex; align-items: center; gap: 6px; padding: 0 12px; color: #fff; border-left: 1px solid #1042af;
  background: linear-gradient(#18a2f2, #0f8ce8 10%, #0d7ad8 90%, #0b5fc0); box-shadow: inset 1px 0 1px #18bbff; }
.tray img { width: 16px; height: 16px; }

/* ================= Startmenü ================= */
.startmenu { position: absolute; left: 0; bottom: 30px; width: 380px; z-index: 10001; border-radius: 8px 8px 0 0; overflow: hidden;
  background: #fff; border: 1px solid #0b3cad; box-shadow: 3px 3px 8px rgba(0,0,0,.5); }
.sm-head { display: flex; align-items: center; gap: 8px; padding: 8px; color: #fff; font: bold 14px var(--font); text-shadow: 1px 1px 2px rgba(0,0,0,.5);
  background: linear-gradient(#1868ce, #0e60cb 15%, #0f62cc 85%, #0c4fb3); }
.sm-head .avatar { width: 44px; height: 44px; font-size: 22px; }
.sm-body { display: flex; border-top: 2px solid #f39a3c; }
.sm-left { flex: 1; padding: 6px 2px; background: #fff; }
.sm-right { flex: 1; padding: 6px 2px; background: #d3e5fa; border-left: 1px solid #95bdee; }
.sm-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; border: 0; background: none; text-align: left; cursor: pointer; }
.sm-left .sm-item img { width: 32px; height: 32px; }
.sm-left .sm-item b { display: block; }
.sm-left .sm-item small { color: #777; }
.sm-right .sm-item { color: #0a246a; font-weight: bold; }
.sm-right .sm-item img { width: 22px; height: 22px; }
.sm-item:hover { background: var(--select); color: #fff; }
.sm-item:hover small { color: #dfe8f8; }
.sm-sep { height: 1px; margin: 4px 6px; background: linear-gradient(90deg, transparent, #ccc, transparent); }
.sm-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 8px; background: linear-gradient(#1868ce, #0c4fb3); }
.sm-foot-btn { display: flex; align-items: center; gap: 4px; background: none; border: 0; color: #fff; cursor: pointer; padding: 2px 6px; }
.sm-foot-btn img { width: 22px; height: 22px; }
.sm-foot-btn:hover { background: rgba(255,255,255,.15); border-radius: 3px; }

/* ================= Fenster ================= */
.win { position: absolute; display: flex; flex-direction: column; min-width: 260px; min-height: 150px;
  background: var(--face); border: 3px solid var(--title-b); border-top: 0; border-radius: 8px 8px 0 0;
  box-shadow: 2px 3px 10px rgba(0,0,0,.45); resize: both; overflow: hidden; }
.win.inactive { border-color: var(--title-inactive-b); }
.win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: calc(100% - 30px) !important; border-radius: 0; resize: none; }
.titlebar { flex: none; height: 28px; display: flex; align-items: center; gap: 4px; padding: 0 3px 0 6px; cursor: default;
  color: #fff; font: bold 13px "Trebuchet MS", var(--font); text-shadow: 1px 1px 1px #0f1089; border-radius: 7px 7px 0 0;
  background: linear-gradient(var(--title-a) 0%, var(--title-b) 8%, var(--title-c) 40%, var(--title-d) 88%, var(--title-c) 93%, #0045c8 100%); }
.win.inactive .titlebar { background: linear-gradient(#9db9eb, var(--title-inactive-a) 10%, var(--title-inactive-b)); text-shadow: none; color: #d8e4f8; }
.titlebar img { width: 16px; height: 16px; }
.titlebar .ttl { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tbtn { width: 21px; height: 21px; border: 1px solid #fff; border-radius: 3px; padding: 0; cursor: pointer; color: #fff; font: bold 13px/1 var(--font);
  background: linear-gradient(135deg, #4a8cff, #0c5bea 60%, #2c74ff); display: grid; place-items: center; }
.tbtn:hover { filter: brightness(1.15); }
.tbtn.close { background: linear-gradient(135deg, #f19b81, #e0471f 55%, #c3330f); }
.win.inactive .tbtn { opacity: .75; }
.menubar { flex: none; display: flex; gap: 2px; padding: 1px 2px; border-bottom: 1px solid #d0cdbe; background: var(--face); }
.toolbar { flex: none; display: flex; align-items: center; gap: 2px; padding: 3px 4px; border-bottom: 1px solid #d0cdbe;
  background: linear-gradient(#fbfaf5, #ece9d8); flex-wrap: wrap; }
.tb { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid transparent; border-radius: 3px; background: none; cursor: pointer; }
.tb:hover:not(:disabled) { border-color: #c4c1b0; background: #fff; }
.tb:disabled { opacity: .45; cursor: default; }
.tb img { width: 20px; height: 20px; }
.tb .ar { font-size: 15px; font-weight: bold; color: #2c8e2c; }
.tsep { width: 1px; height: 22px; margin: 0 3px; background: #c4c1b0; }
.addr { flex: none; display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-bottom: 1px solid #d0cdbe; }
.addr label { color: #555; }
.addr input { flex: 1; }
.wbody { flex: 1; min-height: 0; overflow: auto; background: #fff; }
.statusbar { flex: none; display: flex; gap: 12px; padding: 3px 8px; border-top: 1px solid #fff; background: var(--face); color: #333; }
.statusbar > * { border-right: 1px solid #c4c1b0; padding-right: 12px; }

/* Bedienelemente */
input[type=text], input[type=search], textarea { font: inherit; border: 1px solid #7f9db9; padding: 3px 4px; background: #fff; border-radius: 0; }
input:focus, textarea:focus { outline: 1px solid var(--select); }
.btn { min-width: 75px; padding: 3px 10px; border: 1px solid #003c74; border-radius: 3px; cursor: pointer;
  background: linear-gradient(#fff, #ecebe6 85%, #d6d0c5); box-shadow: inset -1px -1px #d6d0c5; }
.btn:hover { box-shadow: inset 0 0 0 2px #f9b240; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.btn.primary { font-weight: bold; }

/* Explorer */
.explorer { display: flex; height: 100%; }
.side { width: 190px; flex: none; padding: 10px; background: linear-gradient(90deg, #7ba2e7, #6375d6); overflow: auto; }
.panel { border-radius: 4px 4px 0 0; margin-bottom: 12px; background: #d6dff7; overflow: hidden; }
.panel h4 { margin: 0; padding: 5px 10px; color: #215dc6; font-size: 11px; background: linear-gradient(90deg, #fff, #c6d3f7); }
.panel .pl { padding: 6px 10px; }
.panel button.link { display: flex; align-items: center; gap: 5px; border: 0; background: none; color: #215dc6; cursor: pointer; padding: 3px 0; text-align: left; }
.panel button.link:hover { text-decoration: underline; color: #428eff; }
.panel button.link img { width: 16px; height: 16px; }
.panel button.link:disabled { color: #8ea2cf; cursor: default; text-decoration: none; }
.files { flex: 1; overflow: auto; padding: 6px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; outline: none; }
.files.drop { background: #e8f0fc; box-shadow: inset 0 0 0 2px var(--select); }
.fitem { width: 92px; padding: 4px; border: 1px solid transparent; text-align: center; background: none; cursor: default; word-break: break-word; }
.fitem img { width: 40px; height: 40px; display: block; margin: 0 auto 3px; }
.fitem.sel { background: #e0e8f7; border-color: #a6bde9; }
.fitem.sel span { background: var(--select); color: #fff; }
.empty, .notice { padding: 20px; color: #666; }
.notice.err { color: #a00; }

/* Notizen */
.notes { display: flex; height: 100%; }
.nlist { width: 200px; flex: none; border-right: 1px solid #c4c1b0; overflow: auto; background: #f7f6f0; }
.nitem { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #e3e1d5; background: none; padding: 6px 8px; cursor: pointer; }
.nitem b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nitem small { color: #777; }
.nitem.sel { background: var(--select); color: #fff; }
.nitem.sel small { color: #dce6f8; }
.neditor { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.neditor input { border: 0; border-bottom: 1px solid #ddd; font-size: 14px; font-weight: bold; padding: 8px; }
.neditor textarea { flex: 1; border: 0; resize: none; padding: 8px; font: 13px/1.5 "Lucida Console", Consolas, monospace; }

/* Aufgaben */
.todo { padding: 10px; }
.todo form { display: flex; gap: 6px; margin-bottom: 10px; }
.todo form input { flex: 1; }
.todo ul { list-style: none; margin: 0; padding: 0; }
.todo li { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid #eee; }
.todo li.done span { text-decoration: line-through; color: #888; }
.todo li span { flex: 1; word-break: break-word; }
.todo li button { visibility: hidden; border: 0; background: none; color: #c00; cursor: pointer; font-weight: bold; }
.todo li:hover button { visibility: visible; }
.todo h5 { margin: 14px 0 4px; color: #215dc6; }

/* Webseiten */
.sites { padding: 10px; }
.sites-info { margin-bottom: 8px; color: #333; }
.sites-info code { background: #f1efe2; padding: 0 3px; }
.sites-info .err { color: #a00; }
.grid { width: 100%; border-collapse: collapse; border: 1px solid #aca899; }
.grid th { text-align: left; font-weight: normal; padding: 3px 6px; border-right: 1px solid #d6d2c2; border-bottom: 1px solid #c4c1b0;
  background: linear-gradient(#fff, #ebeadb); }
.grid td { padding: 4px 6px; border-bottom: 1px solid #eee; vertical-align: middle; }
.grid td.c, .grid th:nth-child(2), .grid th:nth-child(3) { text-align: center; }
.grid tr.on td { background: #eef5e8; }
.grid tr.busy { opacity: .5; }
.grid a { color: #0b3d91; }
.sname { display: inline-flex; align-items: center; gap: 5px; font-weight: bold; }
.sname img { width: 16px; height: 16px; }
.warn { display: block; color: #b06000; margin-left: 21px; }
.muted { color: #888; }
.sites-help { margin-top: 10px; padding: 8px; border: 1px solid #e3d48f; background: #ffffe1; border-radius: 3px; }

/* Benutzer & Projektordner */
select { font: inherit; border: 1px solid #7f9db9; padding: 2px; background: #fff; }
.dform { display: flex; flex-direction: column; gap: 8px; }
.dform label, .fbox label { display: flex; flex-direction: column; gap: 3px; }
.err { color: #a00; }
.crumbs { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-height: 22px; padding: 1px 4px; border: 1px solid #7f9db9; background: #fff; }
.crumb { border: 0; background: none; padding: 1px 3px; cursor: pointer; color: #000; }
.crumb:hover { background: #e0e8f7; }
.crumb-sep { color: #888; }
.fbox { border: 1px solid #d0d0bf; border-radius: 3px; margin: 0 0 10px; padding: 8px 10px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.fbox.new { background: #f5f9ff; border-color: #a6bde9; }
.fbox legend { color: #0046d5; display: flex; align-items: center; gap: 3px; }
.fbox legend img { width: 16px; height: 16px; }
.fbox .row { display: flex; gap: 6px; justify-content: flex-end; }
.members { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 0 2px 2px; }
.members label { flex-direction: row; align-items: center; }
code.sa { user-select: all; background: #fff; border: 1px solid #e3d48f; padding: 0 3px; word-break: break-all; }

/* Explorer-Ergänzungen */
.fitem.drop { background: #cfe0fb; border-color: var(--select); }
.fitem img, .fitem span { pointer-events: none; }
.side .hint { margin-top: 6px; font-size: 10px; color: #4b5d84; }
.side .muted { display: block; padding: 3px 0; }
.tb[hidden] { display: none; }

/* Bild- und Faxanzeige / Editor */
.vstage { height: 100%; display: flex; align-items: center; justify-content: center; overflow: auto; background: #fff;
  background-image: linear-gradient(45deg, #f2f2f2 25%, transparent 25%, transparent 75%, #f2f2f2 75%), linear-gradient(45deg, #f2f2f2 25%, transparent 25%, transparent 75%, #f2f2f2 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.vstage.text { display: block; background: #fff; }
.vimg { display: block; margin: auto; image-orientation: from-image; box-shadow: 0 0 0 1px #c9c9c9; }
.vimg.fit { max-width: 100%; max-height: 100%; object-fit: contain; }
.vtxt { width: 100%; height: 100%; border: 0; resize: none; padding: 4px 6px; font: 13px/1.45 "Lucida Console", Consolas, monospace; white-space: pre-wrap; outline: none; }
.vtxt.nowrap { white-space: pre; overflow-x: auto; }

/* Eigenschaften von Anzeige */
.display { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; background: var(--face); }
.tabs { display: flex; gap: 2px; margin-bottom: -9px; position: relative; z-index: 1; }
.tab { padding: 3px 10px; border: 1px solid #919b9c; border-bottom-color: #fcfcfe; border-radius: 3px 3px 0 0; background: #fcfcfe; box-shadow: inset 0 2px 0 #ffc73c; }
.tabpage { flex: 1; min-height: 0; border: 1px solid #919b9c; background: #fcfcfe; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.monitor { align-self: center; width: 190px; padding: 10px 10px 16px; border-radius: 6px 6px 3px 3px; background: linear-gradient(#e9ecf1, #c6ccd6); border: 1px solid #7d8796; position: relative; }
.mon-screen { height: 104px; border: 1px solid #45505f; background-color: #3a6ea5; }
.mon-base { position: absolute; left: 50%; bottom: -12px; width: 70px; height: 10px; margin-left: -35px; border-radius: 0 0 4px 4px; background: #c6ccd6; border: 1px solid #7d8796; }
.wp-row { display: flex; gap: 10px; min-height: 0; flex: 1; }
.wp-col { flex: 1; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.wp-list { flex: 1; min-height: 120px; overflow: auto; border: 1px solid #7f9db9; background: #fff; }
.wp-opt { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; padding: 2px 4px; text-align: left; cursor: default; }
.wp-opt.sel { background: var(--select); color: #fff; }
.wp-swatch { width: 22px; height: 15px; border: 1px solid #55606e; flex: none; }
.wp-custom-sw { background: linear-gradient(135deg, #ffd23a, #f27a2a 50%, #3a6ea5 51%); }
.wp-side { display: flex; flex-direction: column; gap: 6px; width: 120px; }
.wp-side label { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.display .row { display: flex; gap: 6px; justify-content: flex-end; }

/* Systeminfo */
.sysinfo { padding: 14px 16px; background: var(--face); height: 100%; }
.sysinfo h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sysinfo h3 img { width: 32px; }
.sysinfo fieldset { border: 1px solid #d0d0bf; border-radius: 3px; margin: 0 0 10px; padding: 6px 10px; background: #fff; }
.sysinfo legend { color: #0046d5; padding: 0 3px; }
.sysinfo li { margin: 2px 0; }

/* Dialog */
.overlay { position: absolute; inset: 0 0 30px 0; z-index: 9999; background: rgba(0,0,0,.08); display: grid; place-items: center; }
.dialog .wbody { background: var(--face); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.dialog .row { display: flex; gap: 6px; justify-content: flex-end; }

/* Benachrichtigung */
.balloon { position: absolute; right: 8px; bottom: 38px; max-width: 280px; z-index: 10002; padding: 8px 10px 8px 12px;
  background: #ffffe1; border: 1px solid #000; border-radius: 7px; box-shadow: 2px 2px 4px rgba(0,0,0,.3); }
.balloon b { display: block; margin-bottom: 2px; }

@media (max-width: 760px) {
  .login-mid { flex-direction: column; gap: 16px; }
  .login-left { text-align: center; padding: 0; width: auto; }
  .login-divider { display: none; }
  .login-right { width: auto; padding: 0 16px; }
  .side { display: none; }
  .win { left: 0 !important; top: 0 !important; width: 100% !important; height: calc(100% - 30px) !important; border-radius: 0; resize: none; }
  .startmenu { width: 100%; }
  .nlist { width: 130px; }
}

.avatar.user { background: linear-gradient(135deg, #7fb2f0, #2a5fbf); }
.avatar.user img { width: 46px; height: 46px; }

/* ================= Willkommen ================= */
.welcome { position: fixed; inset: 0; z-index: 30000; display: flex; flex-direction: column; background: #5a7edc; color: #fff; transition: opacity .6s ease; }
.welcome.fade { opacity: 0; }
.welcome-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(ellipse at 15% 20%, #9db9eb 0, #5a7edc 45%, #4a6fd4 100%); }
.welcome-text { font: italic bold 64px/1 "Franklin Gothic Medium", "Trebuchet MS", var(--font); letter-spacing: .5px;
  text-shadow: 2px 3px 4px rgba(0,0,0,.35); animation: wfade .9s ease both; }
.welcome-sub { display: flex; align-items: center; gap: 10px; font: 20px "Trebuchet MS", var(--font); opacity: .95; animation: wfade 1.2s .2s ease both; }
.welcome-sub img { width: 40px; height: 40px; filter: drop-shadow(1px 2px 2px rgba(0,0,0,.35)); }
.welcome-status { margin-top: 18px; font-size: 13px; opacity: .85; animation: wfade 1.2s .5s ease both; }
@keyframes wfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .welcome-text { font-size: 42px; } }
@media (prefers-reduced-motion: reduce) { .welcome-text, .welcome-sub, .welcome-status { animation: none; } .welcome { transition: none; } }

/* Raster für Desktop-Symbole */
.grid-hint { position: absolute; width: 84px; height: 80px; border: 1px dashed rgba(255,255,255,.8); border-radius: 3px; background: rgba(255,255,255,.12); pointer-events: none; }
.snd-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.snd-row label { display: flex; align-items: center; gap: 4px; }

/* ================= Benachrichtigungen ================= */
.tray-bell { position: relative; border: 0; background: none; padding: 0 2px; cursor: pointer; display: flex; align-items: center; }
.tray-bell img { width: 16px; height: 16px; }
.tray-bell .badge { position: absolute; top: -5px; right: -6px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: #d4321b; color: #fff; font: bold 9px/14px var(--font); text-align: center; box-shadow: 0 0 0 1px #fff; }
.notif-panel { position: absolute; right: 6px; bottom: 36px; width: 360px; max-height: 60vh; z-index: 10003; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #0b3cad; border-radius: 6px 6px 0 0; box-shadow: 3px 3px 10px rgba(0,0,0,.45); overflow: hidden; }
.np-head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; color: #fff; background: linear-gradient(#1868ce, #0c4fb3); }
.np-head b { flex: 1; }
.link-btn { border: 0; background: none; color: #d6e6ff; text-decoration: underline; cursor: pointer; }
.np-list { overflow: auto; }
.np-item { display: flex; gap: 8px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #eef0f4; background: #fff; padding: 8px 10px; cursor: pointer; }
.np-item:hover { background: #eef4ff; }
.np-item .np-dot { flex: none; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: transparent; }
.np-item.unread .np-dot { background: #2f6fd6; }
.np-item.important .np-dot { background: #d4321b; }
.np-item.unread .np-text { font-weight: bold; }
.np-text { display: flex; flex-direction: column; gap: 1px; }
.np-text small { color: #777; font-weight: normal; }

/* ================= Projekte ================= */
.pj { display: flex; height: 100%; background: #fff; }
.pj-side { width: 210px; flex: none; padding: 10px; background: linear-gradient(90deg, #7ba2e7, #6375d6); overflow: auto; }
.pj-side .link { width: 100%; }
.pj-side .link.active { font-weight: bold; color: #0a246a; }
.pj-link { position: relative; }
.pj-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.pj-count { margin-left: auto; min-width: 16px; padding: 0 4px; border-radius: 8px; background: #d9701c; color: #fff; font-size: 10px; text-align: center; }
.pj-right { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--face); }
.pj-mobile-sel { display: none; margin: 6px; }
.pj-main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 10px 10px; overflow: auto; }
.pj-head { padding: 2px 0 8px 8px; border-left: 4px solid #2f6fd6; margin-bottom: 6px; font-size: 14px; }
.pj-tabs { overflow-x: auto; flex: none; }
.pj-tabs .tab { border: 1px solid #919b9c; border-bottom: 0; background: linear-gradient(#fff, #ecebe6); margin-right: 2px; cursor: pointer; white-space: nowrap; box-shadow: none; }
.pj-tabs .tab.sel, .tabs .tab.sel { background: #fcfcfe; box-shadow: inset 0 2px 0 #ffc73c; position: relative; top: 1px; }
.tabs button.tab { font: inherit; }
.pj-page { flex: 1; min-height: 0; overflow: auto; }
.pj-home h2 { margin: 2px 0 10px; font-size: 16px; color: #0a246a; }
.pj-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.pj-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #eef0f4; background: none; padding: 5px 2px; cursor: pointer; flex-wrap: wrap; }
.pj-row:hover:not(.static) { background: #eef4ff; }
.pj-row.static { cursor: default; }
.pj-row > span:first-child { flex: 1; min-width: 140px; }
.pj-row small { color: #666; }
.pj-row small.warn, .kdue.warn { color: #c8202b; font-weight: bold; }
.pj-tag { font-size: 10px; padding: 0 5px; border-left: 3px solid; background: #f1f3f8; color: #333; }
.pj-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.pj-stat { flex: 1; min-width: 80px; display: flex; flex-direction: column; align-items: center; padding: 8px; border: 1px solid #c9d3e6; border-radius: 4px; background: linear-gradient(#fff, #eef3fb); cursor: pointer; }
.pj-stat b { font-size: 20px; color: #0a246a; }
.pj-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.frow { display: flex; gap: 8px; flex-wrap: wrap; }
.frow > label, .frow > input { flex: 1; min-width: 120px; }
.dform textarea { font: inherit; border: 1px solid #7f9db9; padding: 3px 4px; resize: vertical; }
.dform label.inline { flex-direction: row; align-items: center; gap: 4px; }
.dform .row { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.dialog .wbody { overflow: auto; }

/* Kanban */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 8px; align-items: start; }
.kcol { background: #e9edf5; border: 1px solid #c3cbe0; border-radius: 4px; min-height: 120px; }
.kcol.drop { box-shadow: inset 0 0 0 2px var(--select); background: #dfe8fb; }
.khead { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid #c3cbe0; border-radius: 4px 4px 0 0; background: linear-gradient(#fff, #dfe5f1); }
.kcol-doing .khead { background: linear-gradient(#fff, #fde9c9); }
.kcol-done .khead { background: linear-gradient(#fff, #d8efcf); }
.khead b { flex: 1; }
.kcount { font-size: 10px; color: #555; }
.kadd { border: 1px solid #8a9bb8; border-radius: 3px; background: #fff; width: 20px; height: 20px; line-height: 16px; cursor: pointer; padding: 0; font-weight: bold; color: #2f6fd6; }
.kbody { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.kcard { background: #fff; border: 1px solid #c9d3e6; border-radius: 3px; padding: 6px 8px; cursor: pointer; box-shadow: 0 1px 1px rgba(0,0,0,.08); touch-action: manipulation; }
.kcard:hover, .kcard:focus { border-color: var(--select); outline: none; }
.kcol-done .kcard .ktitle { text-decoration: line-through; color: #777; }
.ktitle { font-weight: bold; overflow-wrap: anywhere; }
.kdesc { color: #555; margin-top: 2px; overflow-wrap: anywhere; }
.kmeta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10px; color: #555; }
.kwho { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #fca04a, #e0590c); color: #fff; font: bold 9px var(--font); }
.kwho.none { background: #c3cbe0; }

/* Termine */
.ev-list { display: flex; flex-direction: column; gap: 6px; }
.ev { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border: 1px solid #d0d6e2; border-radius: 4px; background: #fff; }
.ev.frist { border-left: 4px solid #c8202b; }
.ev-date { flex: none; width: 46px; text-align: center; border: 1px solid #c9d3e6; border-radius: 3px; overflow: hidden; background: #fff; }
.ev-date b { display: block; font-size: 18px; padding: 2px 0; }
.ev-date small { display: block; background: #d4321b; color: #fff; font-size: 10px; }
.ev-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ev-actions { display: flex; gap: 4px; }
.ev-actions .btn { min-width: 0; padding: 2px 8px; }
.ev-past { margin-top: 10px; }
.ev-past summary { cursor: pointer; color: #215dc6; margin-bottom: 6px; }

/* Pinnwand */
.pj-page.board { display: flex; flex-direction: column; overflow: hidden; }
.board-list { flex: 1; min-height: 120px; overflow: auto; padding: 4px 2px 8px; display: flex; flex-direction: column; gap: 6px; }
.board-day { align-self: center; font-size: 10px; color: #555; background: #e9edf5; padding: 1px 8px; border-radius: 8px; margin: 6px 0 2px; }
.bm { display: flex; gap: 6px; align-items: flex-end; max-width: 85%; }
.bm.mine { align-self: flex-end; flex-direction: row-reverse; }
.bm-bubble { background: #fff; border: 1px solid #c9d3e6; border-radius: 8px; padding: 5px 8px; }
.bm.mine .bm-bubble { background: #dcecff; border-color: #a6bde9; }
.bm.tagged .bm-bubble { border-color: #d9701c; box-shadow: 0 0 0 1px #f6c08a; }
.bm-head { display: flex; gap: 8px; align-items: baseline; }
.bm-head small { color: #777; }
.bm-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.mention { color: #1c5fd1; font-weight: bold; }
.mention.me { background: #fff1c2; }
.board-compose { position: relative; display: flex; gap: 6px; align-items: flex-end; padding-top: 6px; border-top: 1px solid #d0cdbe; }
.board-input { flex: 1; resize: none; font: inherit; border: 1px solid #7f9db9; padding: 4px 6px; }
.mention-pop { position: absolute; bottom: 100%; left: 0; min-width: 200px; background: #fff; border: 1px solid #8d8d8d; box-shadow: 2px 2px 3px rgba(0,0,0,.3); z-index: 5; }
.mention-pop button { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; padding: 4px 8px; text-align: left; cursor: pointer; }
.mention-pop button:hover, .mention-pop button:first-child { background: var(--select); color: #fff; }

/* Abstimmungen */
.poll .poll-opt { display: grid; grid-template-columns: auto minmax(100px, 1fr) minmax(80px, 2fr) 24px; align-items: center; gap: 8px; padding: 3px 0; flex-direction: row; }
.poll-bar { height: 10px; background: #e9edf5; border-radius: 5px; overflow: hidden; }
.poll-bar span { display: block; height: 100%; background: linear-gradient(90deg, #4f9bff, #1f62d8); }
.poll-opt.win .poll-label { font-weight: bold; color: #2f7a24; }
.poll-opt.win .poll-bar span { background: linear-gradient(90deg, #8fd36f, #2f9a2f); }
.poll.closed { opacity: .85; }
.poll-rows { display: flex; flex-direction: column; gap: 4px; }
.swatches { display: flex; gap: 6px; }
.swatch { width: 24px; height: 24px; border: 2px solid #fff; border-radius: 4px; box-shadow: 0 0 0 1px #7f9db9; cursor: pointer; }
.swatch.sel { box-shadow: 0 0 0 2px #000; }
.members-list .pj-row span:nth-child(2) { flex: 1; }

/* Suchen */
.search { display: flex; height: 100%; background: #fff; }
.search-side { width: 230px; flex: none; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(90deg, #fffbe6, #fff3c4); border-right: 1px solid #e3d48f; }
.search-side label { display: flex; flex-direction: column; gap: 4px; }
.search-help { display: flex; align-items: center; gap: 8px; }
.search-help img { width: 32px; height: 32px; }
.search-results { flex: 1; overflow: auto; padding: 8px 10px; }
.sr-group h4 { margin: 8px 0 4px; color: #215dc6; border-bottom: 1px solid #d6dff7; padding-bottom: 2px; }
.sr-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 4px; cursor: pointer; }
.sr-item:hover { background: #eef4ff; }
.sr-item img { width: 24px; height: 24px; flex: none; }
.sr-item span { display: flex; flex-direction: column; min-width: 0; }
.sr-item small { color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sitzungen */
.grid tr.fail td { color: #a00; }
.display .tabs button.tab { cursor: pointer; border: 1px solid #919b9c; border-bottom: 0; background: linear-gradient(#fff, #ecebe6); box-shadow: none; }
.display .tabs button.tab.sel { background: #fcfcfe; box-shadow: inset 0 2px 0 #ffc73c; }
.tabpage { overflow: auto; }

/* ================= Handy & Tablet ================= */
.hide-mobile {}
@media (max-width: 760px) {
  .pj-side { display: none; }
  .pj-mobile-sel { display: block; }
  .kanban { grid-template-columns: repeat(3, 78vw); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .kcol { scroll-snap-align: start; }
  .hide-mobile { display: none; }
  .search { flex-direction: column; }
  .search-side { width: auto; border-right: 0; border-bottom: 1px solid #e3d48f; padding: 8px; gap: 6px; }
  .search-side .muted { display: none; }
  .notif-panel { left: 4px; right: 4px; width: auto; }
  .bm { max-width: 95%; }
  .poll .poll-opt { grid-template-columns: auto 1fr 60px 20px; }
  .grid { font-size: 10px; }
  .grid th, .grid td { padding: 3px; }
  .taskbtn { flex-basis: 44px; }
  .taskbtn span { display: none; }
  .start span { display: none; }
  .start { padding-right: 12px; }
  .dicon { width: 80px; }
  .fitem { width: 84px; }
  .tb { padding: 6px; }
  .toolbar .tb:has(img), .toolbar .tb:has(.ar) { font-size: 0; }
  .toolbar .tb .ar { font-size: 15px; }
  .win .titlebar { height: 32px; }
  .tbtn { width: 26px; height: 26px; }
  .ctx-item { padding: 9px 22px; font-size: 13px; }
}
@media (pointer: coarse) {
  .fitem { padding: 6px; }
  .btn { min-height: 30px; }
}

/* Projektgruppen in der Ordnerverwaltung */
.fbox .flabel { margin-top: 8px; font-weight: bold; font-size: 11px; }
.fbox .flabel small { font-weight: normal; }
.members.projgroups { border: 1px solid #9db7e6; background: #f4f8ff; padding: 4px 6px; border-radius: 3px; }
.pdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; border: 1px solid rgba(0,0,0,.25); }

/* LippOS aktualisieren */
.upd { padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: auto; height: 100%; box-sizing: border-box; }
.upd-head { display: flex; gap: 12px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #c9d3e3; }
.upd-head .upd-ico { width: 40px; height: 40px; }
.upd-steps { margin: 0; padding-left: 20px; line-height: 1.55; }
.upd-drop { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px dashed #8aa7d6; border-radius: 4px; background: #f4f8ff; cursor: pointer; }
.upd-drop img { width: 32px; height: 32px; }
.upd-drop.over { background: #dcebff; border-color: #2f6fd6; }
.upd-cmd { background: #1f2430; color: #d6f5c8; padding: 8px 10px; border-radius: 3px; font: 12px/1.4 Consolas, monospace; white-space: pre-wrap; word-break: break-all; user-select: all; }
.upd-screen { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: linear-gradient(#5a7edc, #3a5fc8 60%, #2c4fae); }
.upd-card { width: min(460px, calc(100vw - 32px)); background: #ece9d8; border: 1px solid #0a246a; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.4); padding: 18px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.upd-title { display: flex; align-items: center; gap: 10px; font-weight: bold; font-size: 15px; color: #0a246a; }
.upd-title img { width: 32px; height: 32px; }
.upd-msg { min-height: 34px; display: flex; flex-direction: column; gap: 4px; }
.upd-bar { height: 16px; border: 1px solid #7a8aa8; background: #fff; border-radius: 2px; overflow: hidden; position: relative; }
.upd-bar i { position: absolute; top: 1px; bottom: 1px; width: 60px; background: repeating-linear-gradient(90deg, #36b02a 0 8px, transparent 8px 10px); animation: updrun 1.6s linear infinite; }
.upd-bar.ok i { animation: none; left: 1px; right: 1px; width: auto; }
.upd-bar.fail i { animation: none; left: 1px; right: 1px; width: auto; background: repeating-linear-gradient(90deg, #c8202b 0 8px, transparent 8px 10px); }
@keyframes updrun { from { left: -60px; } to { left: 100%; } }

/* Projekt-Anwendungen */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.app-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px 10px; text-align: center; background: linear-gradient(#fff, #f1f4fa); border: 1px solid #c3cddd; border-radius: 4px; cursor: pointer; font: inherit; color: #1b2a44; min-width: 0; }
.app-tile:hover, .app-tile:focus-visible { border-color: #3a7ad8; background: linear-gradient(#f7fbff, #e2eefe); box-shadow: 0 1px 4px rgba(30,80,170,.18); outline: none; }
.app-tile .app-ico { width: 40px; height: 40px; margin-bottom: 3px; }
.app-tile b { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-tile small { color: #6b7a90; font-size: 10.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-tile .app-note { font-size: 10.5px; color: #4a5a72; background: #fff7d6; border: 1px solid #ecd889; border-radius: 2px; padding: 0 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.app-q { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border: 1px solid #c3cddd; border-radius: 3px; background: #fff; font: inherit; cursor: pointer; max-width: 200px; }
.app-q:hover { border-color: #3a7ad8; background: #eef5ff; }
.app-q img { width: 20px; height: 20px; flex: none; }
.app-q span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-prev { width: 32px; height: 32px; align-self: flex-end; margin-bottom: 2px; }
@media (max-width: 760px) { .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================= Miniaturansicht im Explorer ================= */
.files.thumbs .fitem { width: calc(var(--th, 96px) + 18px); }
.fthumb { position: relative; display: grid; place-items: center; width: var(--th, 96px); height: var(--th, 96px); margin: 0 auto 3px;
  border: 1px solid transparent; }
.fthumb img.fallback { width: min(48px, calc(var(--th, 96px) * .6)); height: min(48px, calc(var(--th, 96px) * .6)); margin: 0; }
.fthumb img.timg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; margin: 0; opacity: 0; transition: opacity .2s; }
.fthumb.has { border-color: #c9d2e2; background: #fff; box-shadow: 1px 1px 2px rgba(0,0,0,.12); }
.fthumb.has img.timg { opacity: 1; padding: 3px; }
.fthumb.has img.fallback { visibility: hidden; }
.fitem.sel .fthumb.has { border-color: var(--select); box-shadow: 0 0 0 1px var(--select); }
.viewpop { position: fixed; z-index: 20001; width: 290px; padding: 10px 12px; background: #fff; border: 1px solid #8d8d8d; box-shadow: 2px 2px 4px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 8px; }
.viewpop label.inline { display: flex; align-items: center; gap: 5px; }
.vp-row { display: flex; align-items: center; gap: 8px; }
.vp-row input[type=range] { flex: 1; }
.vp-val { width: 46px; text-align: right; color: #555; }
.vp-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.vp-presets .btn { min-width: 0; padding: 2px 8px; }
.fbox label.inline { flex-direction: row; align-items: center; gap: 4px; }
/* unauffälliger Zugang (nur Inhaber) */
.statusbar .hb { margin-left: auto; margin-right: 16px; border-right: 0 !important; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #c9c5b4; opacity: .55; cursor: default; align-self: center; }
.statusbar .hb:hover { opacity: .9; }
.splog { max-height: 180px; overflow: auto; border: 1px solid #ddd; padding: 4px 6px; background: #fafafa; font-size: 10.5px; }

/* ================= Dunkles Design (Spezialkonten) ================= */
.wp-goth { background: url(/wallpapers/goth.svg) center / cover no-repeat, linear-gradient(#050307, #2a1230 70%, #050307); }
body.theme-goth {
  color-scheme: dark;
  --face: #1b1520; --face-dark: #3a2d44; --select: #6d2342;
  --title-a: #5b3a6b; --title-b: #2c1636; --title-c: #24112d; --title-d: #1a0b21;
  --title-inactive-a: #2f2533; --title-inactive-b: #241c28;
  --taskbar-a: #050307; --taskbar-b: #140d18; --taskbar-c: #3a2744; --taskbar-d: #1d1323;
  --start-a: #5e1630; --start-b: #7d2343; --start-c: #4a1026;
  --g-text: #e8dfee; --g-muted: #9a8ea6; --g-line: #3b2c45; --g-panel: #150f19; --g-input: #0f0b12;
  color: var(--g-text);
}
.theme-goth .win { border-color: #2c1636; box-shadow: 0 6px 24px rgba(0,0,0,.7), 0 0 0 1px #000; }
.theme-goth .win.inactive { border-color: #241c28; }
.theme-goth .titlebar { text-shadow: 0 1px 2px #000; color: #f1e8f6; box-shadow: inset 0 1px 0 rgba(214,170,236,.25); }
.theme-goth .win.inactive .titlebar { color: #8c7f96; }
.theme-goth .tbtn { border-color: #6e5579; background: linear-gradient(135deg, #3d2848, #1f1226 60%, #2c1a35); color: #e8dfee; }
.theme-goth .tbtn.close { background: linear-gradient(135deg, #a33a55, #6d1430 55%, #4a0c20); border-color: #c58aa0; }
.theme-goth .menubar, .theme-goth .toolbar, .theme-goth .addr { background: var(--face); border-color: var(--g-line); color: var(--g-text); }
.theme-goth .tb { color: var(--g-text); }
.theme-goth .tb:hover:not(:disabled) { background: #2a1f30; border-color: #4a3756; }
.theme-goth .tb .ar { color: #c25a7d; }
.theme-goth .tsep { background: var(--g-line); }
.theme-goth .addr label { color: var(--g-muted); }
.theme-goth .crumbs, .theme-goth input[type=text], .theme-goth input[type=search], .theme-goth textarea, .theme-goth select {
  background: var(--g-input); color: var(--g-text); border-color: #4a3756; }
.theme-goth .crumb { color: var(--g-text); }
.theme-goth .crumb:hover { background: #2a1f30; }
.theme-goth .wbody, .theme-goth .files { background: #110c14; color: var(--g-text); }
.theme-goth .statusbar { background: var(--face); color: var(--g-muted); border-top-color: var(--g-line); }
.theme-goth .statusbar > * { border-right-color: var(--g-line); }
.theme-goth .side { background: linear-gradient(90deg, #1d1323, #120c16); }
.theme-goth .panel { background: #1c1421; }
.theme-goth .panel h4 { color: #d9a7c0; background: linear-gradient(90deg, #2c1d33, #1c1421); }
.theme-goth .panel .pl { color: var(--g-text); }
.theme-goth .panel button.link { color: #cfb7dc; }
.theme-goth .panel button.link:hover { color: #f0d8ff; }
.theme-goth .side .hint, .theme-goth .muted, .theme-goth .empty, .theme-goth .notice { color: var(--g-muted); }
.theme-goth .err, .theme-goth .notice.err { color: #e0708f; }
.theme-goth .fitem { color: var(--g-text); }
.theme-goth .fitem.sel { background: #2a1830; border-color: #6d2342; }
.theme-goth .fitem.drop, .theme-goth .files.drop { background: #22152a; }
.theme-goth .fthumb.has { background: #0b080d; border-color: #3b2c45; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.theme-goth .btn { color: var(--g-text); border-color: #4a3756; background: linear-gradient(#2c2232, #1e1723 85%, #17121b); box-shadow: inset -1px -1px #120d15; }
.theme-goth .btn:hover { box-shadow: inset 0 0 0 2px #8a2c50; }
.theme-goth .btn:focus-visible { outline-color: #e8dfee; }
.theme-goth .ctx, .theme-goth .viewpop { background: #1a131e; border-color: #3b2c45; color: var(--g-text); box-shadow: 0 4px 14px rgba(0,0,0,.7); }
.theme-goth .ctx-item { color: var(--g-text); }
.theme-goth .ctx-item:disabled { color: #5b5063; }
.theme-goth .ctx-sep { background: var(--g-line); }
.theme-goth .vp-val { color: var(--g-muted); }
.theme-goth .taskbar { box-shadow: inset 0 1px 0 #4a3756; }
.theme-goth .start { font-style: italic; box-shadow: inset -2px -2px 3px rgba(0,0,0,.4), inset 1px 2px 3px rgba(255,190,215,.25); }
.theme-goth .taskbtn { border-color: #000; background: linear-gradient(#2e2034, #1f1524); color: #e3d7ea; box-shadow: inset 1px 1px 0 rgba(255,255,255,.08); }
.theme-goth .taskbtn.active { background: linear-gradient(#120b16, #1a1020); box-shadow: inset 1px 1px 3px rgba(0,0,0,.8); }
.theme-goth .tray { background: linear-gradient(#2b1e33, #1a1120 10%, #140d18 90%, #0b070d); border-left-color: #000; box-shadow: inset 1px 0 1px #4a3756; color: #d9cfe0; }
.theme-goth .startmenu { background: #151017; border-color: #2c1636; box-shadow: 0 6px 20px rgba(0,0,0,.8); }
.theme-goth .sm-head { background: linear-gradient(#3a2245, #24112d 20%, #1c0d23 85%, #12081a); }
.theme-goth .sm-body { border-top-color: #8a2c50; }
.theme-goth .sm-left { background: #151017; }
.theme-goth .sm-right { background: #1f1625; border-left-color: #33253b; }
.theme-goth .sm-item, .theme-goth .sm-right .sm-item { color: var(--g-text); }
.theme-goth .sm-left .sm-item small { color: var(--g-muted); }
.theme-goth .sm-item:hover { background: #6d2342; color: #fff; }
.theme-goth .sm-foot { background: linear-gradient(#24112d, #12081a); }
.theme-goth .balloon { background: #1f1625; color: var(--g-text); border-color: #6d2342; box-shadow: 0 4px 12px rgba(0,0,0,.7); }
.theme-goth .overlay { background: rgba(0,0,0,.45); }
.theme-goth .dialog .wbody { background: var(--face); color: var(--g-text); }
.theme-goth .vstage, .theme-goth .vstage.text { background: #0b080d; background-image: none; }
.theme-goth .vimg { box-shadow: 0 0 0 1px #3b2c45, 0 6px 20px rgba(0,0,0,.6); }
.theme-goth .vtxt { background: #0f0b12; color: var(--g-text); }
.theme-goth .welcome { background: #0b070d; }
.theme-goth .welcome-mid { background: radial-gradient(ellipse at 20% 15%, #3a2245 0, #170c1c 45%, #0b070d 100%); }
.theme-goth .dicon:focus .dlabel { background: #6d2342; }
.theme-goth .dicon:focus .dimg img:not(.arrow) { filter: drop-shadow(1px 1px 1px rgba(0,0,0,.6)) brightness(.8) sepia(1) hue-rotate(280deg) saturate(2.5); }
.theme-goth ::-webkit-scrollbar { width: 14px; height: 14px; background: #120d15; }
.theme-goth ::-webkit-scrollbar-thumb { background: #33253b; border: 3px solid #120d15; border-radius: 7px; }
.theme-goth ::-webkit-scrollbar-thumb:hover { background: #4a3756; }
/* schlichte Ordnersymbole */
.theme-goth .fitem img:not(.timg), .theme-goth .dicon .dimg img:not(.arrow), .theme-goth .titlebar img, .theme-goth .taskbtn img, .theme-goth .sm-item img, .theme-goth .panel button.link img, .theme-goth .tb img {
  filter: grayscale(.85) sepia(.25) hue-rotate(250deg) saturate(1.6) brightness(.9); }
.theme-goth .welcome .login-top, .theme-goth .welcome .login-bottom { background: #12081a; }
.theme-goth .welcome .login-top::after { background: linear-gradient(90deg, #12081a, #5b3a6b 30%, #d8c3e6 50%, #5b3a6b 70%, #12081a); }
.theme-goth .welcome .login-bottom::before { background: linear-gradient(90deg, #12081a, #8a2c50 30%, #8a2c50 70%, #12081a); }

/* ================= Haftnotizen ================= */
.sticky { position: absolute; width: 250px; z-index: 9500; background: linear-gradient(#fff9b8, #fff27a); border: 1px solid #d9c84a;
  box-shadow: 2px 4px 10px rgba(0,0,0,.35); border-radius: 2px 2px 2px 14px; font-size: 12px; color: #3b3200; }
.sticky.pop { animation: stpop .25s ease-out; }
@keyframes stpop { from { transform: translateY(-6px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.st-head { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 9px; background: rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.08); cursor: move; touch-action: none; font-weight: bold; }
.st-head span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-x { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 3px; background: none; color: inherit; font: bold 15px/1 var(--font); cursor: pointer; opacity: .6; }
.st-x:hover { opacity: 1; background: rgba(0,0,0,.1); }
.st-row { display: flex; align-items: center; gap: 4px; padding: 6px 8px 0; }
.st-val { flex: 1; min-width: 0; font: 13px/1.3 "Lucida Console", Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all;
  padding: 3px 5px; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.08); border-radius: 2px; }
.st-val.masked { letter-spacing: 1px; user-select: none; }
.st-btn { flex: none; padding: 2px 6px; border: 1px solid rgba(0,0,0,.2); border-radius: 3px; background: rgba(255,255,255,.7); color: inherit; font: 11px var(--font); cursor: pointer; }
.st-btn:hover { background: #fff; }
.st-copy { min-width: 58px; }
.st-copy.done { background: #c9f0b8; border-color: #6bb04f; }
.st-foot { padding: 6px 9px 7px 22px; font-size: 10px; opacity: .65; }
.dicon .dimg .nbadge { position: absolute; right: -4px; top: -2px; width: 12px; height: 12px; background: linear-gradient(135deg, #fff9b8 50%, #e0cf4f 50%); border: 1px solid #b8a83a; box-shadow: 1px 1px 1px rgba(0,0,0,.35); }
.note-fields { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #fffbd0; border: 1px solid #e6d77a; border-radius: 3px; }
.dform label.inline { flex-direction: row; }
.own-hint { padding: 8px; background: #f5f9ff; border: 1px solid #a6bde9; border-radius: 3px; line-height: 1.5; }
.own-mail { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.own-mail code { flex: 1; overflow: hidden; text-overflow: ellipsis; padding: 2px 5px; background: #fff; border: 1px solid #ccd; }
.own-tag { display: inline-flex; align-items: center; gap: 3px; margin: 0 6px 0 0; padding: 1px 2px 1px 6px; background: #eef3fb; border: 1px solid #c6d3ea; border-radius: 3px; }
.theme-goth .sticky { background: linear-gradient(#2c2034, #241a2b); border-color: #5b3a6b; color: #ecdff2; box-shadow: 0 6px 18px rgba(0,0,0,.7); }
.theme-goth .st-head { background: rgba(109,35,66,.35); border-bottom-color: #3b2c45; }
.theme-goth .st-val { background: #120d15; border-color: #3b2c45; }
.theme-goth .st-btn { background: #1d1523; border-color: #4a3756; }
.theme-goth .st-btn:hover { background: #2a1f30; }
.theme-goth .st-copy.done { background: #23402a; border-color: #4f8a5a; }
.theme-goth .own-hint { background: #1c1421; border-color: #3b2c45; }
.theme-goth .own-mail code { background: #0f0b12; border-color: #3b2c45; color: #e8dfee; }
.theme-goth .note-fields { background: #1c1421; border-color: #3b2c45; }
.theme-goth .fbox { background: #17121b; border-color: #3b2c45; }
.theme-goth .fbox legend { color: #d9a7c0; }
.own-hint.ok { border-color: #8cc47a; background: #f1faec; }
.own-choice { display: flex; flex-direction: column; gap: 8px; }
.own-alt { padding: 6px 8px; border: 1px dashed #c4c1b0; border-radius: 3px; }
.own-alt summary { cursor: pointer; color: #555; }
.theme-goth .own-hint.ok { background: #172219; border-color: #3f6a47; }
.theme-goth .own-alt { border-color: #3b2c45; }
.theme-goth .own-alt summary { color: var(--g-muted); }

/* Web-Verknüpfung im LippOS-Fenster */
.webwrap { position: relative; height: 100%; background: #fff; }
.webframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.win.inactive .webframe { pointer-events: none; } /* Klick ins Fenster holt es zuerst nach vorne */
.sticky.pinned { position: absolute; top: 10px; right: 16px; z-index: 5; }
.nb-ico { display: inline-block; width: 16px; height: 16px; background: linear-gradient(135deg, #fff9b8 55%, #e0cf4f 55%); border: 1px solid #b8a83a; }
.theme-goth .webwrap, .theme-goth .webframe { background: #0b080d; }

/* Erweiterungs-Status im Web-Fenster */
.statusbar .ext-ok { color: #2a7a33; }
.statusbar .linkbtn { border: 0; background: none; color: #1554b8; cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.statusbar .linkbtn:hover { color: #2a6fe0; }
.theme-goth .statusbar .ext-ok { color: #7cc27f; }
.theme-goth .statusbar .linkbtn { color: #b48be8; }

/* ================= Aufgaben (To-do) ================= */
.todo2 { display: flex; height: 100%; background: #fff; }
.td-side { width: 210px; flex: none; background: #f3f6fb; border-right: 1px solid #d9e1ee; padding: 8px 6px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.td-nav { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; background: none; border-radius: 5px; cursor: pointer; text-align: left; font: inherit; color: #22324d; }
.td-nav img { width: 18px; height: 18px; }
.td-nav-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-nav-count { color: #6b7a90; font-size: 11px; }
.td-nav:hover { background: #e6edf8; }
.td-nav.sel { background: #dce8fb; font-weight: bold; }
.td-dot { width: 8px; height: 8px; border-radius: 50%; }
.td-sep { height: 1px; background: #d9e1ee; margin: 6px 4px; }
.td-newlist { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 0; background: none; color: #2f6fd6; cursor: pointer; font: inherit; border-radius: 5px; }
.td-newlist:hover { background: #e6edf8; }
.td-newlist span { font-size: 16px; line-height: 1; }
.td-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.td-title { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px; font-size: 18px; }
.td-title-ic { width: 24px; height: 24px; }
.td-title-date { color: #8a97ab; font-size: 12px; font-weight: normal; margin-left: 4px; }
.td-listmenu { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: 18px; color: #6b7a90; padding: 0 6px; }
.td-list { flex: 1; overflow: auto; padding: 4px 10px 10px; }
.td-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; background: #fff; border: 1px solid #eef1f6; border-radius: 6px; margin-bottom: 5px; cursor: pointer; box-shadow: 0 1px 1px rgba(20,40,80,.04); }
.td-row:hover { background: #f7faff; }
.td-row.sel { border-color: #9dc0f0; background: #f2f8ff; }
.td-row.done .td-row-title { text-decoration: line-through; color: #9aa6b6; }
.td-row-main { flex: 1; min-width: 0; }
.td-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-row-sub { display: flex; gap: 10px; margin-top: 2px; font-size: 11px; color: #8a97ab; flex-wrap: wrap; }
.td-due { color: #4a7bd0; } .td-due.over { color: #c8202b; } .td-due.soon { color: #2a8a3a; }
.td-check { flex: none; width: 20px; height: 20px; border: 2px solid #b3c0d4; border-radius: 50%; background: none; cursor: pointer; margin-top: 1px; position: relative; }
.td-check:hover { border-color: #2f6fd6; }
.td-check.on { background: #2f6fd6; border-color: #2f6fd6; }
.td-check.on::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 13px; line-height: 16px; text-align: center; }
.td-check.sm { width: 17px; height: 17px; } .td-check.sm.on::after { font-size: 11px; line-height: 13px; }
.td-check.big { width: 22px; height: 22px; }
.td-star { flex: none; border: 0; background: none; cursor: pointer; color: #ccd5e2; font-size: 17px; line-height: 1; padding: 0 2px; }
.td-star:hover { color: #f5b301; } .td-star.on { color: #f5b301; }
.td-star.big { font-size: 20px; }
.td-donehead { margin: 12px 4px 4px; font-size: 12px; color: #6b7a90; cursor: pointer; font-weight: bold; }
.td-donehead::before { content: "▾ "; } 
.td-donewrap.collapsed { display: none; }
.td-empty { color: #9aa6b6; padding: 24px 10px; text-align: center; }
.td-add { display: flex; align-items: center; gap: 8px; margin: 6px 12px 12px; padding: 8px 10px; background: #eef4fd; border: 1px solid #cfe0fb; border-radius: 8px; }
.td-add-plus { color: #2f6fd6; font-size: 18px; line-height: 1; }
.td-add-in { flex: 1; border: 0; background: none; font: inherit; outline: none; }
/* Detailbereich */
.td-detail { width: 300px; flex: none; background: #f3f6fb; border-left: 1px solid #d9e1ee; padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.td-d-head { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e1e8f2; border-radius: 6px; padding: 8px; }
.td-d-title { flex: 1; border: 0; background: none; font: inherit; font-size: 15px; outline: none; min-width: 0; }
.td-d-sec { background: #fff; border: 1px solid #e1e8f2; border-radius: 6px; padding: 8px 10px; }
.td-steps { display: flex; flex-direction: column; gap: 4px; }
.td-step { display: flex; align-items: center; gap: 8px; }
.td-step.done .td-step-in { text-decoration: line-through; color: #9aa6b6; }
.td-step-in { flex: 1; border: 0; border-bottom: 1px solid transparent; background: none; font: inherit; outline: none; padding: 3px 0; min-width: 0; }
.td-step-in:focus { border-bottom-color: #cfe0fb; }
.td-step-x { border: 0; background: none; color: #b3c0d4; cursor: pointer; font-size: 15px; }
.td-step-x:hover { color: #c8202b; }
.td-step-add { border: 0; background: none; font: inherit; color: #2f6fd6; outline: none; padding: 4px 0 2px 25px; width: 100%; }
.td-d-act { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; cursor: pointer; font: inherit; color: #22324d; padding: 2px 0; }
.td-d-act img { width: 18px; height: 18px; }
.td-d-act.on { color: #2f6fd6; font-weight: bold; }
.td-d-field { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.td-d-field img { width: 16px; height: 16px; } .td-d-ic { width: 16px; text-align: center; }
.td-d-field input, .td-d-field select { margin-left: auto; font: inherit; }
.td-d-note { width: 100%; min-height: 70px; border: 0; background: none; font: inherit; outline: none; resize: vertical; }
.td-d-foot { display: flex; align-items: center; margin-top: auto; padding-top: 6px; }
.td-d-foot .muted { font-size: 11px; }
.td-d-del { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: 15px; opacity: .7; }
.td-d-del:hover { opacity: 1; }
@media (max-width: 760px) { .td-detail { position: absolute; right: 0; top: 0; bottom: 0; width: 86%; z-index: 5; box-shadow: -4px 0 16px rgba(0,0,0,.2); } .td-side { width: 54px; } .td-nav-name, .td-nav-count, .td-newlist { display: none; } }
/* Dunkles Design */
.theme-goth .todo2, .theme-goth .td-row { background: #110c14; color: var(--g-text); }
.theme-goth .td-side, .theme-goth .td-detail { background: #171019; border-color: #2c2235; }
.theme-goth .td-nav { color: #d7cfe0; } .theme-goth .td-nav:hover { background: #241a2b; } .theme-goth .td-nav.sel { background: #2e2038; }
.theme-goth .td-sep { background: #2c2235; }
.theme-goth .td-row { border-color: #241a2b; } .theme-goth .td-row:hover { background: #1b1420; } .theme-goth .td-row.sel { background: #241830; border-color: #5b3a6b; }
.theme-goth .td-add { background: #1c1522; border-color: #3b2c45; } .theme-goth .td-add-in { color: var(--g-text); }
.theme-goth .td-d-head, .theme-goth .td-d-sec { background: #1a131f; border-color: #2c2235; }
.theme-goth .td-d-title, .theme-goth .td-d-note, .theme-goth .td-step-in, .theme-goth .td-d-act { color: var(--g-text); }
.theme-goth .td-check { border-color: #4a3756; } .theme-goth .td-check.on { background: #6d2342; border-color: #6d2342; }
.theme-goth .td-nav-count, .theme-goth .td-row-sub, .theme-goth .td-title-date { color: #9a8ea6; }

/* ================= E-Mail-Signatur ================= */
.sig { display: flex; height: 100%; }
.sig-form { width: 420px; flex: none; padding: 12px; overflow: auto; border-right: 1px solid #d9e1ee; }
.sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-bottom: 10px; }
.sig-f { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #5a6a82; }
.sig-f span { padding-left: 1px; }
.sig-f input, .sig-f textarea, .sig-f select { font: inherit; }
.sig-f input[type=color] { height: 26px; padding: 1px; }
.sig-right { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 12px; background: #f3f6fb; }
.sig-ph { color: #8a97ab; font-size: 11px; margin-bottom: 6px; }
.sig-preview { background: #fff; border: 1px solid #e1e8f2; border-radius: 6px; padding: 18px; min-height: 120px; overflow: auto; }
.sig-actions { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sig-actions .muted { flex-basis: 100%; font-size: 11px; }
@media (max-width: 760px) { .sig { flex-direction: column; } .sig-form { width: auto; border-right: 0; border-bottom: 1px solid #d9e1ee; } }
.theme-goth .sig-form { border-color: #2c2235; } .theme-goth .sig-right { background: #171019; } .theme-goth .sig-preview { background: #0f0b12; border-color: #2c2235; }
.theme-goth .sig-f { color: #9a8ea6; }

/* ================= DRK Mail-Generator ================= */
.mailgen { display: flex; height: 100%; min-height: 0; }
.mg-left { width: 460px; flex: none; overflow: auto; padding: 10px; border-right: 1px solid #d9e1ee; }
.mg-right { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px; background: #eceae3; overflow: auto; }
.mg-sec { background: #fff; border: 1px solid #e1e8f2; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; }
.mg-sec h4 { margin: 0 0 8px; color: #CC0605; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.mg-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #5a6a82; margin-bottom: 8px; }
.mg-f > span { padding-left: 1px; font-weight: bold; }
.mg-f input, .mg-f textarea, .mg-f select { font: inherit; }
.mg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.mg-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mg-tplsel { flex: 1; min-width: 140px; }
.mg-row .btn { min-width: 0; padding: 3px 8px; }
/* Editor */
.mg-toolbar { display: flex; flex-wrap: wrap; gap: 4px; background: #fafafa; border: 1px solid #cfd6e2; border-bottom: 0; border-radius: 5px 5px 0 0; padding: 5px; }
.mg-tb { border: 1px solid #cfd6e2; background: #fff; color: #333; font-size: 12px; padding: 4px 8px; border-radius: 3px; cursor: pointer; line-height: 1; }
.mg-tb:hover { border-color: #CC0605; color: #CC0605; }
.mg-sep { width: 1px; background: #cfd6e2; margin: 2px 2px; }
.mg-editor { min-height: 160px; border: 1px solid #cfd6e2; border-radius: 0 0 5px 5px; padding: 10px 12px; font-size: 13px; line-height: 1.6; background: #fff; color: #2c2c2c; overflow: auto; }
.mg-editor:focus { outline: none; border-color: #CC0605; }
.mg-editor p { margin: 0 0 12px; } .mg-editor ul, .mg-editor ol { margin: 0 0 12px; padding-left: 22px; } .mg-editor li { margin: 0 0 5px; }
.mg-editor .hinweisbox { background: #fafafa; border-left: 3px solid #CC0605; padding: 10px 14px; margin: 0 0 12px; }
.mg-editor:empty:before { content: attr(data-ph); color: #9a9a9a; }
.mg-settings { background: #fff; border: 1px solid #e1e8f2; border-radius: 6px; padding: 6px 12px 10px; }
.mg-settings summary { cursor: pointer; color: #CC0605; font-size: 12px; font-weight: bold; padding: 4px 0; }
/* Vorschau */
.mg-frame-wrap { flex: 1; min-height: 220px; border: 1px solid #ccc; border-radius: 4px; overflow: auto; background: #f4f4f4; }
.mg-frame { width: 100%; min-width: 620px; height: 100%; min-height: 300px; border: 0; background: #f4f4f4; display: block; }
.mg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.mg-codebox { background: #fff; border: 1px solid #e1e8f2; border-radius: 6px; padding: 6px 10px; }
.mg-codebox summary { cursor: pointer; font-size: 12px; font-weight: bold; color: #444; }
.mg-code { margin: 8px 0 0; max-height: 220px; overflow: auto; background: #1e1e1e; color: #d4d4d4; border-radius: 5px; padding: 10px; font: 11px/1.5 Consolas, monospace; white-space: pre; }
@media (max-width: 820px) { .mailgen { flex-direction: column; } .mg-left { width: auto; border-right: 0; border-bottom: 1px solid #d9e1ee; } .mg-frame { min-height: 360px; } }
/* Dunkles Design */
.theme-goth .mg-left { border-color: #2c2235; } .theme-goth .mg-right { background: #15101a; }
.theme-goth .mg-sec, .theme-goth .mg-settings, .theme-goth .mg-codebox { background: #1a131f; border-color: #2c2235; }
.theme-goth .mg-f { color: #9a8ea6; }
.theme-goth .mg-toolbar { background: #241a2b; border-color: #3b2c45; } .theme-goth .mg-tb { background: #1a131f; border-color: #3b2c45; color: #d7cfe0; }
.theme-goth .mg-editor { background: #fff; color: #2c2c2c; } /* Editor bleibt hell (es ist eine E-Mail) */

/* ================= Einkaufsliste ================= */
.shop { display: flex; flex-direction: column; height: 100%; background: #fff; }
.shop-add { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid #e1e8f2; flex-wrap: wrap; }
.shop-text { flex: 1; min-width: 120px; } .shop-qty { width: 80px; } .shop-cat { width: 150px; }
.shop-recent { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 10px; border-bottom: 1px solid #eef; align-items: center; }
.shop-rec-lbl { font-size: 11px; color: #8a97ab; margin-right: 2px; }
.shop-chip { border: 1px solid #c6d3ea; background: #eef4fd; color: #2f6fd6; border-radius: 12px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.shop-chip:hover { background: #dcebff; }
.shop-list { flex: 1; overflow: auto; padding: 6px 10px 12px; }
.shop-cathead { font-size: 11px; font-weight: bold; color: #5a6a82; text-transform: uppercase; letter-spacing: .4px; margin: 12px 2px 5px; }
.shop-donehead { font-size: 12px; font-weight: bold; color: #9aa6b6; margin: 14px 2px 5px; }
.shop-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-bottom: 1px solid #f1f4f8; }
.shop-row.done .shop-name { text-decoration: line-through; color: #aab4c2; }
.shop-check { flex: none; width: 24px; height: 24px; border: 2px solid #b3c0d4; border-radius: 6px; background: #fff; cursor: pointer; position: relative; }
.shop-check.on { background: #2f9a2f; border-color: #2a7a2a; }
.shop-check.on::after { content: "✓"; position: absolute; inset: 0; color: #fff; text-align: center; line-height: 20px; font-weight: bold; }
.shop-name { flex: 1; cursor: pointer; } .shop-name:hover { color: #1b6fd0; text-decoration: underline; }
.shop-amt { color: #2f6fd6; font-size: 12px; background: #eef4fd; border-radius: 10px; padding: 1px 8px; }
.shop-del { border: 0; background: none; color: #c3cee0; font-size: 18px; cursor: pointer; }
.shop-del:hover { color: #c8202b; }
/* Vorschläge beim Tippen */
.shop-sugg { border-bottom: 1px solid #e1e8f2; max-height: 240px; overflow: auto; background: #fff; }
.shop-sg { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-bottom: 1px solid #f1f4f8; background: none; font: inherit; text-align: left; padding: 8px 12px; cursor: pointer; }
.shop-sg:hover { background: #eef4fd; }
.shop-sg-ic { font-size: 17px; width: 22px; text-align: center; flex: none; }
.shop-sg-tx { flex: 1; min-width: 0; } .shop-sg-tx small { display: block; color: #8a97ab; font-size: 11px; }
.shop-sg-mem { color: #e8a500; }
.shop-sg.have { opacity: .5; }
/* Produktinfo (Open Food Facts) im Detail-Dialog */
.shop-info { min-height: 8px; margin-bottom: 4px; }
.shop-info-load, .shop-info-none { font-size: 12px; padding: 6px 0; }
.shop-prod { display: flex; gap: 12px; align-items: flex-start; padding: 4px 0 8px; }
.shop-prod-img { width: 84px; height: 84px; object-fit: contain; border: 1px solid #e3e9f2; border-radius: 8px; background: #fff; flex: none; }
.shop-prod-name { font-weight: bold; } .shop-prod-sub { font-size: 12px; margin-top: 2px; } .shop-prod-cat { font-size: 11px; margin-top: 2px; }
.shop-prod-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.shop-nutri { color: #fff; font-weight: bold; font-size: 11px; border-radius: 5px; padding: 2px 7px; }
.shop-prod-link { font-size: 12px; color: #2f6fd6; }
.theme-goth .shop-sugg { background: #15101a; } .theme-goth .shop-sg { border-color: #2c2235; } .theme-goth .shop-sg:hover { background: #241830; }
.theme-goth .shop-prod-img { background: #fff; border-color: #2c2235; }
.theme-goth .shop, .theme-goth .shop-list { background: #110c14; }
.theme-goth .shop-add, .theme-goth .shop-recent, .theme-goth .shop-row { border-color: #2c2235; }
.theme-goth .shop-chip { background: #241830; border-color: #4a3756; color: #b48be8; }
.theme-goth .shop-amt { background: #241830; color: #b48be8; }

/* ================= Haushalt & Routinen ================= */
.rt { display: flex; flex-direction: column; height: 100%; background: #f3f6fb; }
.rt-tabs { display: flex; gap: 4px; padding: 10px 10px 0; }
.rt-tab { border: 1px solid #c3cddd; border-bottom: 0; background: #e7eef8; border-radius: 6px 6px 0 0; padding: 6px 14px; cursor: pointer; font: inherit; display: flex; align-items: center; gap: 6px; }
.rt-tab.sel { background: #fff; font-weight: bold; }
.rt-badge { background: #c8202b; color: #fff; border-radius: 9px; font-size: 11px; padding: 0 6px; }
.rt-list { flex: 1; overflow: auto; padding: 10px; background: #fff; border-top: 1px solid #c3cddd; }
.rt-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e3e9f2; border-radius: 10px; margin-bottom: 8px; background: #fff; }
.rt-card.overdue { border-color: #f0b4ad; background: #fff6f5; }
.rt-card.today { border-color: #aac7f0; background: #f4f9ff; }
.rt-done { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #9fcf9f; background: #eefaee; color: #2f9a2f; font-size: 20px; cursor: pointer; }
.rt-done:hover { background: #2f9a2f; color: #fff; border-color: #2a7a2a; }
.rt-main { flex: 1; min-width: 0; }
.rt-title { font-size: 15px; }
.rt-sub { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 3px; font-size: 12px; color: #7b889b; align-items: center; }
.rt-due.overdue { color: #c8202b; font-weight: bold; } .rt-due.today { color: #1b6fd0; font-weight: bold; }
.rt-every { background: #eef2f8; border-radius: 10px; padding: 1px 8px; }
.rt-streak { background: #fff3d6; color: #a86b00; border-radius: 10px; padding: 1px 8px; font-weight: bold; }
.rt-menu { flex: none; border: 0; background: none; color: #8a97ab; font-size: 18px; cursor: pointer; padding: 0 6px; }
.rt-empty { text-align: center; color: #6b7a90; padding: 50px 16px; font-size: 16px; }
.rt-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-quick .btn { min-width: 0; padding: 3px 10px; }
.theme-goth .rt { background: #15101a; } .theme-goth .rt-list { background: #110c14; border-color: #2c2235; }
.theme-goth .rt-tab { background: #1c1522; border-color: #2c2235; color: #d7cfe0; } .theme-goth .rt-tab.sel { background: #110c14; }
.theme-goth .rt-card { background: #1a131f; border-color: #2c2235; } .theme-goth .rt-card.overdue { background: #241217; border-color: #6d2342; } .theme-goth .rt-card.today { background: #15203a; border-color: #2f4a6a; }
.theme-goth .rt-every { background: #241830; } .theme-goth .rt-sub { color: #9a8ea6; }
.rt-empty.sm { padding: 16px; font-size: 14px; }
/* Übersicht */
.rt-ov-top { display: flex; gap: 16px; align-items: center; background: #f6f9fe; border: 1px solid #e3e9f2; border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.rt-ring { --rt-ring-bg: #e3e8ef; flex: none; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; }
.rt-ring-in { width: 70px; height: 70px; border-radius: 50%; background: #fff; display: grid; place-items: center; text-align: center; box-shadow: inset 0 0 0 1px #e3e9f2; }
.rt-ring-in b { font-size: 20px; } .rt-ring-in small { color: #7b889b; font-size: 11px; }
.rt-ov-sum { flex: 1; min-width: 0; }
.rt-ov-h { font-size: 15px; font-weight: bold; margin-bottom: 6px; }
.rt-ov-row2 { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rt-chip { background: #eef2f8; border-radius: 10px; padding: 2px 9px; font-size: 12px; } .rt-chip.warn { background: #fdeceb; color: #c8202b; }
.rt-ov-ord { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #7b889b; }
.rt-bar { flex: 1; height: 9px; background: #e3e8ef; border-radius: 6px; overflow: hidden; } .rt-ov-ord .rt-bar { max-width: 180px; }
.rt-bar-fill { height: 100%; background: #2f6fd6; border-radius: 6px; transition: width .4s; }
.rt-bar-fill.ok { background: #22a06b; } .rt-bar-fill.mid { background: #f59e0b; } .rt-bar-fill.low { background: #e0564a; } .rt-bar-fill.lvl { background: linear-gradient(90deg,#6a9cf0,#2f6fd6); }
.rt-ov-level { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e3e9f2; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.rt-lvl-badge { flex: none; background: linear-gradient(160deg,#4f86e0,#2f6fd6); color: #fff; font-weight: bold; border-radius: 10px; padding: 8px 12px; font-size: 15px; box-shadow: 0 2px 6px rgba(47,111,214,.35); }
.rt-lvl-main { flex: 1; } .rt-lvl-h { font-size: 13px; margin-bottom: 6px; } .rt-lvl-h small { color: #7b889b; }
.rt-ov-sec { font-weight: bold; font-size: 13px; color: #44506a; margin: 14px 2px 8px; }
.rt-ach { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.rt-badge2 { display: flex; align-items: center; gap: 8px; border: 1px solid #e3e9f2; border-radius: 10px; padding: 8px 10px; background: #f8fafd; opacity: .5; filter: grayscale(1); }
.rt-badge2.got { opacity: 1; filter: none; background: #fffdf4; border-color: #f0dca0; }
.rt-ach-em { font-size: 20px; } .rt-ach-nm { font-size: 12px; line-height: 1.1; }
.rt-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; } .rt-check input { margin-top: 2px; }
/* Schichtplan-Editor */
.rt-shift { max-height: 100%; } .rt-sec-h { font-weight: bold; font-size: 12px; color: #44506a; margin: 10px 0 4px; }
.rt-types { display: flex; flex-direction: column; gap: 6px; }
.rt-type-row { display: flex; align-items: center; gap: 8px; } .rt-type-row input[type=text] { flex: 1; min-width: 0; } .rt-type-row input[type=color] { width: 30px; height: 28px; padding: 0; border: 1px solid #c5ccd6; border-radius: 4px; }
.rt-free { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.rt-rot { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; padding: 6px; border: 1px dashed #c5ccd6; border-radius: 8px; }
.rt-rot-chip { background: var(--c, #64748b); color: #fff; border-radius: 10px; padding: 2px 9px; font-size: 12px; cursor: pointer; }
.rt-ov-list { display: flex; flex-direction: column; gap: 4px; }
.rt-ov-ex { display: flex; align-items: center; justify-content: space-between; font-size: 12px; background: #f6f9fe; border-radius: 6px; padding: 3px 8px; }
.muted.sm, .p.sm { font-size: 12px; }
.rt-chip.work { background: #fde9d6; color: #a8610a; font-weight: bold; }
/* Nächste Dienste */
.rt-shifts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.rt-shift { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 8px; border: 1px solid #e3e9f2; border-radius: 8px; background: #fff; }
.rt-shift-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.rt-shift-when { width: 86px; color: #44506a; flex: none; } .rt-shift-lbl { flex: 1; min-width: 0; } .rt-shift-time { color: #7b889b; font-variant-numeric: tabular-nums; }
/* Dienstplan-Editor */
.rt-cal { border: 1px solid #cfe0f5; border-radius: 10px; padding: 8px 10px; margin: 6px 0; background: #f4f9ff; }
.rt-cal-status { font-size: 12px; margin: 4px 0; }
.rt-maps { display: flex; flex-direction: column; gap: 8px; }
.rt-map { border: 1px solid #e3e9f2; border-radius: 8px; padding: 6px 8px; background: #fff; }
.rt-map-top { display: flex; align-items: center; gap: 8px; } .rt-map-top input[type=text] { flex: 1; min-width: 0; } .rt-map-top input[type=color] { width: 28px; height: 26px; padding: 0; border: 1px solid #c5ccd6; border-radius: 4px; flex: none; }
.rt-map-time { display: flex; align-items: center; gap: 10px; margin-top: 5px; font-size: 12px; }
.rt-cal-found { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rt-cal-found .btn { padding: 2px 8px; }
.rt-manual { margin: 6px 0; } .rt-manual > summary { cursor: pointer; font-weight: bold; font-size: 13px; color: #44506a; padding: 4px 0; }
.theme-goth .rt-shift { background: #1a131f; border-color: #2c2235; } .theme-goth .rt-shift-when { color: #cfc6da; }
.theme-goth .rt-cal { background: #15111c; border-color: #2c2235; } .theme-goth .rt-map { background: #1a131f; border-color: #2c2235; } .theme-goth .rt-chip.work { background: #3a2410; color: #f0b26a; }
/* Webseiten-Schutz */
.gate-btn { min-width: 0; padding: 3px 8px; font-size: 12px; } .gate-btn.on { background: #eaf4ff; border-color: #9cc3ef; font-weight: bold; }
.gate-methods { border: 1px solid #e3e9f2; border-radius: 8px; padding: 8px 10px; margin: 6px 0; background: #f8fafd; }
.gate-codes { border: 1px dashed #c3cddd; border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.gate-codes-info { font-size: 12px; margin-bottom: 6px; }
.gate-code-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.gate-code { background: #fffbe8; border: 1px solid #e7d58a; border-radius: 6px; padding: 4px 9px; font: bold 14px "Consolas", monospace; letter-spacing: 1px; }
.theme-goth .gate-methods { background: #1a131f; border-color: #2c2235; } .theme-goth .gate-codes { border-color: #2c2235; } .theme-goth .gate-code { background: #241a10; border-color: #6b5520; color: #f0e2b0; }
/* Goth-Varianten */
.theme-goth .rt-ov-top, .theme-goth .rt-ov-level, .theme-goth .rt-badge2 { background: #1a131f; border-color: #2c2235; }
.theme-goth .rt-ring-in { background: #15101a; box-shadow: inset 0 0 0 1px #2c2235; color: #e7dff0; }
.theme-goth .rt-chip, .theme-goth .rt-bar, .theme-goth .rt-rot { background: #241830; } .theme-goth .rt-chip.warn { background: #3a1620; }
.theme-goth .rt-ov-sec, .theme-goth .rt-sec-h, .theme-goth .rt-ov-h, .theme-goth .rt-lvl-h { color: #cfc6da; }
.theme-goth .rt-badge2.got { background: #241a10; border-color: #6b5520; }
.theme-goth .gate-btn.on { background: #241830; border-color: #5a3a7a; }
.theme-goth .rt-ov-ex { background: #15101a; }

/* ===== Präsentation ===== */
.pres { height: 100%; }
.pres-list { padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pres-card { display: flex; align-items: center; gap: 10px; border: 1px solid #e3e9f2; border-radius: 10px; padding: 12px; background: #fff; cursor: pointer; }
.pres-card:hover { border-color: #9cc3ef; } .pres-card-ic { font-size: 26px; } .pres-card-title { font-weight: bold; }
.pres-card-menu { margin-left: auto; border: 0; background: none; cursor: pointer; color: #8a97ab; font-size: 18px; }
.pres-ed { display: flex; height: 100%; }
.pres-left { width: 196px; border-right: 1px solid #d6deea; display: flex; flex-direction: column; min-height: 0; }
.pres-strip { flex: 1; overflow: auto; padding: 8px; }
.pres-th { position: relative; border: 2px solid transparent; border-radius: 6px; margin-bottom: 8px; cursor: pointer; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pres-th.sel { border-color: #2f6fd6; }
.pres-th-img { width: 100%; display: block; border-radius: 4px; max-height: 110px; object-fit: contain; background: #eef2f8; }
.pres-th-n { position: absolute; left: 4px; top: 4px; background: rgba(0,0,0,.6); color: #fff; border-radius: 8px; font-size: 11px; padding: 0 6px; }
.pres-th-note { position: absolute; right: 4px; top: 4px; }
.pres-drop { border-top: 1px solid #d6deea; padding: 12px; text-align: center; color: #5a6a82; font-size: 12px; cursor: pointer; }
.pres-drop.over { background: #eaf3ff; outline: 2px dashed #2f6fd6; outline-offset: -4px; } .pres-drop.off { cursor: default; color: #aab4c2; }
.pres-right { flex: 1; display: flex; flex-direction: column; padding: 12px; min-width: 0; }
.pres-prev { flex: 1; display: flex; align-items: center; justify-content: center; background: #eef2f8; border-radius: 8px; overflow: hidden; min-height: 0; }
.pres-prev-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pres-prev-bar { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.pres-note-lbl { font-size: 12px; font-weight: bold; color: #44506a; margin-bottom: 4px; }
.pres-note-in { width: 100%; min-height: 84px; box-sizing: border-box; resize: vertical; }
.pres-dp { display: flex; flex-direction: column; height: 100%; } .pres-dp-list { flex: 1; overflow: auto; border: 1px solid #e3e9f2; border-radius: 6px; margin: 6px 0; background: #fff; }
.pres-dp-pad { padding: 12px; }
.pres-dp-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid #f1f4f8; cursor: pointer; }
.pres-dp-row:hover { background: #f2f7ff; }
.pres-dp-row.folder .pres-dp-nm { font-weight: 600; }
.pres-dp-row.file { cursor: pointer; } .pres-dp-row.file.sel { background: #e7f0ff; }
.pres-dp-row.file input { width: 16px; height: 16px; cursor: pointer; flex: none; }
.pres-dp-ic { font-size: 20px; width: 40px; text-align: center; flex: none; }
.pres-dp-th { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; background: #eef1f6; border: 1px solid #e3e9f2; flex: none; }
.pres-dp-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pres-dp-go { color: #9aa7bd; font-size: 16px; flex: none; }
.pres-dp-group { padding: 6px 10px 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #8894a8; background: #f7f9fc; border-bottom: 1px solid #eef1f6; position: sticky; top: 0; }
.pres-dp-crumb { font-size: 13px; display: flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.pres-dp-cr { color: #2f6fd6; text-decoration: none; } b.pres-dp-cr { color: #1b2838; } .pres-dp-cr:hover { text-decoration: underline; }
.pres-dp-csep { color: #9aa7bd; margin: 0 2px; }
.pres-dp-tools { display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: 12px; padding: 2px 2px 0; }
.pres-dp-foot { margin-top: 2px; }
.pres-dp-badge { flex: none; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: #2f6fd6; background: #e7f0ff; border: 1px solid #cfe0fb; border-radius: 4px; padding: 1px 5px; }
/* Meine Dateien (verschlüsselter Desktop-Dateibereich) */
.mf { display: flex; flex-direction: column; height: 100%; }
.mf-crumb { padding: 6px 10px; font-size: 13px; display: flex; align-items: center; flex-wrap: wrap; gap: 3px; border-bottom: 1px solid #e3e9f2; background: #f7f9fc; }
.mf-crumb a { color: #2f6fd6; text-decoration: none; } .mf-crumb a:hover { text-decoration: underline; } .mf-csep { color: #9aa7bd; margin: 0 2px; }
.mf-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 10px; align-content: start; }
.mf-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.mf-item:hover { background: #f2f7ff; } .mf-item:focus { outline: none; background: #e7f0ff; border-color: #9bc0ef; }
.mf-ic { width: 26px; text-align: center; flex: none; } .mf-ic img, .mf-ic svg { width: 22px; height: 22px; vertical-align: middle; }
.mf-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.mf-sz { color: #8894a8; font-size: 11px; flex: none; }
.mf-empty { grid-column: 1/-1; color: #5a6a82; padding: 18px; text-align: center; }
.mf-note { border-top: 1px solid #e3e9f2; padding: 6px 10px; font-size: 11px; color: #5a6a82; background: #f7f9fc; }
.mf-pool { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.mf-pool-list { flex: 1; overflow: auto; border: 1px solid #e3e9f2; border-radius: 6px; background: #fff; }
.mf-pool-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #f1f4f8; }
.mf-pool-nm { flex: 1; font-size: 13px; } .mf-pool-id { color: #8894a8; font-size: 11px; }
.mf-pool-in { flex: 1; padding: 5px 8px; border: 1px solid #c3cee0; border-radius: 5px; font-size: 13px; }
.mf-pool-msg { min-height: 16px; font-size: 12px; }
.theme-goth .mf-crumb, .theme-goth .mf-note { background: #1a131f; border-color: #2c2235; color: #9a8aad; }
.theme-goth .mf-item:hover { background: #241a2d; } .theme-goth .mf-item:focus { background: #2a1c3a; border-color: #3a2b4d; }
.theme-goth .mf-pool-list { background: #140e1a; border-color: #2c2235; } .theme-goth .mf-pool-row { border-color: #241a2d; }
.pres-tx-lbl { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12px; color: #33455f; }
.pres-tx { padding: 3px 6px; border: 1px solid #9bb3d6; border-radius: 4px; font-size: 12px; background: #fff; }
.theme-goth .pres-dp-badge { color: #c9b6e0; background: #2a1c3a; border-color: #3a2b4d; }
/* PDF-Import */
.pres-pdf-load { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px; text-align: center; color: #45506a; font-size: 13px; }
.pres-pdf-load .spin { width: 28px; height: 28px; border: 3px solid #cdd8ea; border-top-color: #2f6fd6; border-radius: 50%; animation: pres-spin .8s linear infinite; }
@keyframes pres-spin { to { transform: rotate(360deg); } }
.pres-pdf { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.pres-pdf-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .pres-pdf-head b { font-size: 14px; }
.pres-pdf-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pres-pdf-range { flex: 1; min-width: 110px; padding: 4px 7px; border: 1px solid #c3cee0; border-radius: 5px; font-size: 12px; }
.pres-pdf-opts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 10px; background: #eef3fb; border: 1px solid #dde6f3; border-radius: 6px; font-size: 12px; }
.pres-pdf-opts > label { display: flex; align-items: center; gap: 6px; color: #45506a; }
.pres-pdf-f { padding: 4px 6px; border: 1px solid #c3cee0; border-radius: 5px; font-size: 12px; }
.pres-pdf-trim { cursor: pointer; }
.pres-pdf-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 6px; border: 1px solid #e3e9f2; border-radius: 6px; background: #f7f9fc; }
.pres-pdf-cell { position: relative; display: block; border: 2px solid #d6deea; border-radius: 6px; overflow: hidden; cursor: pointer; background: #fff; }
.pres-pdf-cell.on { border-color: #2f6fd6; box-shadow: 0 0 0 1px #2f6fd6 inset; }
.pres-pdf-cell input { position: absolute; top: 5px; left: 5px; z-index: 2; width: 16px; height: 16px; cursor: pointer; }
.pres-pdf-th { display: block; width: 100%; height: 118px; object-fit: contain; background: #fff; }
.pres-pdf-pn { display: block; text-align: center; font-size: 11px; padding: 3px 0; color: #5a6a82; background: #eef1f6; }
.pres-pdf-foot { margin-top: 2px; } .btn.sm { padding: 3px 9px; font-size: 12px; }
/* Vollbild-Präsentationsmodus */
.pv-overlay { position: fixed; inset: 0; z-index: 50000; background: #000; display: flex; flex-direction: column; }
.pv-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #111; touch-action: none; }
.pv-frame { position: relative; display: inline-block; transform-origin: center; }
.pv-img { max-width: 96vw; max-height: 82vh; display: block; user-select: none; -webkit-user-drag: none; }
.pv-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.pv-stage.draw .pv-canvas { pointer-events: auto; cursor: crosshair; }
.pv-note { position: absolute; left: 50%; transform: translateX(-50%); bottom: 72px; max-width: 900px; width: calc(100% - 60px); background: rgba(0,0,0,.74); color: #fff; padding: 14px 18px; font-size: 19px; line-height: 1.4; border-radius: 10px; white-space: pre-wrap; }
.pv-bar { flex: none; display: flex; align-items: center; gap: 6px; justify-content: center; padding: 8px; background: #1b1b1f; color: #fff; flex-wrap: wrap; }
.pv-btn { background: #2c2c33; color: #fff; border: 1px solid #444; border-radius: 6px; padding: 7px 11px; font-size: 15px; cursor: pointer; }
.pv-btn:hover { background: #3a3a42; } .pv-btn.on { background: #2f6fd6; border-color: #2f6fd6; } .pv-btn.close { background: #a33; border-color: #a33; }
.pv-count { color: #fff; min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.pv-sep { width: 1px; height: 22px; background: #444; margin: 0 4px; }
.pv-swatch-wrap { display: flex; gap: 4px; }
.pv-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #555; cursor: pointer; padding: 0; } .pv-swatch.on { border-color: #fff; box-shadow: 0 0 0 2px #2f6fd6; }
.pv-tx { background: #2c2c33; color: #fff; border: 1px solid #444; border-radius: 6px; padding: 6px 8px; font-size: 13px; cursor: pointer; }
/* Übergangsanimationen (an Windows XP angelehnt) – wirken auf die Folienebene .pv-anim */
.pv-anim { display: inline-block; transform-origin: 50% 50%; }
.pv-anim.run[data-tx="fade"] { animation: tx-fade .45s ease both; }
.pv-anim.run[data-tx="slide"] { animation: tx-slide .4s cubic-bezier(.22,.61,.36,1) both; }
.pv-anim.run[data-tx="zoom"] { animation: tx-zoom .38s cubic-bezier(.2,.7,.3,1) both; }
.pv-anim.run[data-tx="wipe"] { animation: tx-wipe .5s ease both; }
.pv-anim.run[data-tx="curtain"] { animation: tx-curtain .5s ease both; }
@keyframes tx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tx-slide { from { opacity: .4; transform: translateX(6%); } to { opacity: 1; transform: translateX(0); } }
@keyframes tx-zoom { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes tx-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tx-curtain { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .pv-anim.run { animation-duration: .01ms !important; } }
.theme-goth .pres-card, .theme-goth .pres-th { background: #1a131f; border-color: #2c2235; } .theme-goth .pres-left { border-color: #2c2235; }
.theme-goth .pres-prev, .theme-goth .pres-th-img { background: #110c14; } .theme-goth .pres-dp-list { border-color: #2c2235; background: #140e1a; }
.theme-goth .pres-dp-row { border-color: #241a2d; } .theme-goth .pres-dp-row:hover { background: #241a2d; } .theme-goth .pres-dp-row.file.sel { background: #2a1c3a; }
.theme-goth .pres-dp-group { background: #1a131f; color: #9a8aad; border-color: #241a2d; } .theme-goth b.pres-dp-cr { color: #e7def0; } .theme-goth .pres-dp-th { background: #1a131f; border-color: #2c2235; }
.theme-goth .pres-pdf-grid { background: #140e1a; border-color: #2c2235; } .theme-goth .pres-pdf-cell { background: #1a131f; border-color: #2c2235; }
.theme-goth .pres-pdf-th { background: #140e1a; } .theme-goth .pres-pdf-pn { background: #241a2d; color: #b9a7c8; }
.theme-goth .pres-pdf-opts { background: #1a131f; border-color: #2c2235; } .theme-goth .pres-pdf-opts > label { color: #b9a7c8; }