/* Grundlayout, mobil zuerst. Farben als Variablen, damit später ein Dunkelmodus oder Druckstil leicht möglich ist. */
:root {
    --bg: #f5f7f9;
    --surface: #ffffff;
    --text: #1d2733;
    --muted: #5f6b7a;
    --primary: #0b6bcb;
    --primary-text: #ffffff;
    --border: #d5dbe2;
    --error-bg: #fde8e8;
    --error-text: #8a1c1c;
    --info-bg: #e6f1fb;
    --info-text: #0b4a86;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
}

h1 { font-size: 1.5rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.2rem; margin: 0 0 0.5rem; }
a { color: var(--primary); }

.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 0.875rem; margin: 0.25rem 0 0; }
.nowrap { white-space: nowrap; }
.wrap { word-break: break-word; max-width: 24rem; }

/* Seitenmenü: siehe Abschnitt "Seitenmenü" weiter unten */

/* Inhalt */
.content { max-width: 60rem; margin: 0 auto; padding: 1rem; }
.content-wide { max-width: 90rem; }
.section { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* Formulare und Schaltflächen (große Touch-Flächen) */
label { display: block; margin: 1rem 0 0.25rem; font-weight: 600; }
input[type="text"], input[type="password"], input[type="date"], input[type="number"], select {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--surface);
    color: var(--text);
}
.stack { max-width: 28rem; }
.checkbox-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.checkbox-row input { width: 1.5rem; height: 1.5rem; flex: none; }
.checkbox-row label { margin: 0; font-weight: 400; }

.btn {
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
    font-size: 1rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
}
.btn-primary { background: var(--primary); color: var(--primary-text); width: 100%; margin-top: 1.5rem; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
a.btn-inline {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin-top: 0;
    text-decoration: none;
}

/* Meldungen */
.message { padding: 0.75rem 1rem; border-radius: 0.5rem; margin: 1rem 0; }
.message-error { background: var(--error-bg); color: var(--error-text); }
.message-info { background: var(--info-bg); color: var(--info-text); }

/* Tabellen */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-size: 0.85rem; color: var(--muted); }
.row-inactive td { color: var(--muted); }

/* Kacheln (Einstellungen) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    color: var(--text);
    text-decoration: none;
}
a.card:hover { border-color: var(--primary); }
.card-disabled { color: var(--muted); }

/* Login-Seite */
.login-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 1rem; }
.login-card {
    width: 100%;
    max-width: 24rem;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
}

/* Ergänzungen Scheibe 4 */
textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font: inherit;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--surface);
    color: var(--text);
}
.block { display: block; }
.inline-form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; max-width: 28rem; margin: 1rem 0; }
.inline-form .field { flex: 1 1 10rem; }
.inline-form label { margin-top: 0; }
.btn-auto { width: auto; margin-top: 0; }
.btn-small { min-height: 2.25rem; padding: 0.25rem 0.75rem; font-size: 0.9rem; }
.table form { margin: 0; }

/* Ergänzungen Scheibe 5: Auswahl der Messpunkte einer Messliste */
input[type="text"].pos { width: 4rem; min-height: 2.25rem; padding: 0.25rem 0.5rem; text-align: right; }
.table input[type="checkbox"] { width: 1.4rem; height: 1.4rem; }
label.plain { display: inline; margin: 0; font-weight: normal; }

/* Ergänzungen Scheibe 7: Dateneingabe */
.entry-table input[type="text"] { min-height: 2.75rem; font-size: 1.1rem; }
.entry-table input.value-input { width: 6rem; text-align: right; }
.entry-table input.remark-input { min-width: 12rem; }
.row-over td { background: var(--error-bg); }
.row-over input.value-input { border-color: var(--error-text); color: var(--error-text); font-weight: 700; }

/* Ergänzungen Scheibe 7a: Aufgabenliste für Proben */
.task-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; }
.task-form input[type="text"] { min-height: 2.5rem; }
.task-form input.value-input { width: 6rem; text-align: right; }
.task-table td { vertical-align: middle; }
.row-late td { background: var(--error-bg); }

