:root {
    color-scheme: light;
    --green: #4f7f35;
    --green-dark: #356526;
    --border: #d8ddd5;
    --panel: #f4f6f2;
    --muted: #5d6659;
    --danger: #a01818;
    --ok: #2f6f2f;
}

* { box-sizing: border-box; }
html { background: #eef1ec; }
body {
    margin: 0;
    font-family: Arial, Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    color: #171917;
    background: #eef1ec;
}

#page {
    width: min(1180px, calc(100% - 32px));
    margin: 24px auto;
    background: #fff;
    box-shadow: 0 1px 8px rgba(0,0,0,.08);
}

#header {
    padding: 18px 18px 12px;
    border-bottom: 1px solid var(--border);
}
#header img {
    display: block;
    width: min(600px, 100%);
    height: auto;
}
.brand { display: inline-block; }

#layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 22px;
    padding: 18px;
}

#inhalt { min-width: 0; }
#inhalt h1, #inhalt h2, #inhalt h3, #inhalt h4, #inhalt h5 { margin-top: 0; }
#inhalt h4 { font-size: 1.25rem; }

#nav {
    align-self: start;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 14px;
}
#nav h2 {
    font-size: 1.15rem;
    margin: 0 0 10px;
}
.nav-user {
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.nav-user span { display: block; font-size: .86rem; color: var(--muted); }
.nav-user strong { display: block; overflow-wrap: anywhere; }
.nav-primary, .nav-secondary { display: block; }
.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}
.nav-list li { margin: 0; padding: 0; }
.nav-primary a, .nav-secondary a {
    display: block;
    padding: 7px 8px;
    border-radius: 3px;
}
.nav-secondary {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.nav-secondary a { font-size: .95rem; }

A {
    color: var(--green);
    font-weight: 700;
    text-decoration: none;
}
A:hover, A:focus-visible { color: var(--green-dark); text-decoration: underline; }

.login-form label {
    display: block;
    font-weight: 700;
    margin: 8px 0 2px;
}
.login-form .txt { width: 100%; }
.password-entry { width: 100%; }
.password-entry .password-toggle {
    width: 100%;
    margin-top: 5px;
    padding: 5px 8px;
    font-size: .86rem;
    font-weight: 600;
    background: #f8f9f7;
}
.password-entry .password-toggle[aria-pressed="true"] {
    background: #edf1eb;
}
.login-help {
    font-size: .88rem;
    line-height: 1.35;
    color: var(--muted);
    margin: 10px 0 0;
}

input, select, button, textarea { font: inherit; }
input.txt, select.sel, input[type="text"], input[type="password"], input[type="number"], input[type="time"], input[type="date"], select, textarea {
    max-width: 100%;
    padding: 7px 8px;
    border: 1px solid #aeb5aa;
    border-radius: 3px;
    background: #fff;
}
input.txt { width: 100%; }

.btn, button, input[type="submit"] {
    display: inline-block;
    border: 1px solid #8d9688;
    border-radius: 4px;
    padding: 7px 11px;
    background: #e9ede6;
    color: #172015;
    cursor: pointer;
    font-weight: 700;
}
.btn:hover, button:hover, input[type="submit"]:hover { background: #dfe5db; }
.btn-secondary { width: 100%; margin-top: 12px; }
.logout-form { margin: 0; }

.action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 16px;
}
.action-bar a, .action-link {
    display: inline-block;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #f8f9f7;
}
.actions { white-space: nowrap; }
.actions a { margin-right: 8px; }
.actions a:last-child { margin-right: 0; }
.danger-link { color: var(--danger); }

.achtung {
    font-weight: 700;
    color: var(--danger);
}
.okay {
    font-weight: 700;
    color: var(--ok);
}
.notice {
    padding: 10px 12px;
    background: #f6f8f5;
    border-left: 4px solid var(--green);
}
.warning-box {
    padding: 10px 12px;
    border: 1px solid #d7b4b4;
    background: #fff7f7;
}

TABLE { border-collapse: collapse; }
#inhalt table { width: 100%; }
#inhalt td, #inhalt th { padding: 7px 8px; vertical-align: top; }
TR.kopf, .kopf { background: #edf1eb; font-weight: 700; }
TD.zeile { border-bottom: 1px solid #ecefea; }
TR.zeile_0 { background: #fafbfa; }
TR.zeile_1 { background: #eef5f6; }
TR.zeile_fehler { background: #f8dddd; }
.kat { background: #dfe4dc; font-weight: 700; }

.form-table td:first-child { width: 34%; font-weight: 700; }
.form-table td:last-child { width: 66%; }
.form-hint { color: var(--muted); font-size: .9rem; }

.credentials { overflow-x: auto; }
.credentials table { min-width: 620px; }

SPAN.page, A.page {
    display: inline-block;
    padding: 3px 7px;
    margin: 1px;
    border-radius: 3px;
}
SPAN.page { color: var(--green-dark); background: #e8eee5; }
A.page { color: #222; background: #f0f1ef; }
A.page:hover { background: #dde3d9; color: #111; }

#fuss {
    background: #edf0eb;
    padding: 9px 12px;
    text-align: center;
    color: #444;
    font-size: .82rem;
}

@media (max-width: 720px) {
    #page { width: min(100% - 16px, 1180px); margin: 8px auto; }
    #layout { grid-template-columns: 1fr; padding: 12px; }
    #nav { order: -1; }
    .form-table, .form-table tbody, .form-table tr, .form-table td { display: block; width: 100% !important; }
    .form-table td { padding: 4px 0 !important; }
    #inhalt { overflow-x: auto; }
}

.import-card {
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fbfcfa;
}
.import-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 10px 0;
}
.import-options label { font-weight: 700; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
h1 { font-size: 1.45rem; margin: 0 0 12px; }
h2 { font-size: 1.15rem; margin: 18px 0 8px; }


@media print {
    html, body { background: #fff; }
    #page { width: 100%; margin: 0; box-shadow: none; }
    #header, #nav, #fuss, .action-bar, .no-print { display: none !important; }
    #layout { display: block; padding: 0; }
    #inhalt { overflow: visible; }
    #inhalt table { width: 100%; }
    a { color: #000; text-decoration: none; }
}

.inline-form { display: inline; margin: 0; }
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}
.stat-card {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fbfcfa;
}
.stat-card span { display: block; color: var(--muted); font-size: .88rem; }
.stat-card strong { display: block; margin-top: 2px; font-size: 1.35rem; color: var(--green-dark); }
.workflow { padding-left: 1.4rem; }
.workflow li { margin: 5px 0; }

@media (max-width: 720px) {
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .actions { white-space: normal; }
}
@media (max-width: 480px) {
    .dashboard-grid { grid-template-columns: 1fr; }
}

.table-sub { margin-top: 2px; color: var(--muted); font-size: .88rem; }