:root {
    --bg: #f5f7fa;
    --surface: #ffffff;
    --surface-2: #eef2f6;
    --text: #17212b;
    --muted: #66717d;
    --line: #dce3ea;
    --primary: #244e70;
    --primary-hover: #183d5b;
    --ok: #247a4a;
    --warn: #9a6800;
    --bad: #b42318;
    --shadow: 0 2px 12px rgba(27, 39, 51, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: "Segoe UI", Arial, sans-serif; color: var(--text); background: var(--bg); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { height: 68px; background: #132535; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; box-shadow: var(--shadow); }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 38px; height: 38px; border-radius: 9px; background: #fff; color: #132535; display: inline-grid; place-items: center; font-weight: 800; }
.brand strong, .brand small { display: block; }
.brand small { opacity: .65; margin-top: 2px; }
.userbox { display: flex; gap: 16px; align-items: center; }
.link-button { color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: 7px 11px; }

.shell { display: grid; grid-template-columns: 235px 1fr; min-height: calc(100vh - 68px); }
.sidebar { background: #1c3042; padding: 24px 14px; }
.sidebar nav { display: flex; flex-direction: column; gap: 5px; }
.sidebar a, .nav-disabled, .nav-section { padding: 10px 12px; border-radius: 6px; }
.sidebar a { color: #eaf2f8; }
.sidebar a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.nav-section { color: #8fa5b7; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; margin-top: 12px; }
.nav-disabled { color: #8495a4; display: flex; justify-content: space-between; }
.nav-disabled em { font-size: 11px; font-style: normal; opacity: .75; }
.content { padding: 34px; max-width: 1500px; width: 100%; }
.auth-content { min-height: calc(100vh - 68px); display: grid; place-items: center; padding: 40px 20px; }

h1 { margin: 0 0 8px; font-size: 30px; }
h2 { font-size: 20px; margin-top: 0; }
.subtitle { color: var(--muted); margin: 0 0 28px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 22px; }
.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat strong { display: block; font-size: 30px; margin-top: 6px; }
.stat span { color: var(--muted); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

.status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.status.ok::before { background: var(--ok); }
.status.bad::before { background: var(--bad); }
.badge { display: inline-block; border-radius: 999px; background: var(--surface-2); padding: 4px 9px; font-size: 12px; }

.form-card { width: min(520px, 100%); }
.form-group { margin-bottom: 16px; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input, select { width: 100%; padding: 10px 11px; border: 1px solid #bfcad4; border-radius: 6px; background: #fff; font: inherit; }
input:focus, select:focus { outline: 2px solid rgba(36,78,112,.18); border-color: var(--primary); }
button, .button { border: 0; border-radius: 6px; padding: 10px 15px; background: var(--primary); color: #fff; font-weight: 600; cursor: pointer; display: inline-block; }
button:hover, .button:hover { background: var(--primary-hover); text-decoration: none; }
.button.secondary, button.secondary { background: #e7edf2; color: var(--text); }
.button.danger, button.danger { background: var(--bad); }
.actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.validation-summary-errors, .field-validation-error, .error { color: var(--bad); }
.alert { padding: 12px 14px; border-radius: 7px; margin-bottom: 18px; background: #edf5ff; border: 1px solid #c9def5; }
.alert.error { background: #fff0ef; border-color: #f2c0bb; }
.alert.success { color: #195d38; background: #eefaf3; border-color: #bfe4ce; }
.muted { color: var(--muted); }
.code { font-family: Consolas, monospace; font-size: 13px; }
.spacer { height: 18px; }

@media (max-width: 850px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .content { padding: 22px 16px; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .topbar { padding: 0 16px; }
}

/* V0.2 Branding und Metadatenadministration */
.brand-logo-wrap { width: 46px; height: 46px; border-radius: 9px; background: #fff; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; }
.brand-logo { width: 44px; height: 44px; object-fit: contain; }
.auth-logo { display: flex; justify-content: center; margin: -6px 0 16px; }
.auth-logo img { width: min(220px, 68vw); max-height: 170px; object-fit: contain; }
textarea { width: 100%; padding: 10px 11px; border: 1px solid #bfcad4; border-radius: 6px; background: #fff; font: inherit; resize: vertical; }
textarea:focus { outline: 2px solid rgba(36,78,112,.18); border-color: var(--primary); }
.admin-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; align-items: end; }
.form-span-2 { grid-column: span 2; }
.form-actions-end { align-self: end; }
.input-small { min-width: 75px; width: 90px; }
.input-compact { min-width: 100px; width: auto; }
.row-inactive { opacity: .58; background: #fafbfc; }
.tree-name { padding-left: calc(var(--depth) * 18px); min-width: 230px; }
.tree-name small { display: block; margin-top: 4px; }
.small-link { display: inline-block; margin-top: 7px; font-size: 12px; }
.assignment-form { display: grid; grid-template-columns: 2fr 1fr; gap: 12px 14px; align-items: end; }
.assignment-form button, .assignment-form .form-group:last-of-type { grid-column: span 2; }
.check-row { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 0; }
.check-row input { width: auto; }
button.compact, .button.compact { padding: 7px 10px; font-size: 12px; }
.metadata-layout { grid-template-columns: minmax(520px, 1.1fr) minmax(420px, .9fr); align-items: start; }

@media (max-width: 1100px) {
    .admin-form-grid, .assignment-form { grid-template-columns: 1fr; }
    .form-span-2, .assignment-form button, .assignment-form .form-group:last-of-type { grid-column: auto; }
    .metadata-layout { grid-template-columns: 1fr; }
}

/* V0.3 Dokumentverwaltung */
.page-heading-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.page-heading-actions .subtitle { margin-bottom: 0; }
.filter-row { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; }
.filter-row .form-group { margin: 0; min-width: 280px; flex: 1; }
.filter-actions { padding-bottom: 1px; }
.empty-state { padding: 26px 12px; text-align: center; }
.empty-state strong { display: block; font-size: 18px; margin-bottom: 7px; }
.table-subline { display: block; color: var(--muted); margin-top: 4px; }
.upload-card { max-width: 900px; }
.document-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .65fr); gap: 18px; align-items: start; }
.document-preview-card { min-height: 650px; }
.document-preview { width: 100%; height: 72vh; min-height: 600px; border: 1px solid var(--line); border-radius: 7px; background: #f0f2f4; }
.image-preview-wrap { min-height: 580px; display: grid; place-items: center; background: #f3f5f7; border: 1px solid var(--line); border-radius: 7px; padding: 14px; }
.image-preview { max-width: 100%; max-height: 72vh; object-fit: contain; }
.detail-list { display: grid; grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr); gap: 9px 12px; margin: 0 0 20px; }
.detail-list dt { color: var(--muted); font-weight: 600; }
.detail-list dd { margin: 0; min-width: 0; }
.hash-value { word-break: break-all; }

@media (max-width: 1100px) {
    .document-layout { grid-template-columns: 1fr; }
    .document-preview { height: 65vh; }
}

@media (max-width: 700px) {
  :root { --topbar-h: 58px; }
    .page-heading-actions { flex-direction: column; }
    .page-heading-actions > .button { width: 100%; text-align: center; }
    .filter-row { display: block; }
    .filter-row .form-group { min-width: 0; margin-bottom: 12px; }
    .detail-list { grid-template-columns: 1fr; }
    .detail-list dt { margin-top: 8px; }
}

/* V0.4 OCR */
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.document-side-stack { display: grid; gap: 18px; align-items: start; }
.ocr-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ocr-heading h2 { margin-bottom: 8px; }
.ocr-text { min-height: 320px; font-family: Consolas, "Courier New", monospace; font-size: 12px; line-height: 1.45; background: #f8fafb; }
.compact-details { margin-bottom: 14px; }
.badge-ok { background: #e8f6ee; color: #195d38; }
.badge-error { background: #fff0ef; color: var(--bad); }
.badge-working { background: #fff6df; color: #7a5400; }
button:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .grid-4 { grid-template-columns: 1fr; }
    .ocr-heading { flex-direction: column; }
}

/* V0.5 KI-Dokumentanalyse */
.metadata-source { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.ai-card h3 { margin: 18px 0 10px; font-size: 16px; }
.ai-field-list { display: grid; gap: 8px; margin-bottom: 16px; }
.ai-field-row { display: grid; grid-template-columns: minmax(125px,.9fr) minmax(100px,1.1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 7px; padding: 10px; background: #fafbfd; }
.ai-field-row small { display: block; margin-top: 3px; color: var(--muted); }
.ai-value { word-break: break-word; }
.confidence { display: inline-block; min-width: 48px; text-align: center; border-radius: 999px; padding: 4px 8px; font-size: 11px; background: var(--surface-2); }
.confidence-high { color: #195d38; background: #e8f6ee; }
.confidence-medium { color: #7a5400; background: #fff6df; }
.confidence-low { color: var(--bad); background: #fff0ef; }
.confirm-ai-form { display: grid; gap: 7px; margin-top: 14px; }
.confirm-ai-form small { line-height: 1.4; }
.additional-fields { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 4px; }
.suggestion-card { display: flex; justify-content: space-between; align-items: center; gap: 14px; border: 1px solid #d8e2eb; background: #f8fbfd; border-radius: 8px; padding: 12px; margin-top: 9px; }
.suggestion-main { min-width: 0; }
.suggestion-main strong, .suggestion-main span, .suggestion-main small { display: block; }
.suggestion-main span { margin-top: 4px; word-break: break-word; }
.suggestion-main small { margin-top: 5px; }
.suggestion-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.suggestion-actions form { margin: 0; }

@media (max-width: 700px) {
    .ai-field-row { grid-template-columns: 1fr; }
    .suggestion-card { align-items: flex-start; flex-direction: column; }
    .suggestion-actions { justify-content: flex-start; }
}
.metadata-fields-separator { border-top: 1px solid var(--line); margin: 20px 0 16px; padding-top: 14px; }
.metadata-fields-separator h3 { margin: 0 0 14px; font-size: 16px; }
.document-technical-meta { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; }

/* V0.6 - Freigabe und SharePoint-Ablage */
.review-actions { margin-top: 1rem; flex-wrap: wrap; }
button.success-action, .button.success-action { font-weight: 700; }
.storage-card .code { overflow-wrap: anywhere; }

/* ========================================================================== */
/* V0.9 – Responsive Designsystem                                             */
/* ========================================================================== */
:root {
    --topbar-h: 64px;
    --sidebar-w: 244px;
    --sidebar-collapsed-w: 76px;
    --radius: 12px;
    --content-max: 1680px;
}
html, body { font-family: Aptos, "Segoe UI", Arial, sans-serif; }
body { overflow-x: hidden; }
.topbar { height: var(--topbar-h); min-height: var(--topbar-h); padding: 0 18px; position: sticky; top: 0; z-index: 100; gap: 12px; }
.nav-toggle { width: 40px; height: 40px; padding: 9px; background: transparent; border: 1px solid rgba(255,255,255,.22); display: grid; align-content: center; gap: 4px; flex: 0 0 auto; }
.nav-toggle:hover { background: rgba(255,255,255,.08); }
.nav-toggle span { display:block; height:2px; background:#fff; border-radius:2px; }
.brand { min-width: 0; margin-right: auto; }
.brand-logo-wrap { width: 40px; height: 40px; border-radius: 8px; }
.brand-logo { width: 38px; height: 38px; }
.brand-text { white-space: nowrap; }
.userbox { min-width: 0; }
.user-name { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.shell { grid-template-columns: var(--sidebar-w) minmax(0,1fr); min-height: calc(100vh - var(--topbar-h)); transition: grid-template-columns .18s ease; }
.sidebar { display: flex; flex-direction: column; position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); padding: 14px 10px 10px; overflow: hidden; z-index: 80; }
.sidebar-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding-right: 3px; }
.sidebar a, .nav-group summary { min-height: 42px; display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px; color: #eaf2f8; cursor: pointer; white-space: nowrap; }
.sidebar a:hover, .nav-group summary:hover, .sidebar a.active { background: rgba(255,255,255,.09); text-decoration: none; }
.sidebar a.active { box-shadow: inset 3px 0 0 #9dc8e9; }
.nav-icon { width: 22px; min-width: 22px; text-align: center; font-size: 17px; line-height: 1; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-section { padding: 18px 11px 6px; margin: 0; }
.nav-group { margin-top: 8px; }
.nav-group summary { list-style: none; }
.nav-group summary::-webkit-details-marker { display:none; }
.nav-chevron { margin-left:auto; transition: transform .15s ease; }
.nav-group[open] .nav-chevron { transform: rotate(180deg); }
.nav-submenu { padding-left: 32px; display:grid; gap:3px; }
.nav-submenu a { min-height: 36px; padding: 7px 10px; font-size: 13px; }
.sidebar-footer { padding: 10px 12px 2px; color:#8495a4; font-size:12px; border-top:1px solid rgba(255,255,255,.09); }
.content { max-width: var(--content-max); padding: 28px clamp(18px, 2.5vw, 38px) 48px; min-width: 0; }
.nav-overlay { display:none; }

body.sidebar-collapsed .shell { grid-template-columns: var(--sidebar-collapsed-w) minmax(0,1fr); }
body.sidebar-collapsed .sidebar .nav-label,
body.sidebar-collapsed .sidebar .nav-section,
body.sidebar-collapsed .sidebar .nav-chevron,
body.sidebar-collapsed .sidebar .nav-submenu { display:none; }
body.sidebar-collapsed .sidebar a,
body.sidebar-collapsed .nav-group summary { justify-content:center; }
body.sidebar-collapsed .nav-group { margin-top:6px; }

.page-header, .page-heading-actions { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; }
.page-header .subtitle, .page-heading-actions .subtitle { margin-bottom:0; }
.page-header-actions { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
h1 { font-size: clamp(25px, 2vw, 31px); line-height:1.14; }
h2 { line-height:1.2; }
.card { border-radius: var(--radius); box-shadow: 0 1px 8px rgba(27,39,51,.06); padding: clamp(17px, 1.7vw, 24px); }
.admin-section { margin-bottom: 18px; }
.section-heading { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; }
.section-heading h2 { margin-bottom:4px; }
.form-grid-2 { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; }
.form-actions { display:flex; align-items:end; padding-bottom:16px; }
.search-row { display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:10px; align-items:center; }

/* Accordion / KI settings */
.accordion-stack, .segmented-tabs { display:grid; gap:10px; }
.accordion-card { border:1px solid var(--line); border-radius:10px; background:#fff; overflow:hidden; }
.accordion-card > summary { cursor:pointer; padding:14px 16px; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:12px; list-style:none; }
.accordion-card > summary::-webkit-details-marker { display:none; }
.accordion-card > summary::after { content:"＋"; font-size:18px; color:var(--muted); }
.accordion-card[open] > summary::after { content:"−"; }
.accordion-card[open] > summary { border-bottom:1px solid var(--line); background:#f9fbfc; }
.accordion-body { padding:16px; }
.ai-instruction-editor { min-height:180px; line-height:1.48; }
.ai-instruction-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; }
.settings-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto; }
.settings-tabs a { padding:10px 13px; color:var(--muted); font-weight:600; white-space:nowrap; border-bottom:2px solid transparent; }
.settings-tabs a.active { color:var(--primary); border-bottom-color:var(--primary); text-decoration:none; }
.prompt-preview { background:#121d27; color:#e8f0f6; border-radius:9px; padding:16px; white-space:pre-wrap; word-break:break-word; font:12px/1.5 Consolas,"Courier New",monospace; max-height:62vh; overflow:auto; }
.sticky-form-actions { position:sticky; bottom:0; background:rgba(255,255,255,.96); border-top:1px solid var(--line); padding:12px 0 0; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; backdrop-filter:blur(5px); }

/* Benutzerkarten */
.user-card-list { display:grid; gap:14px; }
.user-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:0 1px 7px rgba(27,39,51,.05); }
.user-card.is-inactive { background:#fafbfc; }
.user-card-head { display:flex; gap:13px; align-items:flex-start; }
.identity-avatar { width:42px; height:42px; flex:0 0 42px; border-radius:50%; display:grid; place-items:center; background:#dde8f0; color:#17384f; font-weight:800; text-transform:uppercase; }
.identity-main { min-width:0; display:grid; gap:3px; }
.identity-main > span, .identity-main > small { color:var(--muted); overflow-wrap:anywhere; }
.identity-title { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.status-pill { padding:3px 8px; border-radius:999px; font-size:11px; background:#edf1f4; color:var(--muted); }
.status-pill.ok { background:#e8f6ee; color:#195d38; }
.status-pill.muted-status { background:#eef0f2; color:#68727c; }
.archive-chip-row { display:flex; gap:6px; flex-wrap:wrap; margin:13px 0; }
.archive-chip { font-size:12px; padding:5px 9px; border-radius:999px; background:#edf6f1; color:#245b3c; border:1px solid #cee4d6; }
.archive-chip.none { background:#f3f5f7; color:#737e88; border-color:#e1e5e9; }
.user-meta-row { display:flex; flex-wrap:wrap; gap:8px 22px; font-size:12px; color:var(--muted); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px 0; }
.user-edit-panel { margin-top:12px; }
.user-edit-panel > summary { cursor:pointer; font-weight:650; color:var(--primary); }
.user-edit-form { padding:14px 0 4px; }
.user-edit-form h3 { font-size:15px; margin:8px 0 10px; }
.permission-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.permission-field { padding:10px; border:1px solid var(--line); border-radius:8px; background:#fafbfd; }
.permission-field span { display:block; margin-bottom:6px; }
.user-card-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.user-card-actions form { margin:0; }
button.text-danger { background:transparent; color:var(--bad); border:1px solid #e8b7b1; }
button.text-danger:hover { background:#fff0ef; }
button.success-action { background:var(--ok); color:#fff; }
.directory-results { display:grid; gap:9px; margin-top:12px; }
.directory-result-card { display:grid; grid-template-columns:auto minmax(180px,1fr) minmax(390px,.9fr); gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:9px; background:#fafcfd; }
.directory-import-fields { display:grid; grid-template-columns:140px minmax(180px,1fr) auto; gap:8px; align-items:center; }

/* Login */
.auth-content { min-height:calc(100vh - var(--topbar-h)); padding:28px 18px; }
.login-shell { width:min(920px,100%); display:grid; grid-template-columns:.9fr 1.1fr; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 12px 38px rgba(22,35,48,.12); }
.login-brand-panel { background:#14283a; color:#fff; padding:44px 34px; display:grid; place-items:center; align-content:center; gap:18px; text-align:center; }
.login-brand-panel img { width:min(230px,85%); max-height:200px; object-fit:contain; background:#fff; border-radius:12px; padding:10px; }
.login-brand-panel strong { display:block; font-size:30px; }
.login-brand-panel span { display:block; margin-top:5px; opacity:.72; }
.login-form-panel { padding:clamp(28px,5vw,54px); align-self:center; }
.login-submit { width:100%; margin-top:14px; padding:12px; }
.login-remember { margin-top:4px; }
.login-note { font-size:12px; color:var(--muted); margin-top:18px; line-height:1.45; }

/* Dokumentansicht */
.document-layout { grid-template-columns:minmax(420px,1.08fr) minmax(390px,.92fr); align-items:start; }
.document-preview-card { position:sticky; top:calc(var(--topbar-h) + 18px); }
.document-side-stack { max-height:none; }
.mobile-document-tabs { display:none; }
.ai-retry-form { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ai-retry-form select { width:auto; min-width:190px; }

/* Dokumentliste: Desktop schlanker */
.documents-table th:nth-child(6), .documents-table td:nth-child(6),
.documents-table th:nth-child(8), .documents-table td:nth-child(8) { display:none; }
.mobile-document-list { display:none; }

@media (max-width: 1180px) {
    .permission-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .directory-result-card { grid-template-columns:auto 1fr; }
    .directory-import-fields { grid-column:1 / -1; padding-left:54px; }
    .document-layout { grid-template-columns:minmax(360px,1fr) minmax(360px,1fr); }
}

@media (max-width: 900px) {
    .topbar { padding:0 12px; }
    .brand-text small { display:none; }
    .user-name { display:none; }
    .shell, body.sidebar-collapsed .shell { display:block; min-height:calc(100vh - var(--topbar-h)); }
    .sidebar, body.sidebar-collapsed .sidebar { display:flex; position:fixed; left:0; top:var(--topbar-h); bottom:0; height:auto; width:min(84vw,300px); transform:translateX(-105%); transition:transform .2s ease; box-shadow:10px 0 28px rgba(0,0,0,.18); }
    body.mobile-nav-open .sidebar { transform:translateX(0); }
    body.mobile-nav-open .nav-overlay { display:block; position:fixed; inset:var(--topbar-h) 0 0 0; background:rgba(9,18,26,.48); z-index:70; }
    body.sidebar-collapsed .sidebar .nav-label, body.sidebar-collapsed .sidebar .nav-section, body.sidebar-collapsed .sidebar .nav-chevron, body.sidebar-collapsed .sidebar .nav-submenu { display:initial; }
    body.sidebar-collapsed .sidebar .nav-submenu { display:grid; }
    body.sidebar-collapsed .sidebar a, body.sidebar-collapsed .nav-group summary { justify-content:flex-start; }
    .content { padding:20px 14px 40px; max-width:none; }
    .page-header, .page-heading-actions { gap:12px; }
    .document-layout { display:block; }
    .document-preview-card { position:static; }
    .document-preview { min-height:520px; height:65vh; }
    .form-grid-2, .ai-instruction-grid { grid-template-columns:1fr; }
    .permission-grid { grid-template-columns:1fr; }
}

@media (max-width: 700px) {
    :root { --topbar-h:58px; }
    .topbar { height:58px; min-height:58px; }
    .brand-logo-wrap { width:36px; height:36px; }
    .brand-logo { width:34px; height:34px; }
    .brand-text strong { font-size:15px; }
    .link-button { padding:6px 8px; font-size:12px; }
    .page-header, .page-heading-actions { flex-direction:column; }
    .page-header-actions, .page-heading-actions > .actions { width:100%; justify-content:stretch; }
    .page-header-actions .button, .page-heading-actions > .actions .button { flex:1; text-align:center; }
    .search-row { grid-template-columns:1fr; }
    .directory-result-card { grid-template-columns:auto 1fr; }
    .directory-import-fields { grid-template-columns:1fr; padding-left:0; }
    .user-card { padding:14px; }
    .user-card-actions { display:grid; grid-template-columns:1fr; }
    .user-card-actions button { width:100%; }
    .login-shell { grid-template-columns:1fr; }
    .login-brand-panel { padding:24px; }
    .login-brand-panel img { width:150px; max-height:110px; }
    .login-brand-panel div { display:none; }
    .login-form-panel { padding:26px 20px 30px; }
    .settings-tabs { margin-left:-4px; margin-right:-4px; }
    .sticky-form-actions { position:static; }
    .mobile-document-tabs { display:flex; position:sticky; top:58px; z-index:20; background:var(--bg); padding:6px 0 10px; gap:5px; overflow-x:auto; }
    .mobile-document-tabs button { flex:1 0 auto; background:#e7edf2; color:var(--text); padding:8px 10px; }
    .mobile-document-tabs button.active { background:var(--primary); color:#fff; }
    .document-layout [data-mobile-panel] { display:none; }
    .document-layout [data-mobile-panel].mobile-panel-active { display:block; }
    .document-side-stack { display:block; }
    .document-side-stack > section { margin-bottom:12px; }
    .desktop-document-table { display:none; }
    .mobile-document-list { display:grid; gap:10px; }
    .mobile-document-card { border:1px solid var(--line); border-radius:9px; padding:13px; background:#fff; }
    .mobile-document-card h3 { font-size:16px; margin:0 0 4px; }
    .mobile-document-card .meta { display:grid; gap:4px; font-size:12px; color:var(--muted); margin:8px 0 10px; }
    .mobile-document-card .badge-row { display:flex; gap:5px; flex-wrap:wrap; }
}

/* V0.9 Dashboard */
.dashboard-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
.dashboard-stat{display:flex;flex-direction:column;gap:5px;min-height:132px;justify-content:center;text-decoration:none;color:inherit}
.dashboard-stat strong{font-size:2rem;line-height:1}
.dashboard-stat small,.stat-label{color:var(--muted,#68717d)}
.dashboard-stat.actionable:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px}
.archive-overview-list{display:grid;gap:10px}.archive-overview-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border,#e3e6ea)}
.flow-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 16px}.flow-line span{padding:8px 10px;border:1px solid var(--border,#dfe3e8);border-radius:9px;background:#fafbfc}.flow-line b{color:#8b929b}
@media(max-width:1000px){.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:560px){.dashboard-stats{grid-template-columns:1fr}.dashboard-stat{min-height:105px}.flow-line{display:grid;grid-template-columns:1fr auto 1fr}.flow-line span{text-align:center}}
.form-span-2{grid-column:1/-1}.permission-grid.compact{margin:12px 0}.directory-result-card .permission-grid{grid-column:1/-1}.directory-result-card>.actions{grid-column:1/-1;justify-content:flex-end}
@media(max-width:700px){.form-span-2{grid-column:auto}.directory-result-card .permission-grid,.directory-result-card>.actions{grid-column:auto}.directory-result-card>.actions{justify-content:stretch}.directory-result-card>.actions button{width:100%}}

/* V0.10 – Fristen & Automatisierung */
.deadline-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}.deadline-list{display:flex;flex-direction:column}.deadline-row{display:grid;grid-template-columns:12px 110px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--border,#e5e7eb);text-decoration:none;color:inherit}.deadline-row:last-child{border-bottom:0}.deadline-dot{width:10px;height:10px;border-radius:50%;background:#6b7280}.deadline-dot.success{background:#18864b}.deadline-dot.warning{background:#c97600}.deadline-dot.danger{background:#c83737}.deadline-date{font-variant-numeric:tabular-nums;font-weight:700}.deadline-main{display:flex;flex-direction:column;min-width:0}.deadline-main small{color:#6b7280;margin-top:2px}.badge.warning{background:#fff4d6;color:#8a5200}.badge.danger{background:#fde8e8;color:#9d2424}.mini-deadline-stats{display:flex;gap:34px}.mini-deadline-stats>div{display:flex;align-items:baseline;gap:8px}.mini-deadline-stats strong{font-size:28px}.automation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.automation-rule{border:1px solid var(--border,#e5e7eb);border-radius:12px;padding:16px}.rule-header{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.rule-header>div{display:flex;flex-direction:column}.automation-form .actions{justify-content:flex-end}.simulation-result{margin-top:18px;padding:16px;border:1px solid var(--border,#e5e7eb);border-radius:12px;background:#f8fafc}.compact-stats{display:flex;gap:24px}.compact-stats>div{display:flex;flex-direction:column}.reminder-options{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}.reminder-options label{display:flex;align-items:center;gap:7px}.check-row{display:flex;align-items:center;gap:8px;margin:12px 0}
@media(max-width:900px){.deadline-summary,.automation-grid{grid-template-columns:1fr}.deadline-row{grid-template-columns:12px 92px minmax(0,1fr)}.deadline-row>.badge{grid-column:2/4;justify-self:start}.mini-deadline-stats{flex-direction:column;gap:8px}.reminder-options{align-items:flex-start;flex-direction:column}}

/* V0.11: Fristen bearbeiten und E-Mail-Erinnerungen */
.deadline-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.deadline-filters label,.deadline-edit-form>label{display:flex;flex-direction:column;gap:6px}.form-actions{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.deadline-task-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.deadline-task-heading h2{font-size:1.2rem;margin:6px 0;overflow-wrap:anywhere}.deadline-task-heading h3{margin:0}.deadline-task-date{display:flex;flex-direction:column;align-items:flex-end;gap:8px;white-space:nowrap}.deadline-task-date strong{font-size:1.2rem}.deadline-edit{border-top:1px solid #e5e7eb;padding-top:14px;margin-top:12px}.deadline-edit summary{cursor:pointer;font-weight:600}.deadline-edit-form{display:grid;gap:14px;margin-top:16px;max-width:720px}.deadline-edit-form>button{justify-self:start}.deadline-edit-form .check-label,.check-label{display:flex;flex-direction:row;align-items:center;gap:9px}.check-label input[type=checkbox]{width:auto;flex:none}.deadline-note{white-space:pre-wrap}.eyebrow{font-size:.85rem;color:#616975}.notification-settings{display:grid;gap:12px;max-width:680px;margin:18px 0}.notification-settings button{justify-self:start}.reminder-log-entry{border-top:1px solid #e5e7eb;padding:18px 0}.retry-reminder{display:flex;flex-wrap:wrap;align-items:center;gap:14px}.recipient-options{border:1px solid #e5e7eb;border-radius:8px;padding:14px;margin:16px 0}.recipient-options legend{font-weight:600;padding:0 6px}.recipient-options label{margin:8px 0}.recipient-options small{display:block;color:#616975;font-weight:400}.document-reminder-form{display:block}.alert.warning{background:#fff6de;color:#755000}.deadline-task{margin-bottom:16px}.badge.info{background:#edf2fa;color:#3d5275}.deadline-edit-form p{margin:0}
@media(max-width:760px){.deadline-filters{grid-template-columns:1fr 1fr}.deadline-task-heading{flex-direction:column;gap:8px}.deadline-task-date{align-items:flex-start}.deadline-task-date strong{font-size:1.1rem}}
@media(max-width:480px){.deadline-filters{grid-template-columns:1fr}.form-actions{align-items:stretch}.form-actions>*{flex:1}.notification-settings button,.deadline-edit-form>button{width:100%}.recipient-options{padding:10px}.recipient-options small{overflow-wrap:anywhere}}

/* V0.12: kompakte Prüfung und persönliche Dokumentansichten */
.view-picker,.search-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap}
.view-picker{margin-bottom:14px;align-items:center}
.view-picker select{width:auto;min-width:180px;max-width:100%}
.search-toolbar .form-group{margin:0;min-width:160px;flex:1}
.search-toolbar .search-input{flex:2}
.search-options{border-top:1px solid var(--border,#dce3ea);padding-top:10px;margin-top:12px}
.search-options summary,.review-details summary{cursor:pointer;font-weight:600;padding:8px 0}
.filter-builder-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(150px,2fr) auto;gap:10px;align-items:end;margin:12px 0}
.filter-builder-row label{display:grid;gap:5px}
.filter-value input,.filter-value select{width:100%}
.column-options{display:flex;flex-wrap:wrap;gap:8px 20px}
.column-options label{display:flex;align-items:center;gap:8px;min-height:40px}
.column-options input{width:auto}
.view-delete{margin-top:10px}
.search-count{margin:14px 0;color:var(--muted,#596978)}
.archive-results-table{width:100%;table-layout:fixed;background:var(--surface,#fff)}
.archive-results-table th,.archive-results-table td{overflow-wrap:anywhere;vertical-align:top;padding:12px 10px}
.archive-results-table th:first-child{width:27%}
.document-title>a{font-weight:600}
.pagination{margin:16px 0}
.review-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.review-original{position:sticky;top:90px;min-width:0}
.review-preview{width:100%;height:650px;border:0}
.review-data{min-width:0;display:grid;gap:14px}
.review-fieldset{border:0;padding:0;margin:0;min-width:0}
.review-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px}
.review-grid .form-group{margin-bottom:5px;min-width:0}
.review-wide{grid-column:1/-1}
.review-questions{background:#fff6e5;color:#473817;padding:12px;border-radius:7px;margin:12px 0}
.review-question{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;border-bottom:1px solid #dfd4b7;padding:10px 0}
.review-question span,.review-question small{display:block}
.review-details{margin-top:10px}
.review-details summary span{display:block;font-weight:400}
.review-details .actions{margin:12px 0;flex-wrap:wrap}
.review-footer{position:sticky;bottom:0;z-index:20;background:var(--surface,#fff);border:1px solid var(--border,#dce3ea);border-radius:8px;padding:12px 16px;margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;box-shadow:0 -3px 12px #0000000d}
.review-tabs{display:none}
.review-data .ocr-text{white-space:pre-wrap;overflow-wrap:anywhere;max-height:400px;overflow:auto}
@media(max-width:1100px){.review-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.review-grid{gap:8px}.review-preview{height:600px}}
@media(max-width:800px){
    .review-tabs{display:flex;gap:8px;margin-bottom:12px}
    .review-tabs button{flex:1;min-height:44px}
    .review-tabs [aria-pressed="true"]{background:#244e70;color:white}
    .review-layout{display:block}
    .review-original{position:static}
    .review-layout[data-mobile="data"] .review-original{display:none}
    .review-layout[data-mobile="original"] .review-data{display:none}
    .review-footer{padding:10px;margin-left:-4px;margin-right:-4px}
    .review-footer .actions{width:100%;display:flex;flex-wrap:wrap}
    .review-footer .success-action{flex:1;min-width:180px}
    .review-footer button{min-height:44px;white-space:normal}
    .review-grid input,.review-grid select,.document-search input,.document-search select{font-size:16px}
    .archive-results-table,.archive-results-table tbody{display:block;background:transparent}
    .archive-results-table thead{display:none}
    .archive-results-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:14px;border:1px solid var(--border,#dce3ea);border-radius:8px;background:var(--surface,#fff);margin-bottom:12px}
    .archive-results-table td{display:block;padding:0;border:0}
    .archive-results-table td:first-child{grid-column:1/-1}
    .archive-results-table td[data-label]::before{content:attr(data-label);display:block;color:var(--muted,#596978);font-size:12px;margin-bottom:2px}
    .document-title>a{display:block;min-height:36px}
    .filter-builder-row{grid-template-columns:minmax(0,1fr) auto}
    .filter-builder-row label:first-child{grid-column:1/-1}
    .search-toolbar{align-items:stretch}
    .search-toolbar .form-group{flex-basis:100%;min-width:0}
}
@media(max-width:400px){.review-grid{grid-template-columns:minmax(0,1fr)}.review-wide{grid-column:auto}.review-footer>span{display:none}}

/* V0.13 operations */
.system-grid,.operations-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}
.system-component{min-width:0}.system-component h2{font-size:1.05rem;margin:0 0 12px}.system-component p{overflow-wrap:anywhere}.system-action{font-weight:600}
.status.warn::before{background:#c07a13}.status.off::before{background:#7b8494}.text-error{color:#af2424;font-weight:600}
.operations-grid details{margin-top:20px}.operations-grid summary{cursor:pointer;font-weight:600}.operations-grid li{margin:.7em 0}
@media(max-width:900px){.system-grid,.operations-grid{grid-template-columns:1fr}.system-component-title{display:block}}