/* Ergänzungen Scheibe 8: Tabellenauswertung */
.eval-form { margin: 1rem 0; }
.eval-dates { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.eval-dates .field { flex: 0 1 12rem; }
.eval-dates label { margin-top: 0; }
.eval-points { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.25rem 1rem; margin: 0.5rem 0 1rem; }
.eval-point { display: flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; }
.eval-point input { width: 1.4rem; height: 1.4rem; flex: none; }
.eval-table th.eval-day, .eval-table td.eval-cell { text-align: center; min-width: 3.5rem; white-space: nowrap; }
.eval-table th, .eval-table td { padding: 0.4rem 0.5rem; }
.cell-over { background: var(--error-bg); color: var(--error-text); font-weight: 700; }
.sticky-col { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 9rem; }
.print-only { display: none; }

/* Ergänzungen Scheibe 9: Diagramm */
.eval-tabs { display: flex; gap: 0.25rem; margin: 1rem 0 0.75rem; border-bottom: 2px solid var(--border, #ccd); }
.eval-tabs a { padding: 0.5rem 1rem; text-decoration: none; border-radius: 0.4rem 0.4rem 0 0; }
.eval-tabs a.active { font-weight: 700; background: var(--surface); border: 2px solid var(--border, #ccd); border-bottom-color: var(--surface); margin-bottom: -2px; }
.chart-box { position: relative; height: 26rem; max-width: 100%; margin: 1rem 0; }
@media (max-width: 40rem) { .chart-box { height: 20rem; } }

/* Ergänzungen Scheibe 9a: Trendregel */
.eval-table td.trend-warn { outline: 3px solid #e07b00; outline-offset: -3px; }
.eval-table td.trend-capa { outline: 3px solid #7f0000; outline-offset: -3px; font-weight: 800; }
.trend-notes { margin: 0.75rem 0; padding-left: 1.25rem; color: var(--error-text); font-weight: 600; }

/* Ergänzungen Scheibe 10a: Auswertung kompakt, Messungen gruppiert */
input[type="date"] { font-family: inherit; }
.eval-dates .field-list { flex: 0 0 auto; }
.eval-dates .btn-primary { margin-top: 0; }
.eval-select { margin: 1rem 0; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.5rem 0.75rem; }
.eval-select > summary { cursor: pointer; min-height: 2rem; }
.eval-select-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
.eval-select-tools input[type="text"] { flex: 1 1 14rem; width: auto; max-width: 24rem; }
.eval-group { border-top: 1px solid var(--border); padding: 0.25rem 0; }
.eval-group > summary { cursor: pointer; display: flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; }
.eval-group > summary input { width: 1.3rem; height: 1.3rem; flex: none; }
.eval-points { margin: 0.25rem 0 0.5rem 1.8rem; max-height: 16rem; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); }
.eval-point { min-height: 1.9rem; }
.eval-result { margin-top: 0.75rem; }
.eval-table { font-size: 0.8rem; line-height: 1.25; width: auto; }
.eval-table th, .eval-table td { padding: 0.15rem 0.35rem; }
.eval-table th { font-size: 0.72rem; }
.eval-table th.eval-day, .eval-table td.eval-cell { min-width: 2.3rem; }
.eval-table .sticky-col { width: 20rem; min-width: 20rem; max-width: 20rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eval-table .sticky-col-2 { position: sticky; left: 20rem; z-index: 1; background: var(--surface); min-width: 5.5rem; text-align: right; box-shadow: 1px 0 0 var(--border); }
.eval-table th.sticky-col, .eval-table th.sticky-col-2 { z-index: 2; background: var(--bg); }
.eval-table th.eval-day { min-width: 4.6rem; }
.eval-table td.eval-cell { padding: 0; }
.eval-cell a, .eval-cell span { display: block; padding: 0.15rem 0.35rem; color: inherit; text-decoration: none; }
.eval-cell a:hover { text-decoration: underline; }
.wrap-names .eval-table .sticky-col { white-space: normal; overflow: visible; text-overflow: clip; }
.eval-options { display: flex; flex-wrap: wrap; gap: 0.1rem 1.5rem; margin: 0.25rem 0; }
.eval-wrap-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.25rem 0; font-size: 0.85rem; }
.eval-wrap-toggle input { width: 1.1rem; height: 1.1rem; }

/* Einheitliche Höhe der Bedienelemente in der Kopfleiste; Auswahlfelder ohne Systemdarstellung, damit alle Browser gleich hoch zeichnen */
select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235f6b7a' stroke-width='2'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
}
.eval-dates input, .eval-dates select, .eval-dates .btn { height: 2.75rem; min-height: 2.75rem; line-height: 1.25; font-size: 1rem; }
.eval-table .sticky-col .hint { display: inline; margin-left: 0.4rem; font-size: 0.72rem; }

/* Ergänzungen Scheibe 10b: Schnellauswahl und Spaltenwahl */
.eval-dates .field-quick { flex: 0 1 11rem; }
.eval-dates .field:has(#granularity) { flex: 0 1 10rem; }

/* Eingabe: Blättern, Periodenanzeige, Erfasst-von und Verlauf */
.entry-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; margin: 1rem 0 0.25rem; }
.entry-nav .field { flex: 0 1 12rem; }
.entry-nav label { margin-top: 0; }
.entry-nav .btn { min-width: 2.75rem; font-size: 1.4rem; line-height: 1; text-decoration: none; }
.entry-nav a.btn:last-of-type { font-size: 1rem; }
.entry-nav .btn-disabled { opacity: 0.4; cursor: not-allowed; }
.period-line { margin: 0.25rem 0 1rem; }
.card .period { font-weight: 600; }
.status-ok { color: var(--ok-text, #1b6e3a); }
.entered { white-space: nowrap; }
.link-button { background: none; border: 0; padding: 0; color: var(--primary); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.85rem; }
.history-row > td { background: var(--surface); padding-left: 2rem; }
.history-table { width: auto; font-size: 0.9rem; }
.entry-nav a.btn, .entry-nav .btn-disabled { display: inline-flex; align-items: center; justify-content: center; }

/* Detailansicht als Dialog */
.entry-dialog { width: min(94vw, 46rem); height: fit-content; max-height: 90vh; max-width: none; padding: 0; border: 1px solid var(--border); border-radius: 0.5rem; }
.entry-dialog[open] { display: flex; flex-direction: column; }
.entry-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.entry-dialog-bar { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); }
.entry-dialog iframe { flex: none; width: 100%; height: 12rem; max-height: calc(90vh - 4rem); border: 0; }
body.embed { padding-top: 0; }
body.embed .content { max-width: none; margin: 0; padding: 0.5rem 1.25rem 1rem; }

/* Lesende Detailansicht */
.detail-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.5rem; margin: 1rem 0; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; }
.value-over { color: var(--error-text); }
.detail-actions { margin-top: 1.5rem; }
.detail-actions .btn { text-decoration: none; display: inline-flex; align-items: center; }

/* Sortierbare Tabellen und Aufgabenfilter */
table.sortable th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
table.sortable th[data-sort]::after { content: " \2195"; color: var(--muted); font-size: 0.8em; }
table.sortable th[aria-sort="ascending"]::after { content: " \25B2"; color: var(--primary); }
table.sortable th[aria-sort="descending"]::after { content: " \25BC"; color: var(--primary); }
.task-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 1rem 0 0.25rem; }
.task-filter label { margin: 0; }
.task-filter select { width: auto; min-width: 14rem; }

/* ===== Seitenmenü (11b) ===== */
:root {
    --nav-w: 15rem;
    --nav-w-collapsed: 4.25rem;
    --bar-h: 3.25rem;
    /* Bereichsfarben (rot und orange bleiben Verstößen und Warnungen vorbehalten) */
    --area-start: #52606d;
    --area-entry: #1f7a4d;
    --area-tasks: #8a3fa0;
    --area-eval: #0b6bcb;
    --area-admin: #5b6b7c;
    --area-account: #52606d;
    --area: var(--area-start);
    /* Intervallfarben: blau, petrol, violett, indigo */
    --iv-day: #0b78c9;
    --iv-week: #0f8b8d;
    --iv-month: #7c3aed;
    --iv-quarter: #3f3fb8;
}
body[data-area="start"] { --area: var(--area-start); }
body[data-area="entry"] { --area: var(--area-entry); }
body[data-area="tasks"] { --area: var(--area-tasks); }
body[data-area="eval"] { --area: var(--area-eval); }
body[data-area="admin"] { --area: var(--area-admin); }
body[data-area="account"] { --area: var(--area-account); }

.icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.icon-lg { width: 1.6rem; height: 1.6rem; }

/* Seitenmenü: links, einklappbar. Eingeklappt = schmale Leiste mit Symbolen; beim Darüberfahren (Maus) klappt sie überlagernd
   auf, ein Klick auf den Menüknopf klappt sie fest auf und schiebt den Inhalt zur Seite. Die Symbole bleiben dabei an derselben Stelle. */
.app-header {
    position: fixed; z-index: 30; top: 0; left: 0; bottom: 0; width: var(--nav-w);
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 0.75rem 0.6rem;
    background: var(--surface); border-right: 1px solid var(--border);
    transition: width 0.15s ease, box-shadow 0.15s ease;
}
.nav-top { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; min-height: 2.5rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--text); text-decoration: none; padding: 0.4rem 0.5rem; min-width: 0; white-space: nowrap; }
.icon-brand { color: var(--primary); width: 1.5rem; height: 1.5rem; }
.nav-toggle, .user-button {
    display: inline-flex; align-items: center; gap: 0.6rem; border: 0; background: transparent; color: var(--muted);
    cursor: pointer; font: inherit; border-radius: 0.5rem; padding: 0.5rem 0.9rem; min-height: 2.5rem;
}
.nav-toggle .ic-menu { display: none; }
.nav-toggle:hover, .user-button:hover, .nav-item:hover { background: var(--bg); }
.nav { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.nav-item {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.65rem 0.6rem calc(0.9rem - 3px); border-radius: 0.5rem;
    color: var(--text); text-decoration: none; border-left: 3px solid transparent; white-space: nowrap;
}
.nav-item .icon { color: var(--nav-color, var(--muted)); }
.nav-item[data-area="start"] { --nav-color: var(--area-start); }
.nav-item[data-area="entry"] { --nav-color: var(--area-entry); }
.nav-item[data-area="tasks"] { --nav-color: var(--area-tasks); }
.nav-item[data-area="eval"] { --nav-color: var(--area-eval); }
.nav-item[data-area="admin"] { --nav-color: var(--area-admin); }
.nav-item[aria-current="page"] { background: var(--bg); font-weight: 600; border-left-color: var(--nav-color); }
.nav-disabled { color: var(--muted); padding: 0.5rem 0; cursor: not-allowed; }
.nav-label { overflow: hidden; text-overflow: ellipsis; }

.user-area { position: relative; border-top: 1px solid var(--border); padding-top: 0.5rem; }
.user-button { width: 100%; color: var(--text); text-align: left; padding-left: 0.4rem; white-space: nowrap; }
.user-name { font-weight: 600; }
.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: var(--primary); color: var(--primary-text); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em;
}
.user-menu {
    position: absolute; left: 0.25rem; bottom: calc(100% - 0.25rem); min-width: 14rem; z-index: 40;
    background: var(--surface); border: 1px solid var(--border); border-radius: 0.6rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); padding: 0.35rem; display: flex; flex-direction: column;
}
.user-menu[hidden] { display: none; }
.user-menu-head { margin: 0; padding: 0.4rem 0.65rem; color: var(--muted); font-size: 0.85rem; border-bottom: 1px solid var(--border); }
.user-menu a, .user-menu button {
    display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.55rem 0.65rem; border: 0; background: transparent;
    color: var(--text); font: inherit; text-decoration: none; text-align: left; cursor: pointer; border-radius: 0.4rem;
}
.user-menu a:hover, .user-menu button:hover { background: var(--bg); }
.user-menu form { margin: 0; }

/* Inhalt rückt neben das Menü */
body > main.content, body > .content { margin-left: var(--nav-w); max-width: none; transition: margin-left 0.15s ease; }
body > main.content > * { max-width: 60rem; }
body > main.content-wide > * { max-width: none; }
body.embed > main.content { margin-left: 0; }

/* Eingeklappt (Computer): nur Symbole; der Menüknopf zeigt drei Striche und steht links in der Leiste */
html[data-nav="collapsed"] { --nav-w: var(--nav-w-collapsed); }
html[data-nav="collapsed"] .nav-toggle .ic-menu { display: inline; }
html[data-nav="collapsed"] .nav-toggle .ic-panel { display: none; }
html[data-nav="collapsed"] .nav-toggle { order: -1; }
html[data-nav="collapsed"] .app-header:not(:hover):not(:focus-within) .nav-label,
html[data-nav="collapsed"] .app-header:not(:hover):not(:focus-within) .brand,
html[data-nav="collapsed"] .app-header:not(:hover):not(:focus-within) .user-menu-head { display: none; }
html[data-nav="collapsed"] .nav-top { justify-content: flex-start; }
/* Überlagerung beim Darüberfahren (nur mit Maus) oder bei Tastaturbedienung */
html[data-nav="collapsed"] .app-header:focus-within { width: 15rem; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); }
@media (hover: hover) {
    html[data-nav="collapsed"] .app-header:hover { width: 15rem; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); }
}

