:root{--bg:#f4f6f7;--card:#fff;--fg:#1a1d1f;--muted:#6b7378;--line:#e1e5e8;--accent:#00a6a6;--accent-dark:#008a8a;--warn-bg:#fff6e0;--warn-fg:#8a5a00;--err-bg:#fde8e8;--err-fg:#9b1c1c;--ok-bg:#e3f7ee;--ok-fg:#1d6b45;--shadow:0 1px 3px rgba(0,0,0,.06);--accent-soft:#e6f6f6;--solid:#171717;--solid-fg:#fff;--solid-hover:#262626;--danger-text:#dc2626}
:root[data-theme="dark"]{--bg:#121416;--card:#1b1f22;--fg:#e8eaec;--muted:#9aa3a9;--line:#2c3236;--accent:#19bdbd;--accent-dark:#0fa3a3;--warn-bg:#3a2d10;--warn-fg:#f3c76b;--err-bg:#3e1a1a;--err-fg:#f5a3a3;--ok-bg:#163327;--ok-fg:#7fd6a8;--shadow:none;--accent-soft:#12302f;--solid:#f5f5f5;--solid-fg:#171717;--solid-hover:#fff;--danger-text:#f87171}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121416;--card:#1b1f22;--fg:#e8eaec;--muted:#9aa3a9;--line:#2c3236;--accent:#19bdbd;--accent-dark:#0fa3a3;--warn-bg:#3a2d10;--warn-fg:#f3c76b;--err-bg:#3e1a1a;--err-fg:#f5a3a3;--ok-bg:#163327;--ok-fg:#7fd6a8;--shadow:none;--accent-soft:#12302f;--solid:#f5f5f5;--solid-fg:#171717;--solid-hover:#fff;--danger-text:#f87171}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent-dark)}
h1{font-size:1.6rem;margin:.2rem 0 .6rem}h2{font-size:1.1rem;margin:0 0 .5rem}h2.inline{display:inline;cursor:pointer}h3{margin:0 0 .5rem}
code{font-size:.85em;background:var(--bg);padding:.1em .35em;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top-inner{display:flex;align-items:center;min-height:56px;gap:12px;flex-wrap:wrap}
.brand{order:1;font-weight:700;text-decoration:none;color:var(--fg);display:flex;align-items:center;gap:8px}
.logo{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--accent);color:#fff;font-weight:800}
nav{order:2;flex:1;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--muted);padding:6px 10px;border-radius:8px;height:36px;display:inline-flex;align-items:center}
nav a.on,nav a:hover{color:var(--fg);background:var(--bg)}
main{padding:20px 16px 40px}
.foot{color:var(--muted);font-size:.85rem;padding:20px 16px 30px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:16px}
.card.narrow{max-width:440px;margin:40px auto}
.card.attention{border-color:#f0b24a;box-shadow:0 0 0 3px var(--warn-bg)}
.grid{display:grid;gap:16px;grid-template-columns:1fr}
.grid.two{grid-template-columns:1fr}
@media (min-width:860px){.grid.two{grid-template-columns:1fr 1fr}.grid:not(.two){grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}
.jobcard{text-decoration:none;color:inherit;display:block}.jobcard:hover{border-color:var(--accent)}
.jobhead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.crumbs{margin:0;color:var(--muted);font-size:.9rem}
.muted{color:var(--muted)}.small{font-size:.85rem}.nowrap{white-space:nowrap}.warntext{color:var(--warn-fg)}
.facts{list-style:none;padding:0;margin:0 0 8px}.facts li{padding:3px 0}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:.8rem;line-height:1.4}
.pill.warn{background:var(--warn-bg);color:var(--warn-fg);border-color:transparent}.pill.err{background:var(--err-bg);color:var(--err-fg);border-color:transparent}.pill.ok{background:var(--ok-bg);color:var(--ok-fg);border-color:transparent}
.flash{padding:10px 14px;border-radius:10px;margin-bottom:12px;border:1px solid transparent}
.flash.ok{background:var(--ok-bg);color:var(--ok-fg)}.flash.err{background:var(--err-bg);color:var(--err-fg)}.flash.warn{background:var(--warn-bg);color:var(--warn-fg)}
.flash a{color:inherit;font-weight:600;margin-left:6px}
/* Buttons: in einer Zeile immer gleich hoch */
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--fg);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{background:var(--accent-dark)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--err-fg);border-color:var(--err-fg)}.btn.danger:hover{background:var(--err-bg)}
.btn.small{height:32px;padding:0 12px;font-size:.85rem;border-radius:8px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.filebtn{position:relative}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row.end{justify-content:flex-end}.row.tight{gap:6px}
.stack{display:flex;flex-direction:column;gap:12px}.stack.tight{gap:6px}
.inline{display:inline}
form.inline{display:inline-block;margin:0}
label{display:flex;flex-direction:column;gap:4px;font-size:.9rem}
.inline-label{flex-direction:row;align-items:center;gap:6px}
input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);height:40px}
input.short{width:84px;height:32px;padding:4px 8px}
.fields{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:760px){.fields{grid-template-columns:1fr 1fr}}
.field .lbl{font-weight:600}.field .help{color:var(--muted);font-size:.82rem}
.field.check{flex-direction:row;align-items:center;gap:8px;grid-column:1/-1}.field.check input{height:auto;width:18px}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{text-align:left;color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;padding:6px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl.compact td{padding:6px 8px}
.rowerr td{background:var(--err-bg)}
.log{list-style:none;padding:0;margin:0;max-height:520px;overflow:auto;font-size:.9rem}
.log li{padding:6px 0;border-bottom:1px solid var(--line)}
.log li.lvl-warn{color:var(--warn-fg)}.log li.lvl-error{color:var(--err-fg)}
details.sub{margin-top:8px}details.sub summary{cursor:pointer;color:var(--muted);font-size:.9rem}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:50;padding:16px}
.modal-backdrop[hidden]{display:none}
.modal{background:var(--card);color:var(--fg);border-radius:14px;padding:22px;max-width:460px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
@media (max-width:700px){.tbl thead{display:none}.tbl tr{display:block;border-bottom:2px solid var(--line);padding:8px 0}.tbl td{display:block;border:0;padding:4px 0}}
/* Login (nach dem Vorbild von EII-Projekte) */
.auth-body{background:var(--bg)}
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.auth-box{width:100%;max-width:448px}
.auth-logo{display:flex;justify-content:center;margin-bottom:32px}
.auth-logo img{width:180px;height:auto;display:block}
.auth-logo .logo-dark{display:none}
:root[data-theme="dark"] .auth-logo .logo-light{display:none}
:root[data-theme="dark"] .auth-logo .logo-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .auth-logo .logo-light{display:none}:root:not([data-theme="light"]) .auth-logo .logo-dark{display:block}}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:32px;box-shadow:var(--shadow)}
.auth-title{font-size:1.25rem;font-weight:700;text-align:center;margin:0 0 8px}
.auth-sub{text-align:center;color:var(--muted);font-size:.9rem;margin:0 0 28px}
.auth-notice{background:#fffbeb;border:1px solid #fcd34d;color:#92400e;border-radius:10px;padding:10px 14px;font-size:.9rem;margin-bottom:16px}
:root[data-theme="dark"] .auth-notice{background:#3a2d10;border-color:#7a5a12;color:#f3c76b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .auth-notice{background:#3a2d10;border-color:#7a5a12;color:#f3c76b}}
.auth-form{display:flex;flex-direction:column;gap:16px}
.auth-field{display:flex;flex-direction:column;gap:4px}
.auth-field label{font-size:.88rem;font-weight:500}
.auth-field input{width:100%;height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:.95rem}
.auth-field input:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.pw-toggle{position:absolute;right:0;top:0;height:44px;width:44px;display:grid;place-items:center;background:none;border:0;color:var(--muted);cursor:pointer;border-radius:10px}
.pw-toggle:hover{color:var(--fg)}
.pw-toggle .eye-off{display:none}.pw-toggle.on .eye-on{display:none}.pw-toggle.on .eye-off{display:block}
label.auth-check{flex-direction:row;align-items:center;gap:8px;color:var(--muted);font-size:.9rem;user-select:none;cursor:pointer}
.auth-check input{width:16px;height:16px;padding:0;accent-color:var(--fg)}
.auth-error{color:#dc2626;font-size:.9rem;margin:0}
:root[data-theme="dark"] .auth-error{color:#f5a3a3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .auth-error{color:#f5a3a3}}
.auth-submit{width:100%;height:44px;border:0;border-radius:10px;background:#171717;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.auth-submit:hover{background:#262626}
.auth-submit[disabled]{opacity:.5;cursor:not-allowed}
:root[data-theme="dark"] .auth-submit{background:#f5f5f5;color:#171717}:root[data-theme="dark"] .auth-submit:hover{background:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .auth-submit{background:#f5f5f5;color:#171717}:root:not([data-theme="light"]) .auth-submit:hover{background:#fff}}
.auth-hint{text-align:center;color:var(--muted);font-size:.78rem;margin:0}
.auth-hint a{color:var(--muted);text-decoration:none}.auth-hint a:hover{color:var(--fg);text-decoration:underline}
.auth-success{background:var(--ok-bg);color:var(--ok-fg);border-radius:10px;padding:10px 14px;font-size:.9rem;margin-bottom:16px}
.auth-linkbtn{display:flex;align-items:center;justify-content:center;text-decoration:none;margin-bottom:16px}
.auth-foot{text-align:center;color:var(--muted);font-size:.78rem;margin:24px 0 0}
/* Reiter (Einstellungen: System | Konten) */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:0 0 16px;flex-wrap:wrap}
.tab{display:inline-flex;align-items:center;height:40px;padding:0 16px;margin-bottom:-1px;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;color:var(--muted);text-decoration:none;font-weight:600}
.tab:hover{color:var(--fg);background:var(--bg)}
.tab.on{color:var(--fg);background:var(--card);border-color:var(--line);box-shadow:inset 0 2px 0 var(--accent)}
/* System-Einstellungen */
.keymeta{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--muted);font-size:.88rem;margin:0 0 12px}
.row.between{justify-content:space-between}

/* Konten + Profil */
.fields.three{grid-template-columns:1fr}
@media (min-width:760px){.fields.three{grid-template-columns:1fr 1fr 180px}}
.rowoff td{opacity:.6}
.actions{flex-wrap:wrap}
.inline-form{display:inline-flex;gap:6px;align-items:center;margin:0}
.small-select{height:32px;padding:4px 8px;font-size:.85rem}
.startpw{border-color:var(--accent);box-shadow:0 0 0 3px var(--ok-bg)}
.startpw-row{margin:8px 0}
.startpw-code{font-size:1.15rem;padding:9px 14px;background:var(--bg);border:1px dashed var(--accent);border-radius:8px;letter-spacing:.03em;user-select:all;word-break:break-all}
.profile-head{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.theme-switch{display:flex;gap:8px}
.theme-switch .btn{flex:1}
.theme-switch .btn.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* Header rechts: App-Switcher, Glocke, Avatar (Optik nach EII-Projekte) */
.ico{flex:none;display:block}
.top-right{order:3;margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.dd{position:relative}
.icon-btn,.bell-btn,.avatar{font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.icon-btn{width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--muted)}
.icon-btn:hover{background:var(--bg);color:var(--accent-dark)}
.bell-btn{position:relative;width:36px;height:36px;border-radius:8px;border:0;background:transparent;color:var(--muted)}
.bell-btn.has-unread{color:var(--fg)}
.bell-btn:hover{background:var(--bg)}
.bell-count{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}
.bell-count[hidden]{display:none}
.avatar{width:36px;height:36px;border-radius:50%;border:0;background:var(--solid);color:var(--solid-fg);font-weight:600;font-size:.85rem;overflow:hidden}
button.avatar:hover{background:var(--solid-hover)}
.avatar-lg{width:56px;height:56px;font-size:1.15rem;flex:none}
.icon-btn:focus-visible,.bell-btn:focus-visible,.avatar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dd-panel{position:absolute;right:0;top:100%;margin-top:8px;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.16);overflow:hidden}
.dd-panel[hidden]{display:none}
.dd-apps{width:288px;padding:12px;overflow:visible}
.dd-label{padding:0 4px;margin-bottom:8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.app-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:92px;padding:12px;border:1px solid var(--line);border-radius:8px;text-align:center;text-decoration:none;color:var(--fg);transition:background .12s,border-color .12s}
a.app-tile:hover{background:var(--bg);border-color:var(--accent);color:var(--accent-dark)}
.app-name{font-size:.78rem;font-weight:500}
.app-tile.current{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark)}
.app-here{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-dark)}
:root[data-theme="dark"] .app-tile.current,:root[data-theme="dark"] .app-here{color:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .app-tile.current,:root:not([data-theme="light"]) .app-here{color:var(--accent)}}
.dd-user{width:224px}
.dd-userhead{padding:12px 16px;border-bottom:1px solid var(--line)}
.dd-name{margin:0;font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-mail{margin:0;font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-list{list-style:none;margin:0;padding:4px 0}
.dd-list a{display:block;padding:8px 16px;font-size:.9rem;color:var(--fg);text-decoration:none}
.dd-list a:hover{background:var(--bg)}
.dd-logout{margin:0;border-top:1px solid var(--line);padding:4px 0}
.dd-logout button{display:block;width:100%;text-align:left;padding:8px 16px;border:0;background:none;color:var(--danger-text);font:inherit;font-size:.9rem;cursor:pointer}
.dd-logout button:hover{background:var(--err-bg)}
/* Glocke */
.dd-bell{width:384px;max-width:calc(100vw - 2rem)}
.bell-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line)}
.bell-title{font-size:.9rem;font-weight:600}
.bell-tools{display:flex;gap:12px}
.linklike{border:0;background:none;padding:0;font:inherit;font-size:.78rem;color:var(--muted);text-decoration:underline;cursor:pointer}
.linklike:hover{color:var(--fg)}
.linklike[hidden]{display:none}
.bell-empty{padding:24px 12px;text-align:center;font-size:.9rem;color:var(--muted)}
.bell-empty[hidden]{display:none}
.bell-list{list-style:none;margin:0;padding:0;max-height:384px;overflow-y:auto}
.bell-row{border-bottom:1px solid var(--line)}
.bell-row:last-child{border-bottom:0}
.bell-item{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;color:inherit;text-decoration:none}
.bell-item.clickable{cursor:pointer}
.bell-item.clickable:hover{background:var(--bg)}
.bell-row.read .bell-item{opacity:.5}
.bell-ico{flex:none;width:20px;text-align:center;font-size:1rem;line-height:20px}
.bell-text{flex:1;min-width:0}
.bell-t1{margin:0;font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bell-row.read .bell-t1{font-weight:500;color:var(--muted)}
.bell-t2{margin:2px 0 0;font-size:.78rem;line-height:1.3;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bell-t3{margin:2px 0 0;font-size:11px;color:var(--muted)}
.bell-check{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:none;color:var(--muted);cursor:pointer;padding:0}
.bell-check:hover{background:var(--line);color:var(--fg)}
.bell-readmark{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
@media (max-width:700px){
  .top-right{order:2}
  nav{order:3;flex:1 0 100%}
  .dd{position:static}
  .dd-panel{left:16px;right:16px;width:auto;max-width:none;margin-top:0}
}
