:root {
    color-scheme: light;
    --brand-red: #ba0c1e;
    --brand-red-dark: #8f0a18;
    --brand-red-soft: #f6e8ea;
    --brand-red-soft-2: #fbeff1;
    --border: #d8cfd2;
    --panel: #f5f3f4;
    --panel-strong: #ece8ea;
    --muted: #5e5458;
    --text: #1b1718;
    --danger: #a01818;
}

* { box-sizing: border-box; }
html { background: #ebe8e9; }
body {
    margin: 0;
    font-family: Arial, Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    color: var(--text);
    background: linear-gradient(180deg, #f3f1f2 0%, #ebe8e9 100%);
}

#page {
    width: min(1180px, calc(100% - 32px));
    margin: 24px auto;
    background: #fff;
    border-bottom: 4px solid var(--brand-red);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}

#header {
    padding: 18px 18px 12px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #ffffff 0%, #f7f4f5 100%);
}
#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 h1, #inhalt h2, #inhalt h3, #inhalt h4 { color: #1a1416; }
#inhalt h4 { font-size: 1.25rem; }

#nav {
    align-self: start;
    background: var(--panel);
    border: 1px solid var(--border);
    border-bottom: 4px solid var(--brand-red);
    border-radius: 4px;
    padding: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
#nav h2 {
    font-size: 1.15rem;
    margin: 0 0 10px;
    color: #191315;
}
.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-primary a:hover,
.nav-primary a:focus-visible,
.nav-secondary a:hover,
.nav-secondary a:focus-visible {
    background: var(--brand-red-soft);
    text-decoration: none;
}
.nav-secondary {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.nav-secondary a { font-size: .95rem; }

A {
    color: var(--brand-red);
    font-weight: 700;
    text-decoration: none;
}
A:hover, A:focus-visible { color: var(--brand-red-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: #ffffff;
    color: #211c1d;
}
.password-entry .password-toggle[aria-pressed="true"] {
    background: var(--brand-red-soft);
}
.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 #b6a9ae;
    border-radius: 3px;
    background: #fff;
}
input.txt { width: 100%; }
input:focus, select:focus, textarea:focus, button:focus {
    outline: 2px solid rgba(186, 12, 30, 0.16);
    outline-offset: 1px;
    border-color: var(--brand-red);
}

.btn, button, input[type="submit"] {
    display: inline-block;
    border: 1px solid var(--brand-red-dark);
    border-radius: 4px;
    padding: 7px 11px;
    background: linear-gradient(180deg, #d41328 0%, var(--brand-red) 100%);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}
.btn:hover, button:hover, input[type="submit"]:hover { background: linear-gradient(180deg, #c91024 0%, var(--brand-red-dark) 100%); }
.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: #fff;
}
.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: #3c3033;
    background: #fbf4f5;
    border-left: 4px solid var(--brand-red);
    padding: 8px 10px;
}
.notice {
    padding: 10px 12px;
    background: #faf6f7;
    border-left: 4px solid var(--brand-red);
}
.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: var(--brand-red);
    color: #fff;
    font-weight: 700;
}
TR.kopf a, .kopf a { color: #fff; }
TR.kopf a:hover, TR.kopf a:focus-visible, .kopf a:hover, .kopf a:focus-visible { color: #fff; }
TD.zeile { border-bottom: 1px solid #ece6e8; }
TR.zeile_0 { background: #ffffff; }
TR.zeile_1 { background: #f7f4f5; }
TR.zeile_fehler { background: #f8dddd; }
.kat {
    background: #ead9dd;
    color: var(--brand-red-dark);
    font-weight: 700;
    border-top: 1px solid #d7b9bf;
    border-bottom: 1px solid #d7b9bf;
}
.student-list td:first-child a { color: var(--text); }
.student-list td:first-child a:hover, .student-list td:first-child a:focus-visible { color: var(--brand-red-dark); }

.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(--brand-red-dark); background: var(--brand-red-soft); }
A.page { color: #222; background: #f3eff0; }
A.page:hover { background: #ebdfe2; color: #111; }

#import-card, .import-card {
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fcfafb;
}
.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; }

#fuss {
    background: #f3f0f1;
    border-top: 1px solid var(--border);
    padding: 9px 12px;
    text-align: center;
    color: #4b4346;
    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; }
}

@media print {
    html, body { background: #fff; }
    #page { width: 100%; margin: 0; box-shadow: none; border-top: 0; }
    #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: #fcfafb;
}
.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(--brand-red-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; }