/* Seitentitel: Symbol des Bereichs in dessen Farbe (von nav.js eingefügt), Hintergrund leicht in der Bereichsfarbe */
.icon-title { width: 1.6rem; height: 1.6rem; color: var(--area); margin-right: 0.5rem; vertical-align: -0.25em; }
body[data-area] { background: color-mix(in srgb, var(--area) 9%, var(--bg)); }
body.embed[data-area] { background: color-mix(in srgb, var(--area) 9%, var(--surface)); }

/* Telefon und kleines Tablet: Kopfleiste, das Menü ist eine Schublade über dem Inhalt */
@media (max-width: 899px) {
    :root, html[data-nav="collapsed"] { --nav-w: 0rem; }
    .app-header { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: var(--bar-h); flex-direction: row; align-items: center; padding: 0 0.6rem; border-right: 0; border-bottom: 1px solid var(--border); overflow: visible; }
    .nav-top { flex: 1; flex-direction: row; justify-content: flex-start; gap: 0.25rem; }
    .nav-toggle { order: -1; padding: 0.5rem 0.6rem; }
    .nav-toggle .ic-menu { display: inline; }
    .nav-toggle .ic-panel { display: none; }
    html[data-nav="collapsed"] .nav-toggle .ic-menu { display: inline; }
    html[data-nav="collapsed"] .app-header .nav-label, html[data-nav="collapsed"] .app-header .brand { display: flex; }
    body > main.content, body > .content { margin-left: 0; padding-top: calc(var(--bar-h) + 1rem); }
    body.embed > main.content { padding-top: 0.5rem; }
    .nav, .user-area { display: none; }
    html[data-drawer="open"] .app-header { top: 0; bottom: 0; right: auto; width: min(20rem, 85vw); height: auto; flex-direction: column; align-items: stretch; padding: 0.5rem 0.6rem 0.75rem; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25); }
    html[data-drawer="open"] .nav-top { flex: none; }
    html[data-drawer="open"] .nav-toggle .ic-menu { display: none; }
    html[data-drawer="open"] .nav-toggle .ic-panel { display: inline; }
    html[data-drawer="open"] .nav { display: flex; }
    html[data-drawer="open"] .user-area { display: block; }
    html[data-drawer="open"] .user-menu { bottom: 100%; }
    html[data-drawer="open"] body::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 25; }
}

