:root { color-scheme: light; --ink:#1c2430; --muted:#5d6878; --line:#d9dee6; --bg:#f4f6f9; --card:#fff; --accent:#1f5fbf; --danger:#a4221c; --danger-bg:#fdeceb; --warn:#7a5200; --warn-bg:#fff5de; --ok:#176a3a; --ok-bg:#e7f6ec; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); }
.top { display:flex; align-items:center; gap:24px; padding:12px 24px; background:var(--card); border-bottom:1px solid var(--line); }
.top nav { display:flex; gap:16px; flex:1; }
.top a { color:var(--ink); text-decoration:none; padding:4px 2px; }
.top a[aria-current] { border-bottom:2px solid var(--accent); font-weight:600; }
main { max-width:1040px; margin:24px auto; padding:0 16px; }
h1 { font-size:1.5rem; margin:0 0 12px; } h2 { font-size:1.15rem; margin:0 0 4px; } h3 { font-size:.95rem; margin:16px 0 6px; }
.heading { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:20px; margin:16px 0; }
.narrow { max-width:380px; margin:60px auto; }
.stack { display:grid; gap:12px; }
label { display:grid; gap:4px; font-weight:600; font-size:.9rem; flex:1; }
input[type=url],input[type=password],input:not([type]) { padding:8px 10px; border:1px solid var(--line); border-radius:6px; font:inherit; width:100%; }
button,.button { background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:6px; padding:8px 14px; font:inherit; cursor:pointer; text-decoration:none; display:inline-block; }
button.secondary,.button.secondary { background:#fff; color:var(--accent); }
button.small { font-size:.8rem; padding:4px 8px; }
button.link { background:none; border:0; color:var(--muted); padding:0; }
button:disabled { opacity:.45; cursor:not-allowed; }
.inline { display:flex; gap:12px; align-items:end; margin:12px 0; flex-wrap:wrap; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.meta,.muted { color:var(--muted); font-size:.9rem; margin:4px 0; }
.banner { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 24px; flex-wrap:wrap; }
.banner.danger { background:var(--danger-bg); color:var(--danger); border-bottom:1px solid #f2c6c3; }
.flash { padding:10px 14px; border-radius:6px; margin:10px 0; }
.flash.ok { background:var(--ok-bg); color:var(--ok); } .flash.fehler { background:var(--danger-bg); color:var(--danger); }
.flash.warnung { background:var(--warn-bg); color:var(--warn); } .flash.hinweis { background:#e9f0fb; color:#1c4a8f; }
.state { padding:3px 10px; border-radius:999px; font-size:.85rem; font-weight:600; background:#e8ebf0; }
.state.connected { background:var(--ok-bg); color:var(--ok); } .state.manual_required,.state.no_group_access { background:var(--danger-bg); color:var(--danger); } .state.temporary_error { background:var(--warn-bg); color:var(--warn); }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:14px 0; }
.facts dt { font-size:.8rem; color:var(--muted); } .facts dd { margin:0; font-weight:600; }
.tabs { display:flex; gap:12px; } .tabs a { color:var(--muted); text-decoration:none; } .tabs a[aria-current] { color:var(--accent); font-weight:600; }
.skills { list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:10px 0; }
.skills li { background:#e9f0fb; color:#1c4a8f; padding:2px 10px; border-radius:999px; font-size:.85rem; }
.contacts { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.contacts li { display:grid; gap:1px; } .contacts .label { font-size:.8rem; color:var(--muted); } .contacts q { font-size:.85rem; color:var(--muted); }
.contacts a,.contacts span { overflow-wrap:anywhere; }
table { width:100%; border-collapse:collapse; font-size:.85rem; } th,td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
@media (max-width:640px) { table { display:block; overflow-x:auto; } }
#vnc-screen { width:100%; height:72vh; background:#20242b; border-radius:6px; overflow:hidden; margin:12px 0; }