:root {
    --navy:#12263f; --navy-2:#193451; --ink:#172335; --muted:#6d7785;
    --line:#dfe5ec; --soft:#f4f6f9; --blue:#2479ca; --cyan:#35b9d1;
    --green:#2aa876; --orange:#e89536; --red:#d75c62; --white:#fff;
    font-family:Inter,Segoe UI,Arial,sans-serif; color:var(--ink); background:#eef1f5;
}
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:#eef1f5; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.42; }
#appMeta { display:none; }
.app-shell { min-height:100vh; }
.topbar {
    height:76px; display:flex; align-items:center; justify-content:space-between;
    padding:0 30px; color:#fff; background:linear-gradient(105deg,#10243c,#193b59);
    box-shadow:0 2px 12px #10243c33;
}
.brand { display:flex; align-items:center; gap:18px; color:#fff; text-decoration:none; }
.brand img { width:112px; height:auto; display:block; }
.brand span { padding-left:18px; border-left:1px solid #ffffff44; display:grid; gap:2px; }
.brand strong { font-size:19px; letter-spacing:.2px; }
.brand small { color:#b9cad9; font-size:12px; }
.top-actions { display:flex; align-items:center; gap:16px; }
.db-badge { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #ffffff2b; border-radius:20px; font-size:12px; color:#d5e3ed; }
.db-badge i { width:8px; height:8px; border-radius:50%; background:#4bd59e; box-shadow:0 0 0 4px #4bd59e22; }
.role-switch { display:grid; gap:3px; }
.role-switch span { font-size:10px; color:#aebfce; text-transform:uppercase; letter-spacing:.8px; }
.role-switch select { min-width:245px; color:#fff; background:#ffffff12; border:1px solid #ffffff2b; border-radius:7px; padding:7px 30px 7px 10px; }
.role-switch option { color:#172335; }
.avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#35b9d1; color:#0d2d43; font-size:12px; font-weight:800; }
.commandbar {
    height:64px; display:flex; align-items:center; justify-content:space-between;
    padding:0 30px; background:#fff; border-bottom:1px solid var(--line);
}
.commandbar > div { display:flex; gap:9px; }
.commandbar button,.record-nav button {
    min-height:36px; padding:0 14px; color:#324154; background:#fff; border:1px solid #ccd4de; border-radius:7px; font-weight:600; font-size:13px;
}
.commandbar button:hover:not(:disabled) { background:#f5f8fb; border-color:#aab6c4; }
.commandbar button.primary { background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 4px 10px #2479ca2c; }
main { padding:22px 30px 34px; max-width:1700px; margin:auto; }
.overview { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.overview article { position:relative; min-height:102px; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 2px 8px #1723350a; }
.overview article::before { content:""; position:absolute; top:16px; right:16px; width:7px; height:7px; border-radius:50%; background:var(--cyan); }
.overview span,.overview small { display:block; color:var(--muted); font-size:12px; }
.overview strong { display:block; margin:7px 0 2px; font-size:25px; color:#182b42; }
.workspace { min-height:690px; display:grid; grid-template-columns:345px minmax(0,1fr); background:#fff; border:1px solid var(--line); border-radius:11px; overflow:hidden; box-shadow:0 8px 28px #1723350c; }
.record-browser { background:#f7f9fb; border-right:1px solid var(--line); min-width:0; }
.browser-head { height:74px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.browser-head div { display:grid; gap:3px; }
.browser-head small,.eyebrow,dialog header small { font-size:10px; color:#8190a1; letter-spacing:1.2px; font-weight:700; }
.browser-head strong { font-size:17px; }
.browser-head > span { min-width:31px; padding:6px; text-align:center; border-radius:16px; color:#225e93; background:#e0edf8; font-size:12px; font-weight:800; }
.search { margin:14px 14px 10px; display:flex; align-items:center; gap:8px; height:39px; padding:0 10px; background:#fff; border:1px solid #d7dee7; border-radius:7px; color:#8793a0; }
.search input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size:13px; }
.quick-filters { display:flex; gap:6px; padding:0 14px 11px; overflow:auto; scrollbar-width:none; }
.quick-filters button { white-space:nowrap; padding:6px 9px; border:1px solid #d7dee7; border-radius:15px; color:#647285; background:#fff; font-size:11px; }
.quick-filters button.active { color:#fff; border-color:var(--blue); background:var(--blue); }
.record-list { height:565px; overflow:auto; padding:0 9px 15px; }
.record-card { width:100%; display:grid; gap:5px; padding:14px 13px; text-align:left; color:var(--ink); background:transparent; border:1px solid transparent; border-bottom-color:#e1e6ec; border-radius:8px; }
.record-card:hover { background:#fff; }
.record-card.active { background:#fff; border-color:#a8c9e8; box-shadow:0 4px 14px #19345112; }
.record-card.active::before { content:""; position:absolute; }
.record-top { display:flex; justify-content:space-between; align-items:center; }
.record-top b { color:#8290a0; font-size:10px; letter-spacing:.5px; }
.record-top i { padding:3px 7px; border-radius:10px; font-style:normal; font-size:10px; font-weight:700; background:#edf1f5; color:#657486; }
.record-top i.status-aktiv { color:#168059; background:#dff5ec; }
.record-top i.status-prufung { color:#9a681d; background:#fff0d5; }
.record-top i.status-offen,.record-top i.status-neu { color:#26689e; background:#e1effa; }
.record-top i.status-pausiert { color:#9b5a25; background:#f7e7db; }
.record-top i.status-abgeschlossen { color:#65717f; background:#e8ebee; }
.record-card > strong { font-size:14px; }
.record-card > span:not(.record-top) { color:#667487; font-size:12px; }
.record-card small { display:flex; justify-content:space-between; margin-top:5px; color:#8a96a4; font-size:10px; }
.form-panel { min-width:0; background:#fff; }
.form-heading { min-height:107px; display:flex; justify-content:space-between; align-items:center; padding:22px 30px; border-bottom:1px solid var(--line); }
.form-heading h1 { margin:5px 0 4px; color:#162a42; font-size:24px; }
.form-heading p { margin:0; color:#758293; font-size:13px; }
.record-nav { display:flex; align-items:center; gap:8px; }
.record-nav button { min-width:36px; padding:0; font-size:24px; }
.record-nav span { min-width:55px; text-align:center; font-size:12px; color:#778494; }
#projectForm { padding:5px 30px 0; }
#projectForm.no-record { opacity:.5; pointer-events:none; }
.form-section { display:grid; grid-template-columns:175px 1fr; gap:24px; padding:26px 0; border-bottom:1px solid #e8ecf0; }
.section-title { display:flex; gap:12px; align-items:flex-start; }
.section-title > span { width:28px; height:28px; display:grid; place-items:center; border-radius:6px; color:#2479ca; background:#e7f1fb; font-size:10px; font-weight:800; }
.section-title div { display:grid; gap:4px; }
.section-title strong { font-size:14px; }
.section-title small { color:#8995a3; font-size:10px; line-height:1.4; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px 20px; }
.field-grid.three { grid-template-columns:repeat(3,1fr); }
.field { display:grid; gap:7px; min-width:0; }
.field.full { grid-column:1/-1; }
.field > span { color:#526174; font-size:11px; font-weight:700; }
.field input,.field select,.field textarea {
    width:100%; min-height:41px; padding:9px 11px; color:#213248; background:#fff; border:1px solid #cfd7e1; border-radius:6px; outline:none; transition:.15s;
}
.field textarea { resize:vertical; min-height:94px; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#4d97da; box-shadow:0 0 0 3px #4d97da1c; }
.field.locked { position:relative; }
.field.locked input,.field.locked select,.field.locked textarea { color:#7d8794; background:#edf0f3; border-color:#dfe3e8; cursor:not-allowed; }
.field.locked > span::after { content:" · nur lesbar"; color:#9ba4af; font-weight:400; }
.input-unit { display:flex; }
.input-unit input { border-radius:6px 0 0 6px; }
.input-unit b { min-width:38px; display:grid; place-items:center; color:#6a7787; background:#f1f4f7; border:1px solid #cfd7e1; border-left:0; border-radius:0 6px 6px 0; font-size:12px; }
.calculation { grid-column:2; margin-top:17px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; color:#2b5e7c; background:#eef7fa; border:1px solid #cee8ee; border-radius:7px; }
.calculation span { font-size:11px; font-weight:700; }
.calculation strong { font-size:18px; }
.form-footer { height:62px; padding:0 30px; display:flex; align-items:center; justify-content:space-between; }
.form-footer span { display:flex; align-items:center; gap:8px; color:#5e7181; font-size:11px; }
.form-footer i { width:8px; height:8px; border-radius:50%; background:var(--green); }
.form-footer span.dirty { color:#9c6418; }
.form-footer span.dirty i { background:var(--orange); }
.form-footer small { color:#8a96a2; }
.empty { padding:30px 15px; display:grid; gap:6px; text-align:center; color:#778493; }
.empty strong { color:#425267; }
dialog { width:min(650px,calc(100vw - 30px)); padding:0; border:0; border-radius:12px; box-shadow:0 25px 80px #10243c55; }
dialog::backdrop { background:#10243c88; }
dialog header { padding:20px 22px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
dialog h2 { margin:4px 0 0; font-size:20px; }
dialog .close { width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:#fff; font-size:20px; }
.activity-list { max-height:480px; overflow:auto; padding:8px 22px 20px; }
.activity-list article { display:grid; grid-template-columns:34px 1fr auto; gap:11px; align-items:center; padding:14px 0; border-bottom:1px solid #e7ebef; }
.activity-list article > span { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:#2c7dba; background:#e5f1fa; }
.activity-list article div { display:grid; gap:4px; }
.activity-list article strong { font-size:12px; }
.activity-list article small,.activity-list time { color:#83909d; font-size:10px; }
#toast { position:fixed; z-index:20; right:24px; bottom:24px; max-width:360px; padding:13px 17px; color:#fff; background:#20364d; border-radius:8px; box-shadow:0 10px 30px #10243c44; transform:translateY(100px); opacity:0; transition:.25s; }
#toast.show { transform:none; opacity:1; }
#toast.error { background:#a33f48; }
@media (max-width:1050px) {
    .overview { grid-template-columns:repeat(2,1fr); }
    .workspace { grid-template-columns:290px 1fr; }
    .form-section { grid-template-columns:1fr; }
    .field-grid.three { grid-template-columns:repeat(2,1fr); }
    .calculation { grid-column:1; }
}
@media (max-width:760px) {
    .topbar { height:auto; padding:14px 16px; align-items:flex-start; }
    .brand img { width:82px; }
    .brand span { display:none; }
    .db-badge { display:none; }
    .role-switch select { min-width:0; max-width:190px; }
    .commandbar { height:auto; padding:10px; align-items:flex-start; gap:8px; overflow:auto; }
    .commandbar > div { flex-wrap:nowrap; }
    .commandbar button { white-space:nowrap; }
    main { padding:12px; }
    .overview { grid-template-columns:1fr 1fr; }
    .overview article { min-height:86px; padding:14px; }
    .workspace { display:block; }
    .record-browser { border:0; border-bottom:1px solid var(--line); }
    .record-list { height:260px; }
    .form-heading { padding:18px; }
    #projectForm { padding:0 18px; }
    .field-grid,.field-grid.three { grid-template-columns:1fr; }
    .form-footer { padding:0 18px; }
}