/* Intervalle: Farbe und Form (Symbol), nie nur Farbe */
.iv { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; color: var(--iv-color, var(--muted)); white-space: nowrap; }
.iv .icon { width: 1.05rem; height: 1.05rem; }
.iv-day { --iv-color: var(--iv-day); }
.iv-week { --iv-color: var(--iv-week); }
.iv-month { --iv-color: var(--iv-month); }
.iv-quarter { --iv-color: var(--iv-quarter); }

/* Kacheln mit Symbol in der Bereichsfarbe */
.card-head { display: flex; align-items: center; gap: 0.6rem; }
.card-head .icon { color: var(--card-color, var(--area)); width: 1.5rem; height: 1.5rem; }
a.card { border-top: 3px solid var(--card-color, var(--border)); }
.card[data-area="entry"] { --card-color: var(--area-entry); }
.card[data-area="tasks"] { --card-color: var(--area-tasks); }
.card[data-area="eval"] { --card-color: var(--area-eval); }
.card[data-area="admin"] { --card-color: var(--area-admin); }

/* Benutzerkonto */
.account-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 1rem 0; }
.account-list dt { color: var(--muted); }
.account-list dd { margin: 0; font-weight: 600; }
.account-head { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }
.account-head .avatar { width: 3.5rem; height: 3.5rem; font-size: 1.2rem; }

@page { size: A4 landscape; margin: 1.2cm; }
@media print {
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body { background: #fff; font-size: 10pt; }
    /* Seitenmenü ausblenden, der Symbolsatz (svg) darin muss für die Kästchen erhalten bleiben */
    .app-header { position: static; width: 0; height: 0; padding: 0; border: 0; overflow: hidden; }
    body > main.content, body > .content { margin-left: 0; padding-top: 0; }
    .no-print, .filter-bar, .filter-row, dialog { display: none !important; }
    .print-only { display: block; }
    .eval-printed { margin: 0.2rem 0 0.6rem; color: #444; font-size: 9pt; }
    .table-wrap { overflow: visible; }
    .eval-table { font-size: 8pt; }
    .eval-table th, .eval-table td { padding: 0.15rem 0.3rem; }
    .eval-table .sticky-col, .eval-table .sticky-col-2 { position: static; width: auto; min-width: 0; max-width: none;
        white-space: normal; overflow: visible; text-overflow: clip; box-shadow: none; }
    .eval-table th.sticky-col, .eval-table th.sticky-col-2 { background: transparent; }
    thead { display: table-header-group; }
    tr { break-inside: avoid; }
    a { color: inherit; text-decoration: none; }
    .chart-box { max-width: 100%; }
    h1 .icon { display: none; }
}

/* Kacheln: lange Zeiträume ("wöchentlich: KW 42/2026 (12.10. bis 18.10.2026)") umbrechen statt über den Rand zu laufen */
.card { min-width: 0; overflow-wrap: anywhere; }
.card .iv { white-space: normal; align-items: flex-start; }
.card .iv .icon { margin-top: 0.2rem; }

/* Auswertungskopf: Messliste mit Zahnrad, Zeitraum, Von/Bis nur bei "Benutzerdefiniert" */
.combo { position: relative; }
.combo select { padding-right: 4.5rem; }
.combo-gear {
    position: absolute; top: 50%; right: 1.9rem; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
    border: 0; border-radius: 0.4rem; background: transparent; color: var(--muted); cursor: pointer;
}
.combo-gear:hover { background: var(--bg); color: var(--text); }
.eval-custom { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.eval-custom[hidden] { display: none; }
.eval-dates .field-range { flex: 0 0 auto; }
.eval-custom { flex-wrap: nowrap; }
.eval-custom .field { flex: 0 0 11rem; }

/* Messliste: Auswahl nur so breit wie der längste Eintrag plus Zahnrad */
.eval-dates .combo { display: inline-block; }
.eval-dates .combo select { width: auto; max-width: 100%; }
.eval-dates .field-range select { width: auto; }
.eval-dates .eval-custom { flex: 0 0 auto; }
.eval-dates .eval-custom .field { flex: 0 0 10.5rem; }

/* Auswahl der Messungen als modaler Dialog */
.eval-dialog { width: min(94vw, 46rem); max-height: 88vh; padding: 0; border: 1px solid var(--border); border-radius: 0.6rem; background: var(--surface); color: var(--text); }
.eval-dialog[open] { display: flex; flex-direction: column; }
.eval-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.eval-dialog-head { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.eval-dialog-head h2 { margin: 0; }
.eval-dialog-body { flex: 1 1 auto; overflow-y: auto; padding: 0.5rem 1rem; }
.eval-dialog-foot { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 0.75rem 1rem; border-top: 1px solid var(--border); }
.eval-dialog-foot .btn { margin-top: 0; }
.eval-dialog .eval-points { max-height: none; }

/* Konformität: Kästchen (eigene Formen für entspricht / entspricht nicht, Farbe unterstützt nur) */
.box-ok { color: #1f7a4d; width: 1.1rem; height: 1.1rem; }
.box-bad { color: var(--error-text); width: 1.1rem; height: 1.1rem; stroke-width: 2.4; }
.box-dash { color: var(--muted); font-weight: 700; }
.box-empty { display: inline-block; width: 1.2rem; height: 1.2rem; border: 1.5px dashed var(--border); border-radius: 0.3rem; vertical-align: middle; }
.compliance-cell { text-align: center; }
.compliance-cell .cell-link { display: inline-flex; text-decoration: none; }
.compliance-sum { white-space: nowrap; font-weight: 600; text-align: right; }
.compliance-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; padding: 0; margin: 0.5rem 0; color: var(--muted); font-size: 0.9rem; }
.compliance-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Diagramm auf weißem Grund */
.chart-box { background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.75rem; }

/* ---------- Tabellenfilter (filter.js) ---------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.5rem 0; min-height: 1.5rem; }
.filter-count { font-size: 0.9rem; }
.filter-reset { font-size: 0.9rem; }
.filter-reset:not([hidden])::before { content: "· "; color: var(--muted); }
.filter-row th { font-weight: normal; padding: 0.2rem 0.4rem; background: var(--bg); }
.filter-row .filter-input { width: 100%; min-width: 5rem; padding: 0.2rem 0.4rem; font-size: 0.85rem; box-sizing: border-box; }
.filter-select { width: 100%; min-width: 5rem; text-align: left; padding: 0.2rem 0.4rem; font-size: 0.85rem; cursor: pointer;
    border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text, inherit); }
.filter-select::after { content: " \25BE"; float: right; color: var(--muted); }
.filter-select.active, .filter-row .filter-input.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.filter-popup { position: absolute; z-index: 60; min-width: 10rem; max-width: 15rem; max-height: 20rem; overflow: auto;
    background: var(--surface, #fff); border: 1px solid var(--border, #ccc); border-radius: 6px; padding: 0.4rem 0.6rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.filter-popup label { display: block; padding: 0.15rem 0; white-space: nowrap; font-weight: normal; }
.account-prefs { margin: 1rem 0; }
.link-button { background: none; border: 0; padding: 0; color: var(--primary); cursor: pointer; text-decoration: underline; font: inherit; }
input.input-days { width: 6.5rem; }
.filter-date { display: flex; flex-direction: column; gap: 0.35rem; min-width: 14rem; }
.filter-date input[type="date"] { width: auto; min-height: 2rem; padding: 0.1rem 0.4rem; font-size: 0.9rem; }
.filter-date .link-button { text-align: left; }
body > main.content-wide > p { max-width: 60rem; }
/* Die Anwendung ist hell gestaltet: Browser-Elemente (Vorschlagslisten, Auswahllisten) nicht dunkel darstellen */
:root { color-scheme: light; }
.filter-row .filter-input { min-height: 0; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; }
.filter-row .filter-input option, datalist option { color: #1d2733; background: #fff; }
.backfill-grid { display: grid; grid-template-columns: max-content auto; gap: 0.5rem 1rem; align-items: center; justify-items: start; }
.backfill-grid label { margin: 0; font-weight: 400; }
.eval-output { margin-left: auto; display: inline-flex; gap: 0.5rem; }

/* ===== Testsystem-Hinweis ===== */
:root { --banner-h: 2rem; }
.test-banner {
    position: fixed; z-index: 28; top: 0; left: var(--nav-w); right: 0; height: var(--banner-h);
    display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(45deg, #ffd54a, #ffd54a 14px, #f2c230 14px, #f2c230 28px);
    color: #1d2733; font-weight: 700; letter-spacing: 0.04em; border-bottom: 1px solid #c9a21e;
}
body:has(.test-banner) > main.content { margin-top: var(--banner-h); }
.login-page .test-banner { left: 0; }
@media (max-width: 899px) {
    .test-banner { top: var(--bar-h); left: 0; }
    body:has(.test-banner) > main.content { margin-top: 0; padding-top: calc(var(--bar-h) + var(--banner-h) + 1rem); }
    .login-page .test-banner { top: 0; }
}
@media print {
        .test-banner { left: 0; top: 0; }
}

/* Über diese Anwendung: großes Herstellerlogo */
.about-logo { margin: 0.5rem 0 1rem; line-height: 0; }
.about-logo img { height: 6rem; width: auto; }

/* Herstellerlogo oben links anstelle des Tabellen-Symbols; auf der Anmeldeseite über dem Titel */
.brand-logo { height: 2rem; width: auto; flex: none; }
.login-logo { margin: 0 0 0.75rem; text-align: center; line-height: 0; }
.login-logo img { height: 4rem; width: auto; }

/* Auswertungstabelle auf dem Telefon: Vorrang haben die Werte. Die Messungsspalte wird schmal (Anfang des Namens, Tooltip und
   "Lange Namen umbrechen" zeigen mehr), die Grenzwertspalte scrollt mit, und im Hochformat weist ein Hinweis auf das Querformat hin. */
.landscape-hint { display: none; }
@media (max-width: 40rem) {
    .eval-table .sticky-col { width: 6.5rem; min-width: 6.5rem; max-width: 6.5rem; box-shadow: 1px 0 0 var(--border); }
    .eval-table .sticky-col-2 { position: static; box-shadow: none; min-width: 3.5rem; }
    .eval-table .sticky-col .hint { display: none; }
    .wrap-names .eval-table .sticky-col .hint { display: block; margin-left: 0; }
}
@media (max-width: 40rem) and (orientation: portrait) {
    .landscape-hint { display: block; }
}
@media print { .landscape-hint { display: none; } }

/* ===== Geführte Einweisung (static/js/tour.js) ===== */
.tour-blocker { position: fixed; inset: 0; z-index: 1000; }
.tour-dim { background: rgba(15, 25, 40, 0.55); }
.tour-spot { position: fixed; z-index: 1001; display: none; pointer-events: none; border-radius: 0.5rem;
    box-shadow: 0 0 0 3px #fff, 0 0 0 9999px rgba(15, 25, 40, 0.55); }
.tour-pop { position: fixed; z-index: 1002; width: min(26rem, calc(100vw - 1rem)); max-height: calc(100vh - 1rem); overflow-y: auto;
    box-sizing: border-box; padding: 1.1rem 1.25rem; background: var(--surface); color: var(--text); border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
.tour-pop h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.tour-pop p { margin: 0.4rem 0; }
.tour-pop ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.tour-pop li { margin: 0.3rem 0; }
.tour-count { color: var(--muted); font-size: 0.85rem; }
.tour-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }
@media print { .tour-blocker, .tour-spot, .tour-pop { display: none; } }

/* Über diese Anwendung: großes Bild und Änderungsverlauf */
.about-hero { margin: 0.5rem 0 1rem; line-height: 0; }
.about-hero img { width: 100%; max-width: 40rem; height: auto; border-radius: 0.75rem; }
.changelog { margin: 0.4rem 0; padding: 0.4rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; }
.changelog summary { cursor: pointer; font-weight: 600; }
.changelog ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.changelog li { margin: 0.3rem 0; }