/*
 * Sparverein Saarland – shared visual language, ported from the original
 * tool (sparverein-ergebnis_71.html). Palette, typography, and component
 * styles (buttons, inputs, tables, cards, nav) are kept consistent with the
 * customer's existing tool so the new Symfony app feels like the same
 * application. Montserrat is self-hosted via fonts.css (see ADR-001, GDPR).
 */

:root {
    --primary:       #C8430A;   /* Sparverein-Orange */
    --primary-dark:  #922E06;
    --primary-light: #FDF0EB;
    --sidebar-bg:    #1C2B3A;   /* Dunkles Navy */
    --sidebar-hover: #243547;
    --text:          #1a1a1a;
    --text-muted:    #6b7280;
    --border:        #e5e7eb;
    --bg:            #F8F7F4;   /* Warmes Creme */
    --white:         #ffffff;
    --pos:           #15803d;
    --neg:           #b91c1c;
    --shadow:        0 1px 6px rgba(0, 0, 0, 0.09);
    --radius:        6px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
}

h1, h2, h3, h4 {
    margin: 0 0 12px;
    color: var(--sidebar-bg);
    font-weight: 600;
}

h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

p {
    margin: 0 0 12px;
    line-height: 1.5;
}

a {
    color: var(--primary);
}

/* ===== APP SHELL (left sidebar + fluid main) ===== */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-main {
    flex: 1;
    min-width: 0;
    padding: 24px 28px;
    max-width: 1400px;
}

/* Unauthenticated pages (login, reset password) render centered on the
   light background — the .login-page/.login-card styles do the framing. */
.app-guest {
    min-height: 100vh;
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: 232px;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    color: #e2e8f0;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* Brand / logo */
.sidebar-brand {
    display: block;
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
    text-decoration: none;
}

.sidebar-brand .brand-logo {
    display: block;
    width: 100%;
    max-width: 180px;
    height: auto;
}

.sidebar-brand .brand-fallback {
    display: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.sidebar-brand small {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0;
}

/* Primary navigation */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 10px 6px;
}

.sidebar-nav a,
.sidebar-nav .is-disabled {
    display: block;
    padding: 9px 12px;
    border-radius: var(--radius);
    border-left: 3px solid transparent;
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.sidebar-nav a:hover {
    background: var(--sidebar-hover);
    color: var(--white);
}

.sidebar-nav a.is-active {
    background: rgba(200, 67, 10, 0.25);
    border-left-color: var(--primary);
    color: var(--white);
}

.sidebar-nav .is-disabled {
    color: #64748b;
    cursor: not-allowed;
}

/* Section label */
.sidebar-section {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    padding: 14px 16px 6px;
}

/* Month history list */
.sidebar-months {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0 10px 16px;
    overflow-y: auto;
}

.sidebar-year {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    padding: 8px 10px 3px;
}

/* Collapsible year groups: current year open, older years disclose on click. */
.sidebar-year-group + .sidebar-year-group {
    margin-top: 2px;
}

summary.sidebar-year {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 0.12s;
}

/* Hide the native disclosure triangle (WebKit/Blink + the standard marker). */
summary.sidebar-year::-webkit-details-marker {
    display: none;
}
summary.sidebar-year::marker {
    content: '';
}

/* Own caret so it rotates consistently across browsers. */
summary.sidebar-year::before {
    content: '';
    flex: none;
    width: 0;
    height: 0;
    border-left: 4px solid currentColor;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    transition: transform 0.12s;
}
.sidebar-year-group[open] > summary.sidebar-year::before {
    transform: rotate(90deg);
}

summary.sidebar-year:hover {
    color: #e2e8f0;
}
summary.sidebar-year:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius);
}

.sidebar-year-months {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-months a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 1px;
    border-radius: var(--radius);
    border-left: 3px solid transparent;
    font-size: 12px;
    font-weight: 600;
    color: #e2e8f0;
    text-decoration: none;
    transition: background 0.12s;
}

.sidebar-months a:hover {
    background: var(--sidebar-hover);
}

.sidebar-months a.is-active {
    background: rgba(200, 67, 10, 0.25);
    border-left-color: var(--primary);
}

.month-state {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

/* Account block (bottom) */
.sidebar-account {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding: 14px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-account .account-email {
    font-size: 12px;
    color: #94a3b8;
    word-break: break-all;
}

.sidebar-account a {
    font-size: 12px;
    font-weight: 600;
    color: #cbd5e1;
    text-decoration: none;
}

.sidebar-account a:hover {
    color: var(--white);
}

.sidebar-account form {
    margin-top: 4px;
}

.sidebar-account .btn-outline {
    width: 100%;
    justify-content: center;
}

/* ===== CARDS / PANELS / SECTIONS ===== */
.card,
.section {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.card-header,
.section-header {
    background: var(--sidebar-bg);
    color: var(--white);
    padding: 9px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-header .unit-hint {
    margin-left: auto;
    font-size: 10px;
    font-weight: 400;
    color: #94a3b8;
    text-transform: none;
    letter-spacing: 0;
}

.card-body,
.section-body {
    padding: 20px;
}

/* ===== BUTTONS ===== */
.btn,
button,
input[type="submit"] {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    text-decoration: none; /* anchors styled as .btn are chips, not underlined links */
    background: var(--primary);
    color: var(--white);
}

/* Inline action-bar icons (Tabler): fixed size, never shrink, follow the label colour. */
.btn-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
    background: var(--primary-dark);
}

button:disabled,
.btn:disabled,
input[type="submit"]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* A .btn mid-submit (e.g. a bulk import processing many files): spinner + disabled look. */
.btn[aria-busy="true"] {
    opacity: 0.75;
    cursor: wait;
}

.btn[aria-busy="true"]::after {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* ===== KEYBOARD FOCUS ===== */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.sidebar-nav a:focus-visible,
.sidebar-months a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.btn-navy {
    background: var(--sidebar-bg);
}

.btn-navy:hover {
    background: #131f2d;
}

.btn-outline {
    background: var(--white);
    color: var(--sidebar-bg);
    border: 1.5px solid #d1d5db;
}

.btn-outline:hover {
    background: var(--white);
    border-color: var(--sidebar-bg);
}

.btn-danger {
    background: var(--neg);
    color: var(--white);
}

.btn-danger:hover {
    background: #991b1b;
}

.btn-danger-outline {
    background: var(--white);
    color: var(--neg);
    border: 1.5px solid var(--neg);
}

.btn-danger-outline:hover {
    background: var(--neg);
    color: var(--white);
}

/* Detail-view action row: buttons on one line; the last item (finalize/unlock) sits right. */
/* :not([hidden]) so the UA `[hidden]{display:none}` still wins — a `display`
   on a class beats it, and a hidden row of buttons stood there anyway. */
.detail-actions:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.detail-actions-end {
    margin-left: auto;
}

/* Per-row rename form: name input beside the button, not full-width like other text inputs. */
/* :not([hidden]) so the UA `[hidden]{display:none}` still wins when the rename form is
   toggled off (see inline_edit_controller). */
.inline-rename:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Bank disclosure: the dark section header doubles as the accordion toggle. */
details.gs-bank > summary.section-header {
    cursor: pointer;
    list-style: none;
}
details.gs-bank > summary.section-header::-webkit-details-marker {
    display: none;
}
details.gs-bank > summary.section-header::before {
    content: '';
    flex: none;
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.12s;
}
details.gs-bank[open] > summary.section-header::before {
    transform: rotate(90deg);
}
details.gs-bank > summary.section-header:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.inline-rename input[type="text"] {
    width: auto;
    flex: 1 1 auto;
}

.gs-table th,
.gs-table td {
    text-align: left;
    vertical-align: middle;
}

.gs-table th:last-child,
.gs-table td:last-child {
    text-align: right;
}

.gs-table th:first-child,
.gs-table td:first-child {
    width: 140px;
    font-variant-numeric: tabular-nums;
}

.gs-alias-row td:first-child {
    padding-left: 28px;
}

/* Keep the row's Bearbeiten + Löschen on one line rather than stacking. */
.gs-table .row-actions {
    flex-wrap: nowrap;
    align-items: center;
}

.gs-toolbar {
    margin-bottom: 20px;
}

/* ===== MODAL (finalize confirm / unlock reason) ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.modal-overlay.is-open {
    display: flex;
}

.modal {
    background: var(--white);
    border-radius: 10px;
    padding: 28px;
    width: 420px;
    max-width: 96vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    white-space: normal;
}

.modal h2 {
    margin-bottom: 10px;
    color: var(--sidebar-bg);
}

.modal p {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* ===== FORMS / INPUTS ===== */
.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.field label,
label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
    padding: 8px 10px;
    border: 1.5px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    color: var(--text);
    background: var(--white);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
}

/* File input: the native "Datei auswählen" button styled as a secondary (.btn-outline). */
input[type="file"] {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 8px 16px;
    border: 1.5px solid #d1d5db;
    border-radius: var(--radius);
    background: var(--white);
    color: var(--sidebar-bg);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

input[type="file"]::file-selector-button:hover {
    border-color: var(--sidebar-bg);
}

input[type="file"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ===== FORM LAYOUT (create / edit) ===== */
/* Keep the entry form compact instead of full-page-wide rows. */
.form-narrow {
    max-width: 680px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

.field .help-text,
.field small {
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
}

/* Label with a trailing info icon (hover reveals a [data-tooltip] note). */
.field-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.field-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--text-muted);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    cursor: help;
}

.field-info:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* Status line under the "Zinssatz aus dem Vormonat übernehmen" action. */
.field-status:empty {
    display: none;
}

/* ===== CHECKBOX LISTS (grouped document selection) ===== */
/* Overrides the global uppercase/muted label styling so each option reads as a
   normal, roomy checkbox row. */
.check-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    cursor: pointer;
}

.check-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--primary);
    cursor: pointer;
}

.check-item input[type="checkbox"]:disabled {
    cursor: default;
}

/* When "Alle" locks the individual boxes, mute them so it's clear they are all
   included and controlled by the master toggle. */
.check-item input[type="checkbox"]:disabled + span {
    color: var(--text-muted);
}

.check-item em {
    font-style: normal;
    color: var(--text-muted);
    font-size: 12px;
}

/* The "Alle …" master row, set off from the individual options below it. */
.check-master {
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

/* Horizontal variant used on the send-compose screen: the applicable documents for one
   recipient laid out in a wrapping row, with an "Alle" toggle set off on the left. */
.check-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
}

.check-all-master {
    font-weight: 600;
    padding-right: 16px;
    border-right: 1px solid var(--border);
}

.versand-empf {
    white-space: nowrap;
    vertical-align: top;
}

/* Per-recipient send status on the Freigabe screen. */
.status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-pill--ok {
    background: #dcfce7;
    color: #0c6b2b;
}

.status-pill--err {
    background: #fee2e2;
    color: #c31414;
}

.status-pill--offen {
    background: #e5e7eb;
    color: #4b5563;
}

/* In-field convenience action (e.g. "Zinssatz aus dem Vormonat übernehmen").
   Rendered as a compact outline button so it clearly reads as clickable. */
.btn-carryover {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 5px 11px;
    background: var(--white);
    border: 1.5px solid #d1d5db;
    border-radius: var(--radius);
    color: var(--sidebar-bg);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.btn-carryover:hover {
    border-color: var(--sidebar-bg);
    background: #f8fafc;
}

.btn-carryover:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.btn-carryover .btn-icon {
    flex: none;
}

/* Reinertrag-Konto rows: fields and their submit button sit on one baseline. */
/* :not([hidden]) so the UA `[hidden]{display:none}` still wins when the inline edit
   form is toggled off (see inline_edit_controller). */
.inline-form:not([hidden]) {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.inline-form input[name="kontonummer"] {
    width: 12em;
}

.konto-add-heading {
    margin-top: 16px;
}

/* Sachgewinn collection: each row lays its three fields + remove button inline. */
.collection-rows [data-collection-row] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.collection-rows [data-collection-row] > div:first-child {
    flex: 1;
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 130px;
    gap: 12px;
}

.collection-rows [data-collection-row] > div:first-child > div {
    margin-bottom: 0;
}

/* Lift the "Entfernen" button off the row's flex-end baseline (which sits at the help
   text) up to the input line, so it lines up with the fields instead of floating low. */
.collection-rows [data-collection-row] .btn-outline {
    margin-bottom: 15px;
}

.collection-rows [data-collection-row] .help-text {
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    margin: 0;
}

/* ===== TABLES ===== */
table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 8px 12px;
    text-align: right;
    border-bottom: 1px solid var(--border);
}

th:first-child {
    text-align: left;
}

td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

tr:last-child td {
    border-bottom: none;
}

.row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.row-actions form {
    margin: 0;
}

/* Equal-width action buttons (e.g. "Bearbeiten" / "Löschen" stacked in a narrow cell). */
.row-actions--equal .btn {
    min-width: 120px;
    justify-content: center;
}

.users-table th,
.users-table td {
    text-align: left;
}

.users-table th:last-child {
    text-align: right;
}

.td-r {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

tr.sum-row td {
    background: #f8fafc;
    font-weight: 600;
    border-top: 2px solid var(--border);
    color: var(--sidebar-bg);
}

/* Verkaufsstatistik deltas */
.delta { font-variant-numeric: tabular-nums; }
.delta.pos { color: #15803d; }
.delta.neg { color: #b91c1c; }
.delta.zero { color: var(--muted, #64748b); }

.verkaufsart-eingerueckt td:first-child {
    padding-left: 28px;
    color: var(--muted, #64748b);
}

/* Fixed grid so the six Verkaufsstatistik tables share one label column and outer edges. */
.stat-table {
    table-layout: fixed;
}

.stat-table__label {
    width: 30%;
}

/* Reinertrag-Konto table: size columns to content (overrides stat-table's fixed
   layout) and keep the number vertically centred against its action button. */
.konto-table {
    table-layout: auto;
}

.konto-table td,
.konto-table th {
    vertical-align: middle;
}

/* Headers over left-aligned text values (the global `th` is right-aligned for
   numeric tables; this table's Kontonummer column holds left-aligned text). */
.konto-table th {
    text-align: left;
}

/* Narrow, right-aligned action column (the "Bearbeiten" button). */
.stat-table__action {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* ===== ALERTS ===== */
.alert {
    border-radius: var(--radius);
    padding: 10px 16px;
    margin-bottom: 20px;
    font-size: 13px;
}

.alert-error,
.alert-reset_password_error {
    background: var(--primary-light);
    border: 1px solid #e5c0b0;
    color: var(--primary-dark);
}

.alert-warning {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #78350f;
}

/* ===== CARRY-OVER BANNER ===== */
/* Scope display to :not([hidden]) so the UA `[hidden]{display:none}` still wins. */
.carry-over-banner:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 12px;
}

.carry-over-banner {
    background: var(--primary-light);
    border: 1px solid #e5c0b0;
    color: var(--primary-dark);
    border-radius: var(--radius);
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 13px;
}

.carry-over-banner span {
    flex: 1;
}

/* ===== LOGIN ===== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 24px;
}

.login-card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 380px;
    padding: 32px;
}

.login-card h1 {
    text-align: center;
    margin-bottom: 24px;
}

.login-card .field {
    margin-bottom: 18px;
}

.login-card button {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}

/* ===== DASHBOARD ACTION CARDS ===== */
.action-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.action-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow);
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.action-card:hover {
    border-color: var(--sidebar-bg);
    transform: translateY(-1px);
}

.action-card .action-icon {
    font-size: 24px;
}

.action-card strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--sidebar-bg);
}

.action-card span {
    font-size: 12px;
    color: var(--text-muted);
}

.action-card.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.action-card.is-disabled:hover {
    border-color: var(--border);
    transform: none;
}

/* ===== KPI CARDS ===== */
.kpi-card {
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 16px 18px;
    box-shadow: var(--shadow);
}

.kpi-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--sidebar-bg);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* ===== FINANCIAL CALCULATION BREAKDOWN ===== */
.calc-grid {
    padding: 4px 0;
}

.calc-group {
    padding: 4px 0;
}

.calc-group-hdr,
.calc-row.group-header {
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--border);
}

.calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.calc-row:last-child {
    border-bottom: none;
}

.calc-row.subtotal {
    background: #f8fafc;
    font-weight: 600;
    border-top: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
}

.calc-row.grand-total {
    background: var(--primary-light);
    font-weight: 600;
    border-top: 2px solid #e5c0b0;
    font-size: 15px;
}

.calc-label {
    color: #374151;
}

.calc-label small {
    display: block;
    font-size: 11px;
    color: #9ca3af;
    font-weight: 400;
    margin-top: 1px;
}

.calc-val-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calc-val {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.calc-pct {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 70px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.calc-row.grand-total .calc-val {
    color: var(--pos);
}

.calc-row.grand-total.warn .calc-val {
    color: var(--neg);
}

/* ===== HISTORISCHER VERLAUF ===== */
.empty-state {
    background: var(--white, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 8px);
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted, #64748b);
}

.table-scroll {
    overflow-x: auto;
}

.verlauf-table {
    font-size: 13px;
}

.verlauf-table a {
    text-decoration: none;
}

.verlauf-table th,
.verlauf-table td {
    white-space: nowrap;
}

.verlauf-table tr.gj-header td {
    background: var(--sidebar-bg, #1C2B3A);
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.verlauf-table tr.gj-sum td {
    background: var(--primary-light, #FDF0EB);
    font-weight: 600;
    border-top: 2px solid #e5c0b0;
    color: var(--primary-dark, #922E06);
}

.verlauf-table tr.draft td {
    color: var(--text-muted, #64748b);
    font-style: italic;
}

.verlauf-table tr.clickable-row {
    cursor: pointer;
}

.verlauf-table tr.clickable-row:hover td {
    background: var(--primary-light, #FDF0EB);
}

/* Payout columns (Sach-/Geldgewinne) render red, as in the original tool — the
   draft-scoped selector keeps red winning over the muted draft-row color. */
.verlauf-table td.amount-neg,
.verlauf-table tr.draft td.amount-neg {
    color: var(--neg);
}

.verlauf-table .lock-icon {
    font-size: 10px;
    margin-left: 4px;
}

.verlauf-table .draft-dot {
    font-size: 10px;
    margin-left: 4px;
    color: #f59e0b;
}

/* Document action bar on the month detail view (Slice A). */
.doc-actions { display: flex; gap: 1rem 2.25rem; flex-wrap: wrap; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.75rem 1rem; margin: 1rem 0; }
/* Groups are separated by spacing (column-gap) instead of a border: a border-left
   divider strays to the left of a group that wraps onto a second row. */
.doc-actions-group { display: flex; flex-direction: column; gap: 0.4rem; }
.doc-actions-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: #6b7280; }
.doc-actions-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* A .btn rendered as a non-clickable <span> (e.g. Abo-Auswertung with no ABOS data).
   pointer-events stays enabled so the [data-tooltip] hover still fires. */
.btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: auto; }
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute; left: 0; top: 100%; margin-top: 4px;
    padding: 4px 8px; background: var(--sidebar-bg); color: var(--white);
    font-size: 12px; white-space: nowrap; border-radius: 4px; z-index: 20;
}

/* Inline hint boxes (e.g. a modal hint box). */
.hint { border-radius: 4px; padding: 8px 12px; font-size: 12px; margin-bottom: 10px; }
.hint-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; }
.hint-warn { background: #fef3c7; border: 1px solid #f59e0b; color: #78350f; }

/* ===== PRINT UTILITIES ===== */
@media print {
    .no-print { display: none !important; }
}

/* Fristen auf der Startseite des Spendenfahrzeuge-Tools: Kacheln mit festen
   Zeiträumen, darunter der Verlauf nach Quartalen. Beides sind Links — die
   Auswahl steht in der Adresse, damit sie sich teilen und zurückblättern lässt. */
.fristen {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

/* Die Kachel bekommt genug Grundbreite für einen Geldbetrag und wird nicht
   beliebig breit. Vorher teilten sich vier Kacheln die Zeile zu gleichen
   Teilen — bei 1024 px blieben 140 px je Kachel, und "466.634,00 €" brach
   das Eurozeichen in die zweite Zeile. Jetzt rücken sie lieber in eine
   zweite Reihe. Die Obergrenze ist für den anderen Fall da: bleibt eine
   Kachel als letzte allein, stand sie sonst über die ganze Breite. */
.frist {
    flex: 1 1 11.5rem;
    max-width: 22rem;
    padding: .7rem .85rem;
    border: 1px solid var(--line, #d9d5cd);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}

.frist:hover {
    border-color: var(--gold, #f7a600);
}

.frist.is-active {
    border-color: var(--gold, #f7a600);
    background: rgba(247, 166, 0, .08);
}

/* Eine Zahl, die über zwei Zeilen geht, liest sich nicht mehr als Zahl —
   schon gar nicht, wenn die Währung allein unten steht. */
.frist-zahl {
    display: block;
    font-size: 1.5rem;
    line-height: 1.2;
    white-space: nowrap;
}

.frist-text {
    display: block;
    font-size: .8rem;
    color: var(--muted, #6f7a93);
}

.zeitstrahl {
    display: flex;
    align-items: flex-end;
    gap: .35rem;
    margin-bottom: 1.25rem;
}

.saeule {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    text-decoration: none;
    color: inherit;
}

.saeule-zahl {
    font-size: .75rem;
    color: var(--muted, #6f7a93);
    min-height: 1em;
}

/* Die Säulen sind Verweise — das sah man ihnen nicht an. Grau im Ruhezustand
   und ein Gelb beim Überfahren, das es im Werkzeug gar nicht gibt (die Farbe
   war nirgends festgelegt, der Browser nahm einen Ersatzwert). Jetzt ein
   gedämpfter Ton der Hausfarbe im Ruhezustand, die volle Farbe beim
   Überfahren und bei Auswahl. */
.saeule-balken {
    display: block;
    width: 100%;
    border-radius: 3px 3px 0 0;
    background: #f0c3ad;
    transition: background-color .12s ease;
}

.saeule:hover .saeule-balken,
.saeule:focus-visible .saeule-balken,
.saeule.is-active .saeule-balken {
    background: var(--primary);
}

.saeule:hover .saeule-zahl,
.saeule:focus-visible .saeule-zahl,
.saeule.is-active .saeule-zahl {
    color: var(--primary-dark);
    font-weight: 700;
}

/* Der eigentliche Hinweis steht in Worten: eine Farbe allein sagt nicht,
   dass ein Klick etwas tut. */
.zeitstrahl-hinweis {
    margin: .25rem 0 1rem;
}

.saeule-text {
    font-size: .7rem;
    color: var(--muted, #6f7a93);
}

.fristen-datum {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    font-size: .85rem;
    color: var(--muted, #6f7a93);
}

/* Beschriftung mitten in einer Zeile: hier wirkt die gesperrte Versalschrift
   der Formularlabels wie Geschrei, deshalb normale Schreibweise. */
.fristen-datum label {
    font-size: .85rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.fristen-datum input[type="date"] {
    width: auto;
    font-variant-numeric: tabular-nums;
}

/* Tabellen im Spendenfahrzeuge-Tool. Eigene Klasse statt Änderung an der
   globalen Tabelle: dort sind die Kopfzeilen rechtsbündig (die Tabellen der
   Shell sind zahlenlastig), hier stehen überwiegend Texte, und eine
   rechtsbündige Überschrift über linksbündigem Text lässt die Spalten
   auseinanderlaufen. */
.tabelle-rollbar {
    overflow-x: auto;
}

/* Aufklapper für lange Listen: die überzähligen Zeilen stehen im HTML und
   werden nur ausgeblendet — der Schalter ist eine unsichtbare Checkbox, damit
   das ohne JavaScript funktioniert. Beim Drucken ist die Liste vollständig. */
.aufklapper-schalter {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.aufklapper .verborgen {
    display: none;
}

.aufklapper-schalter:checked ~ * .verborgen {
    display: table-row;
}

.aufklapper-mehr {
    display: inline-block;
    margin-top: 0.6rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
}

.aufklapper-mehr:hover {
    color: var(--text);
}

.aufklapper-zu,
.aufklapper-schalter:checked ~ .aufklapper-mehr .aufklapper-auf {
    display: none;
}

.aufklapper-schalter:checked ~ .aufklapper-mehr .aufklapper-zu {
    display: inline;
}

@media print {
    .aufklapper .verborgen {
        display: table-row;
    }

    .aufklapper-mehr {
        display: none;
    }
}

.sf-tabelle th,
.sf-tabelle td {
    text-align: left;
    vertical-align: top;
}

.sf-tabelle th.sf-num,
.sf-tabelle td.sf-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Spalten, die nie umbrechen dürfen: ein Betrag oder ein Datum, das über zwei
   Zeilen zerfällt, ist schwerer zu lesen als eine breitere Tabelle. */
.sf-tabelle .sf-eng {
    white-space: nowrap;
}

.sf-fahrzeuge td {
    line-height: 1.35;
}

/* Der Fahrzeugtyp ist kurz und soll nicht in zwei Zeilen zerfallen. */
.sf-fahrzeuge th:nth-child(2),
.sf-fahrzeuge td:nth-child(2) {
    white-space: nowrap;
}

/* Die Einrichtung ist die längste Angabe und bekommt den Rest der Breite. */
.sf-fahrzeuge th:nth-child(3),
.sf-fahrzeuge td:nth-child(3) {
    width: 28%;
}

.sf-fahrzeuge th:nth-child(4),
.sf-fahrzeuge td:nth-child(4) {
    width: 24%;
}

.sf-fahrzeuge .help-text {
    display: inline;
    margin-left: .25rem;
}

/* Detailansicht eines Fahrzeugs: die erste Spalte ist keine Überschriftenzeile,
   sondern die Beschriftung der Zeile — schmal und ruhig gehalten. */
.sf-detail th {
    width: 12rem;
    background: transparent;
    text-transform: none;
    letter-spacing: normal;
    font-size: .8rem;
    color: var(--muted, #6f7a93);
    border-bottom: 1px solid #f1f5f9;
}

/* Kostenauswertung: die Summenzeile trägt die Tabelle, sie darf sich abheben. */
.sf-kosten tfoot td {
    border-top: 2px solid #d9d5cd;
    border-bottom: none;
}

/* Marke für einen Zustand, der ins Auge fallen muss (Totalschaden). */
.marke {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .7rem;
    letter-spacing: .02em;
    white-space: nowrap;
    vertical-align: middle;
}

.marke-warnung {
    background: #fde2e1;
    color: #8a2b28;
}

/* Art eines abgelegten Papiers direkt in der Zeile richtigstellen. */
.art-aendern {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.art-aendern select {
    width: auto;
    font-size: .8rem;
    padding: 4px 6px;
}

.art-aendern .btn-outline {
    padding: 4px 8px;
    font-size: .75rem;
}

/* Kontrollkästchen: Kästchen vor die Beschriftung, und die Beschriftung in
   normaler Schreibweise. Die Formularlabels der Shell sind gesperrte Versalien —
   über einem Eingabefeld richtig, neben einem Kästchen liest es sich wie
   Geschrei, und die Beschriftung stand außerdem vor dem Kästchen. */
.field > div:has(> input[type="checkbox"]) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .1rem .5rem;
}

.field > div:has(> input[type="checkbox"]) > input[type="checkbox"] {
    grid-column: 1;
    grid-row: 1;
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.field > div:has(> input[type="checkbox"]) > label {
    grid-column: 2;
    grid-row: 1;
    font-size: .9rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text, #1c2b3a);
}

.field > div:has(> input[type="checkbox"]) > .help-text {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
}

/* Die Papiere eines Schadens direkt in der Fahrzeugansicht — die Reparatur-
   freigabe wird dort gesucht, nicht erst eine Seite weiter. */
.papierliste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.papierliste li + li {
    margin-top: .15rem;
}

/* Aktionsspalte: nur so breit wie ihre Knöpfe, und die Überschrift steht
   darüber statt am linken Rand einer weiten, sonst leeren Spalte. */
.sf-tabelle .sf-aktionen {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Der zweite Weg zum Anschreiben: ohne Briefkopf, für vorgedrucktes Papier.
   Ein Knopf daneben wäre gleich laut wie der übliche Fall. */
.anlage-vordruck {
    display: block;
    margin-top: .25rem;
    text-align: right;
    font-size: .75rem;
}

/* Eine Zahl, die zugleich ein Weg ist: unterstrichen erst beim Überfahren,
   sonst zieht sie in einer Zahlenspalte mehr Aufmerksamkeit als der Name. */
.zahl-link {
    text-decoration: none;
}

.zahl-link:hover,
.zahl-link:focus-visible {
    text-decoration: underline;
}

/* Zeilen mit Knöpfen sind so hoch wie die Knöpfe. Der oben ausgerichtete Text
   klebte dann an der Oberkante, während die Knöpfe darunter standen — in einer
   Zeile mit einem einzeiligen Namen gehört beides auf dieselbe Mittellinie.
   Nur diese Zeilen: anderswo (Laufzeit, Adressen) ist "oben" richtig. */
.sf-tabelle tr:has(.sf-aktionen) td {
    vertical-align: middle;
}

/* Die Knöpfe bleiben nebeneinander: sonst staucht die schmale Spalte sie
   untereinander und macht jede Zeile doppelt so hoch. */
.sf-tabelle td.sf-aktionen .row-actions {
    flex-wrap: nowrap;
}

/* Nur für Screenreader: die leere Zelle der Matrix trägt einen Punkt, damit
   sie ruhig bleibt — vorgelesen werden muss trotzdem, dass dort nichts steht. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Kleine Beigabe zu einer Zahl — Stückzahl, Werbekostenzuschuss. Als eigene
   Fläche statt als Fließtext, damit sie die Zahl nicht verwässert. */
.chip {
    display: inline-block;
    padding: .05rem .35rem;
    border-radius: 4px;
    background: rgb(0 0 0 / 4%);
    color: var(--text-muted);
    font-size: .7rem;
    line-height: 1.5;
    white-space: nowrap;
}

/* Konditionsverlauf: Matrix und Karten je Fahrzeugtyp.

   Die Matrix ist überwiegend leer — die meisten Typen gibt es nur in ein, zwei
   Jahrgängen. Deshalb sind hier die *belegten* Zellen hervorgehoben und die
   leeren fast unsichtbar: die Form der Tabelle sagt dann schon, was es wann
   gab, bevor man eine Zahl liest. */
.sf-verlauf {
    border-collapse: separate;
    border-spacing: 0;
}

.sf-verlauf th,
.sf-verlauf td {
    line-height: 1.35;
    border-bottom: 1px solid var(--border);
}

/* Senkrechte Linien zwischen den Jahren: die Tabelle trägt drei Ordnungen
   (Typ, Autohaus, Jahrgang) — ohne das Gitter verschwimmen die Spalten. */
.sf-verlauf th + th,
.sf-verlauf td + td {
    border-left: 1px solid var(--border);
}

.sf-verlauf thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--white);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Die Namensspalte bleibt beim seitlichen Rollen stehen — ohne sie sind die
   Zahlen rechts nicht mehr zuzuordnen. */
.sf-verlauf .verlauf-name {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 12rem;
    background: var(--white);
    box-shadow: 1px 0 0 var(--border);
}

.sf-verlauf thead .verlauf-name {
    z-index: 3;
}

/* Trennt die Zeilengruppen eines Fahrzeugtyps voneinander. */
.sf-verlauf tr.verlauf-gruppe td {
    border-top: 1px solid var(--border);
}

.verlauf-typ {
    display: block;
    font-weight: 600;
}

.verlauf-haus {
    display: block;
    font-size: .78rem;
    color: var(--text-muted);
}

.verlauf-belegt {
    background: color-mix(in srgb, var(--primary-light) 55%, transparent);
}

.verlauf-leer {
    color: var(--border);
}

.verlauf-rate {
    display: block;
    white-space: nowrap;
}

/* Eine hinterlegte Kondition hebt sich von der bloß gezahlten Rate ab. */
.verlauf-fest {
    font-weight: 600;
}

/* Der Werbekostenzuschuss steht unter der Rate und wie sie rechtsbündig —
   er ist ein Betrag derselben Kondition, keine Randnotiz. */
.wkz {
    display: block;
    margin-top: .1rem;
    font-size: .72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Karten je Fahrzeugtyp: gleich breite Spalten statt eines Flex-Umbruchs, der
   die letzte Karte über die ganze Zeile zieht. */
.typkarten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
    gap: .9rem;
    align-items: start;
}

.typkarte {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    overflow: hidden;
}

.typkarte-kopf {
    margin: 0;
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    font-size: .95rem;
    font-weight: 600;
}

.typkarte-liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.typkarte-zeile {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    gap: .1rem .6rem;
    align-items: baseline;
    padding: .45rem .85rem;
}

.typkarte-zeile + .typkarte-zeile {
    border-top: 1px solid var(--border);
}

.typkarte-jahr {
    color: var(--text-muted);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.typkarte-mitte {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .4rem;
    min-width: 0;
}

.typkarte-haus {
    font-size: .85rem;
}

.typkarte-rate {
    text-align: right;
    white-space: nowrap;
}

/* Schmale Fenster: Jahr und Rate teilen sich die erste Reihe, die Beigaben
   rutschen darunter — sonst quetscht das Dreispaltenraster die Beträge um. */
@media (width <= 30rem) {
    .typkarte-zeile {
        grid-template-columns: 2.75rem 1fr;
    }

    .typkarte-rate {
        grid-column: 2;
        grid-row: 1;
    }

    .typkarte-mitte {
        grid-column: 2;
        grid-row: 2;
    }
}

/* Der Befund des Abgleichs in Sätzen. Er steht über den Zahlen, weil er die
   Frage beantwortet, mit der man herkommt — die Tabellen belegen ihn danach. */
.befund {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border-left: 4px solid;
    border-radius: var(--radius);
    line-height: 1.55;
}

.befund p {
    margin: 0;
}

.befund p + p {
    margin-top: .5rem;
}

.befund-gut {
    border-color: #24603f;
    background: #f1f8f3;
}

.befund-warnung {
    border-color: var(--primary);
    background: var(--primary-light);
}

/* Die Vergabejahre der Einstiegsseite: gleich breite Karten, damit "läuft"
   und "abgeschlossen" nebeneinander vergleichbar bleiben. */
.vergabekarten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
    gap: .9rem;
    align-items: start;
}

.vergabekarte {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .8rem 1rem;
    background: var(--white);
}

.vergabekarte-kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .6rem;
    font-size: 1rem;
}

.vergabekarte-zahlen {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.6rem;
    margin: 0 0 .5rem;
}

.vergabekarte-zahlen div {
    display: flex;
    flex-direction: column-reverse;
}

.vergabekarte-zahlen dt {
    font-size: .75rem;
    color: var(--text-muted);
}

.vergabekarte-zahlen dd {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Zwei kurze Felder nebeneinander statt untereinander — Kürzel und BLZ,
   Straße und Ort gehören ohnehin zusammen. */
.feldpaar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: 0 1.2rem;
}

/* Die Landkreise als Kästchenfeld.

   Das Formular gibt Kästchen und Beschriftung als Geschwister aus, ohne Hülle
   je Eintrag. Ein Raster darüber würde beide in eigene Zellen legen und damit
   auseinanderreißen. Deshalb wird das Kästchen selbst verborgen — es bleibt im
   Dokument und bedienbar — und die Beschriftung zeichnet es als Kasten davor.
   So ist jeder Eintrag ein Element, und das Raster kann ihn nicht trennen. */
.kreisfeld > div > div:first-of-type {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
    gap: .15rem .8rem;
}

.kreisfeld input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.kreisfeld input[type="checkbox"] + label {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .2rem 0;
    font-weight: 400;
    font-size: .85rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    cursor: pointer;
}

.kreisfeld input[type="checkbox"] + label::before {
    content: "";
    flex: 0 0 auto;
    width: .95rem;
    height: .95rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--white);
}

.kreisfeld input[type="checkbox"]:checked + label::before {
    border-color: var(--primary);
    background: var(--primary);
    /* Das Häkchen als Hintergrundbild, damit es die Kastenhöhe nicht ändert. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4'/%3E%3C/svg%3E");
    background-size: .8rem;
    background-position: center;
    background-repeat: no-repeat;
}

.kreisfeld input[type="checkbox"]:focus-visible + label::before {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Die Überschrift des Feldes bleibt in der Form der übrigen Feldnamen. */
.kreisfeld > div > label {
    display: block;
    margin-bottom: .4rem;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Überschrift innerhalb einer Karte, wenn sie zwei Abschnitte trägt. */
.abschnitt {
    margin: 1.4rem 0 .6rem;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Die Zeile, mit der ein Fahrzeug hinzukommt, hebt sich ab. */
.konditionen-neu td {
    background: var(--bg);
}

/* Der Name des Fahrzeugtyps und das Autohaus brauchen Platz für ein Wort,
   nicht für drei Buchstaben. */
.konditionen-neu input[type="text"]:not(.zahlfeld) {
    min-width: 10rem;
}

/* Erst gar nicht stauchen lassen: die Tabelle rollt, die Spalten bleiben. */
.sf-konditionen th,
.sf-konditionen td {
    white-space: nowrap;
}

.sf-konditionen td.help-text {
    white-space: normal;
}

/* Eine Karte, die sich auf- und zuklappen lässt: <details> mit der Kopfzeile
   als <summary>. Der Pfeil des Browsers wird ersetzt, damit die Kopfzeile
   aussieht wie die der übrigen Karten. */
.karte-klapp > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.karte-klapp > summary::-webkit-details-marker {
    display: none;
}

.karte-klapp > summary::before {
    content: "▸";
    font-size: .8em;
    transition: transform .12s ease;
}

.karte-klapp[open] > summary::before {
    transform: rotate(90deg);
}

/* Der Einstieg zum Brett: das zentrale Werkzeug, also auch der auffälligste
   Knopf der Seite. */
.brett-einstieg .card-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brett-satz {
    margin: 0;
    max-width: 46rem;
}

.btn-gross {
    padding: 12px 26px;
    font-size: 15px;
}

/* Das Vergabebrett: Spalten je Institut, waagerecht rollbar. Die Spalten
   behalten ihre Breite — Karten sollen beim Ziehen nicht unter der Maus
   wegwandern, weil eine Nachbarspalte plötzlich schmaler wird. */
.brett-spalten {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    align-items: flex-start;
}

/* Der Farbton je Spalte kommt als --spaltenton aus der Vorlage; Kopf, Rand
   und Karten leiten ihre Farben daraus ab. Ein Ton statt elf gepflegter
   Farbwerte: so bleibt die Zuordnung auch dann eindeutig, wenn ein Institut
   dazukommt. */
.brett-spalte {
    --ton: hsl(var(--spaltenton, 0) 45% 42%);
    --ton-hell: hsl(var(--spaltenton, 0) 60% 96%);

    flex: 0 0 17.5rem;
    display: flex;
    flex-direction: column;
    max-height: 74vh;
    border: 1px solid var(--border);
    border-top: 3px solid var(--ton);
    border-radius: 10px;
    background: var(--white);
}

/* Die Spalte der noch nicht zugeordneten Anträge hebt sich ab: dort beginnt
   die Arbeit, und dort bleibt liegen, was keine Bank nimmt. Sie bleibt beim
   seitlichen Rollen stehen — aus ihr wird gezogen. */
.brett-offen {
    --ton: var(--text-muted);
    --ton-hell: var(--bg);

    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg);
    box-shadow: 4px 0 8px -6px rgb(0 0 0 / 35%);
}

.brett-spalte.spalte-bereit {
    border-color: var(--ton);
    box-shadow: inset 0 0 0 2px var(--ton-hell);
}

/* Die Kopfkarte des Bretts trägt die Kennzahlen; darunter beginnt sofort das
   Brett, damit möglichst viel davon sichtbar ist. */
.brett-kopfkarte .fristen {
    margin-bottom: .6rem;
}

.brett-kopf {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--border);
    border-radius: 8px 8px 0 0;
    background: var(--ton-hell);
}

.brett-kopf h2 {
    margin: 0;
    font-size: .92rem;
    color: var(--ton);
}

.spalte-zahlen {
    display: flex;
    flex-direction: column;
    margin: .3rem 0 .2rem;
    font-size: .78rem;
    color: var(--text-muted);
}

.brett-karten {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .6rem;
    overflow-y: auto;
    min-height: 4rem;
}

.brett-karte {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .45rem .55rem .45rem .7rem;
    border: 1px solid var(--border);
    border-left: 4px solid var(--ton);
    border-radius: 8px;
    background: var(--white);
    font-size: .82rem;
    cursor: grab;
    box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
}

.brett-karte:hover {
    box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
}

/* Der Stand färbt die Karte, nicht nur eine Marke am Rand: zugesagt ist
   erledigt, abgelehnt ist aus dem Rennen — beides muss man im Vorbeiscrollen
   sehen. */
.brett-karte.stand-zugesagt {
    background: #f3faf5;
}

.brett-karte.stand-abgelehnt {
    background: #f5f5f5;
    color: var(--text-muted);
}

.karte-kreis {
    align-self: flex-start;
    margin-top: .2rem;
    padding: .05rem .35rem;
    border-radius: 4px;
    background: var(--ton-hell);
    color: var(--ton);
    font-size: .68rem;
}

.brett-karte:active {
    cursor: grabbing;
}

.karte-zieht {
    opacity: .4;
}

.karte-zeile {
    display: block;
}

.karte-fuss {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .25rem;
    padding-top: .25rem;
    border-top: 1px solid var(--border);
    font-size: .75rem;
}

/* Beim Drucken taugt ein waagerecht rollbares Brett nichts. */
@media print {
    .brett-spalten {
        display: block;
        overflow: visible;
    }

    .brett-spalte {
        max-height: none;
        page-break-inside: avoid;
    }
}

/* Ein vorgeschlagener Wert ist noch nicht gespeichert — das muss man sehen,
   bevor man weiterklickt. */
.zahlfeld-vorschlag {
    border-color: var(--primary);
    background: var(--primary-light);
}

/* Die Tabellen, die erst nach "Bearbeiten" änderbar sind. Das fieldset trägt
   keine eigene Gestalt — es ist nur der Schalter, der alles darin auf einmal
   sperrt. min-width: 0, sonst sprengt es die rollbare Tabelle darin. */
.sperrfeld {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* Gesperrt sieht man an: flach, ohne Rahmenfarbe, mit dem Mauszeiger des
   Lesens. Ein Feld, das aussieht wie ein Feld, aber keines ist, verwirrt mehr
   als es schützt. Die Schrift bleibt dunkel — die Zahlen sollen lesbar sein,
   nicht ausgegraut. */
.sperrfeld:disabled input,
.sperrfeld:disabled select,
.sperrfeld:disabled textarea {
    border-color: transparent;
    background: var(--bg);
    color: var(--text);
    opacity: 1;
    cursor: default;
}

/* Eine Leasingsumme, die nicht die gerechnete ist, sondern eine eingetragene.
   Ohne diese Marke sieht man der Zahl nicht an, dass eine berichtigte
   Monatsrate an ihr vorbeiläuft — auch im gesperrten Zustand, gerade da. */
.sperrfeld input.zahlfeld-eigen {
    border-bottom: 2px solid var(--primary);
}

/* Der Weg zurück zur Rechnung, direkt unter dem Feld. Ein Knopf, der wie ein
   Verweis aussieht: er ändert nichts auf dem Server, er füllt nur das Feld. */
.zahl-knopf {
    display: block;
    margin: 2px 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.sperrfeld:disabled .zahl-knopf {
    display: none;
}

/* Eine Bank, die über ihrem Volumen liegt, muss das sagen. */
.volumen-knapp {
    color: var(--neg);
}

/* Zahlenfelder in der Volumentabelle: rechtsbündig wie die Beträge daneben,
   sonst tanzen Eingabe und Ergebnis in derselben Spalte auseinander. */
/* min-width statt width: eine Tabelle mit vielen Spalten staucht sonst die
   Felder, bis "13.576,00" abgeschnitten ist — rollen soll die Tabelle, nicht
   die Zahl verschwinden. */
.zahlfeld {
    min-width: 7.5rem;
    width: 7.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* In einem Formularfeld muss die Breite ausdrücklich gewinnen: die
   allgemeine Regel für Eingabefelder trägt einen Attributwähler und ist
   damit stärker als eine Klasse allein. Ohne das nahm das Preisfeld die
   ganze Zeile, und das Eurozeichen dahinter rutschte in die nächste.
   Bewusst nur in Formularen — in Tabellen bestimmt die Spalte die Breite. */
.field input.zahlfeld {
    width: 7.5rem;
}

/* Die Beschriftung steht über dem Feld, nicht daneben. Das ergab sich
   bisher von selbst, weil jedes Eingabefeld die volle Breite nahm; neben
   einem schmalen Feld rutschte sie plötzlich in dieselbe Zeile. */
.field label {
    display: block;
}

/* Zwei Ziffern. Die Spinner-Pfeile des Browsers fressen in einer engen Spalte
   den Platz der Ziffern — hier zählt der getippte Wert, nicht das Klicken. */
.zahlfeld-kurz {
    min-width: 4.5rem;
    width: 4.5rem;
    appearance: textfield;
}

.zahlfeld-kurz::-webkit-outer-spin-button,
.zahlfeld-kurz::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

/* Die Auswahl in der Zeile "neue Kondition" trägt Fahrzeugtypnamen. */
.sf-konditionen select {
    min-width: 11rem;
}

/* Die Hinweiszelle der Summenzeile trägt Sätze, keine Zahlen — sie darf
   umbrechen, sonst läuft sie aus der Tabelle heraus. */
.sf-volumen tfoot .fuss-hinweis {
    white-space: normal;
}

.sf-volumen tfoot .fuss-hinweis .help-text {
    display: block;
}

/* Feste Spaltenbreiten: sonst verteilt der Browser den Platz nach dem
   längsten Inhalt, und die Überschrift "Reinertrag 2026" steht weit neben dem
   Feld, das darunter gehört. Der Name des Instituts bekommt den Rest. */
.sf-volumen {
    table-layout: fixed;
    width: 100%;
}

.sf-volumen th:nth-child(2),
.sf-volumen td:nth-child(2) { width: 9.5rem; }

.sf-volumen th:nth-child(3),
.sf-volumen td:nth-child(3),
.sf-volumen th:nth-child(4),
.sf-volumen td:nth-child(4) { width: 8.5rem; }

.sf-volumen th:nth-child(5),
.sf-volumen td:nth-child(5) { width: 13rem; }

/* Die Aktionsspalte überschreibt die allgemeine Regel width:1% — bei festem
   Layout wäre die Spalte sonst kaum breiter als ein Buchstabe. */
.sf-volumen th:nth-child(6),
.sf-volumen td.sf-aktionen { width: 10rem; }

.sf-volumen td:first-child,
.sf-volumen th:first-child {
    width: auto;
    min-width: 13rem;
}

/* Die Zahlenfelder füllen ihre Spalte, statt eine feste Breite zu behaupten. */
.sf-volumen .zahlfeld {
    width: 100%;
    min-width: 0;
}

/* Auslastung als Balken: die Zahl allein sagt nicht, welche Bank noch Luft
   hat — nebeneinander sieht man es in einem Blick. */
.balken {
    display: inline-block;
    width: 7rem;
    height: .55rem;
    vertical-align: middle;
    border-radius: 999px;
    background: rgb(0 0 0 / 8%);
    overflow: hidden;
}

.balken-fuellung {
    display: block;
    height: 100%;
    background: var(--primary);
}

/* Über dem Volumen: der Balken ist voll, die Farbe sagt, dass es zu viel ist. */
.balken-voll {
    background: var(--neg);
}

.balken-zahl {
    margin-left: .4rem;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* Die Auswahlfelder der Antragsliste tragen lange Banknamen und Wörter wie
   "vorgeschlagen" — zu schmal, und die Spalte schneidet mitten im Wort ab. */
.sf-antraege .zeilenform select {
    min-width: 10rem;
    max-width: 12rem;
}

/* Drei Auswahlfelder je Zeile sind viel Rahmen. Sie treten zurück, bis der
   Mauszeiger darauf steht — bedienbar bleiben sie, aber die Liste liest sich
   als Liste und nicht als Formular. */
.sf-antraege select {
    border-color: transparent;
    background-color: var(--bg);
}

.sf-antraege select:hover,
.sf-antraege select:focus {
    border-color: var(--border);
    background-color: var(--white);
}

/* Die Einrichtung ist der Anker der Zeile: Name zuerst, darunter Haus und
   Anschrift. In einer Zeile gelesen wird daraus eine Textwurst. */
.antrag-einrichtung {
    line-height: 1.35;
}

.antrag-name {
    display: block;
    font-weight: 600;
}

.antrag-zusatz {
    display: block;
}

.antrag-ort {
    display: block;
    font-size: .78rem;
    color: var(--text-muted);
}

/* Der Landkreis des Antrags. Eigene Zeile und nicht an die Anschrift gehängt:
   er ist keine Adressangabe, sondern das, was ihn einem Institut zuordnet. */
/* Der Landkreis steht in derselben Zeile wie die Anschrift — er ist kein
   eigener Absatz, sondern die letzte Angabe der Adresszeile. */
.antrag-kreis {
    font-size: inherit;
    color: inherit;
}

/* Ohne Landkreis bekommt der Antrag keine Alternative angeboten. Das ist eine
   Lücke in den Daten, keine Eigenschaft des Antrags — also sichtbar, aber
   zurückhaltend: bei fünfundsechzig Zeilen darf eine Warnung nicht schreien. */
.antrag-kreis-fehlt {
    font-style: italic;
    color: var(--primary);
    opacity: .85;
}

/* Beiwerk zum Namen: eine Zeile, und wenn sie nicht passt, wird gekürzt statt
   umgebrochen. Eine Liste soll man überfliegen können; der vollständige Text
   steht beim Draufzeigen. */
.antrag-ort {
    display: block;
    font-size: .78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Der Name ist der Anker der Zeile und bekommt den Platz — geholt bei den
   Auswahlfeldern daneben, die ihn nicht brauchen. In der Einrichtungsliste
   aus demselben Grund: "AWO Jugendwohngruppe St. Wendel" lief über drei
   Zeilen. */
.sf-antraege .antrag-einrichtung,
.sf-einrichtungen .antrag-einrichtung {
    min-width: 17rem;
}

/* Prozentzeichen und Feld gehören zusammen, ebenso Balken und Zahl: eine
   schmale Spalte darf sie nicht auseinanderreißen. */
.sf-volumen td.sf-num,
.sf-volumen td:last-child {
    white-space: nowrap;
}

/* Die Zahl der Anträge steht unter dem Namen des Instituts, nicht dahinter. */
.sf-volumen td .help-text {
    display: block;
}

/* Ebenso in der Vorschau des Bestands: dort steht der Ort unter der
   Einrichtung. Inline klebte er sonst am Namen ("gGmbH66709 Weiskirchen"). */
.sf-bestand td .help-text {
    display: block;
}

/* Ein Auswahlfeld, dessen längste Option die Breite bestimmt, wird sonst so
   breit wie der längste Bankname. */
.fristen-datum select {
    max-width: 18rem;
}

/* Ein Formular, das nur gelegentlich gebraucht wird (Import, Volumen setzen):
   zugeklappt, damit es die Seite nicht beherrscht. */
.aufklapper-form {
    margin: .8rem 0;
}

.aufklapper-form > summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: .85rem;
}

.aufklapper-form > summary:hover {
    color: var(--text);
}

/* Ein Formular, das in einer Tabellenzeile sitzt, darf keine eigene Höhe
   mitbringen — sonst wächst die Zeile um seine Ränder. */
.zeilenform {
    margin: 0;
}

.zeilenform select {
    min-width: 8rem;
}

/* Marke für einen Befund ohne Beanstandung. */
.marke-gut {
    background: #dff0e6;
    color: #24603f;
}

/* Ausgelaufener Vertrag: eine Feststellung, keine Warnung — deshalb grau. */
.marke-ruhe {
    background: #ececec;
    color: #5b5b5b;
}

/* Summenzeile einer Fahrzeugliste: sie trägt die Tabelle und darf sich abheben. */
.sf-fahrzeuge tfoot td {
    border-top: 2px solid #d9d5cd;
    border-bottom: none;
    font-weight: 600;
}

/* Schmale Fenster: die Seitenleiste ist 232 px breit und nimmt dort den halben
   Platz weg — dann legt sie sich als Leiste über den Inhalt, und der Inhalt
   bekommt die volle Breite. Rein additiv: am Schreibtisch ändert sich nichts. */
@media (width <= 60rem) {
    .app-shell {
        flex-direction: column;
    }

    .sidebar {
        width: auto;
        height: auto;
        position: static;
        overflow-y: visible;
    }

    .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px 4px;
    }

    .sidebar-nav a,
    .sidebar-nav .is-disabled {
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 7px 10px;
    }

    .sidebar-nav a.is-active {
        border-left-color: transparent;
        border-bottom-color: var(--primary);
    }

    .sidebar-account {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: .4rem .9rem;
        margin-top: 0;
        padding: 8px 16px 10px;
    }

    .app-main {
        padding: 16px;
    }
}

/* --- Bescheide an die Einrichtungen ------------------------------------- */

/* Zwei Stapel in einer Karte (Zusagen, Absagen) — die Zwischenüberschrift
   trennt sie, ohne dass daraus zwei Aufklapper werden müssten. */
.abschnitt-titel {
    margin: 1.5rem 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--farbe-text);
}

.abschnitt-titel:first-of-type { margin-top: 0.5rem; }

.sf-bescheide td.sf-aktionen { width: 18rem; }

/* Fehlende Leasingkonditionen fallen sonst erst im fertigen Vertrag auf. */
.help-text.warnung {
    color: #9a3412;
    font-weight: 600;
}

/* Die Vereinbarungs-Angaben je Kondition: ein Satz Felder pro Fahrzeug,
   zweizeilig, damit sie nicht als siebte bis dreizehnte Spalte in der ohnehin
   breiten Konditionentabelle landen. */
.vereinbarung-satz {
    border: 1px solid var(--farbe-rahmen, #e2e2e2);
    border-radius: 6px;
    padding: 0.75rem 1rem 0.25rem;
    margin-bottom: 0.75rem;
}

.vereinbarung-satz legend {
    padding: 0 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.feldgruppe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0 1rem;
}

.feldgruppe-schmal {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

/* Der Stapel ist bei dreißig Absagen das eigentliche Werkzeug — er steht
   deshalb über den Listen und nicht darunter.

   Jeder Knopf trägt seinen Zweitweg direkt unter sich. Der Hinweis stand
   zuerst als Satz daneben, mit den Verweisen mittendrin — die brachen aus der
   Zeile aus und standen einzeln am rechten Rand. */
.stapel-leiste {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--farbe-rahmen, #e2e2e2);
    border-radius: 6px;
    background: var(--farbe-flaeche-leise, #fafafa);
}

.stapel-leiste .stapel-titel {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.stapel-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.stapel-knopf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.stapel-vordruck {
    font-size: 0.75rem;
    line-height: 1.2;
}

.stapel-leise {
    color: var(--farbe-text-leise, #767676);
}

.stapel-leiste .help-text {
    margin: 0.6rem 0 0;
}

/* Ein Hinweis, der eine Entscheidung anmahnt — nicht rot wie ein Fehler, aber
   auch nicht so leise wie die übrigen Hilfetexte: was hier steht, fällt sonst
   still aus beiden Stapeln heraus. */
.warnhinweis {
    margin: 0 0 0.75rem;
    padding: 0.7rem 1rem;
    border: 1px solid #f0b37e;
    border-left-width: 4px;
    border-radius: 6px;
    background: #fff8f0;
    color: #7c3a12;
    font-size: 0.9rem;
    line-height: 1.5;
}

.warnhinweis a { color: inherit; }

/* Der Weg aus dem Werkzeug hinaus zur Werkzeugübersicht des Vereins. Er stand
   als erster Punkt in der Hauptnavigation und las sich dort wie ein Teil des
   Werkzeugs — er führte aber heraus. Unten bei den anderen Wegen nach draußen
   (Benutzerverwaltung, Abmelden) steht er richtig, abgesetzt durch eine
   eigene Linie. */
.sidebar-account .account-hub {
    padding-bottom: 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

.sidebar-account .account-hub::before {
    content: "← ";
}

/* Die Originalmeldung der Tabellenbibliothek — leise, aber da: sie hilft, wenn
   jemand nachfragen muss, und stört nicht, wenn nicht. */
.befund-technisch {
    font-size: 0.8rem;
    color: var(--farbe-text-leise, #767676);
}

/* Das abgeschlossene Brett: eine Ansicht, kein Werkzeug. Der Mauszeiger sagt es
   mit, bevor jemand zu ziehen versucht. */
.brett-gesperrt .brett-karte {
    cursor: default;
    opacity: 0.92;
}

/* Ein Aufklapper, der eine eigene Rubrik ist und nicht nur eine Nebenbemerkung.
   Als graue Kleinschrift stand er unscheinbar über dem Speichern-Knopf und sah
   aus wie dessen Fußnote — dabei steckt dahinter alles, was die Vereinbarung
   braucht. */
.aufklapper-abschnitt {
    margin: 1.1rem 0 0.9rem;
    border: 1px solid var(--farbe-rahmen, #e2e2e2);
    border-radius: 6px;
    background: var(--farbe-flaeche-leise, #fafafa);
}

.aufklapper-abschnitt > summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 600;
}

.aufklapper-abschnitt[open] > summary {
    border-bottom: 1px solid var(--farbe-rahmen, #e2e2e2);
    margin-bottom: 0.8rem;
}

.aufklapper-abschnitt > summary .abschnitt-zahl {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-muted);
    border: 1px solid var(--farbe-rahmen, #e2e2e2);
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    background: #fff;
}

.aufklapper-abschnitt > .help-text,
.aufklapper-abschnitt > fieldset {
    margin-left: 1rem;
    margin-right: 1rem;
}

/* Zweizeilige Beschriftungen ("Mehr-km bis Staffel (Cent)") schoben ihr
   Eingabefeld nach unten, während die Nachbarn oben blieben. Die Felder sitzen
   deshalb an der Unterkante ihrer Zelle — dann steht die Zeile gerade,
   gleichgültig wie lang die Beschriftung ist. */
/* Alle Eingabefelder einer Zeile stehen auf derselben Höhe — auch wenn die
   eine Beschriftung einzeilig ist ("Monat") und die andere zweizeilig
   ("Abgebuchter Betrag (€)"). Ohne diese Mindesthöhe schiebt die längere
   Beschriftung ihr Feld nach unten, und die Zeile wirkt verrutscht. Das war
   im Abgleich zu sehen und wäre in jeder Zweiergruppe wieder aufgetaucht,
   sobald eine Beschriftung umbricht.

   Bewusst nur in Feldzeilen: in einspaltigen Formularen gibt es nichts
   auszurichten, und die zusätzliche Höhe wäre dort nur Leerraum. */
.feldgruppe .field label {
    min-height: 2.4em;
}

/* Zwei Felder nebeneinander beginnen oben, nicht unten.
   flex-end sollte die Eingabefelder auf eine Linie bringen, wenn eine
   Beschriftung umbricht. Es tat das Gegenteil, sobald das eine Feld einen
   Hilfetext trägt und das andere nicht: die zusätzliche Höhe liegt *unter*
   dem Eingabefeld, und das kürzere Feld rutschte mitsamt seiner Beschriftung
   darunter. Die Beschriftungen sind hier einzeilig — oben ausgerichtet stehen
   beide Zeilen auf einer Linie. */
.feldgruppe .field {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Die Summenzeile der Volumentabelle: eine Linie darüber, die Zahlen fett —
   sie beantwortet die Frage, wegen der man die Tabelle aufmacht. */
.sf-tabelle tfoot .summenzeile td {
    border-top: 2px solid var(--farbe-rahmen-stark, #cbd5e1);
    padding-top: 0.6rem;
    font-weight: 600;
}

/* Die Vorbehalte darunter, über die ganze Breite statt in einer Spalte. */
.sf-tabelle tfoot .summenfuss td {
    border: none;
    padding-top: 0.15rem;
}

/* Ein Satz zusammengehöriger Felder innerhalb eines Abschnitts. Die Angaben
   des Jahres standen als ein langer Stapel bildschirmbreiter Felder da; sie
   gehören aber zu drei verschiedenen Schreiben, und ein Datumsfeld über die
   ganze Breite zu ziehen macht es nicht leichter auszufüllen. */
.feldsatz {
    border: none;
    border-top: 1px solid var(--farbe-rahmen, #e2e2e2);
    padding: 0.9rem 0 0.2rem;
    margin: 0 1rem 0.4rem;
}

.feldsatz:first-of-type {
    border-top: none;
    padding-top: 0.2rem;
}

.feldsatz > legend {
    padding: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Die Hilfetexte sitzen dicht an ihrem Feld, nicht auf halbem Weg zum nächsten. */
.feldgruppe .field .help-text {
    margin: 0.2rem 0 0;
}

.aufklapper-abschnitt > form > .detail-actions {
    margin: 0.6rem 1rem 1rem;
}

/* Die Beschriftung des Feldsatzes klebte an der ersten Feldbeschriftung. */
.feldsatz > legend {
    display: block;
    margin-bottom: 0.45rem;
}

/* Ein einzelnes Feld soll nicht über die ganze Breite laufen, nur weil es
   allein in seiner Gruppe steht. */
.feldgruppe-einzeln {
    grid-template-columns: minmax(0, 22rem);
}

/* "Vereinigte Volksbank Saarlouis-Losheim am See-Sulzbach/Saar" zerfiel in der
   engen ersten Spalte in sechs Zeilen. Die Tabelle darf lieber rollen als den
   Namen zu zerreißen. */
.sf-volumen th:first-child,
.sf-volumen td:first-child {
    min-width: 15rem;
}

/* Ein Winkel als Aufklapp-Zeichen.
   Das eingebaute Dreieck von <summary> fällt weg, sobald die Zeile ein
   Flex-Container wird — dann sah der Abschnitt aus wie eine Überschrift, die
   nichts tut. Der Winkel zeigt nach rechts, solange zu ist, und nach unten,
   sobald offen. */
.aufklapper-abschnitt > summary {
    list-style: none;
}

.aufklapper-abschnitt > summary::-webkit-details-marker {
    display: none;
}

.aufklapper-abschnitt > summary::before {
    content: "";
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    margin-top: -0.15rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.aufklapper-abschnitt[open] > summary::before {
    transform: rotate(45deg);
    margin-top: -0.25rem;
}

.aufklapper-abschnitt > summary:hover {
    background: #f1f3f5;
    border-radius: 6px 6px 0 0;
}

.aufklapper-abschnitt > summary:hover::before {
    border-color: var(--text);
}

/* Überschrift einer Liste links, die Ausgabeknöpfe rechts auf derselben Höhe. */
.listenkopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.listenkopf .help-text {
    margin: 0;
}

.listenkopf-export {
    display: flex;
    gap: 0.5rem;
    flex: none;
}

/* Die Kachel, die mahnt: Zusagen ohne Fahrzeug. */
.frist-warnung .frist-zahl {
    color: #9a3412;
}

.sf-auslieferung td .help-text {
    display: inline;
    margin-left: 0.4rem;
}

/* Der Rücklauf der Vereinbarung: Datum und Knopf in einer Zeile, und wenn er
   da ist, nur die Marke mit einem leisen Weg zurück. */
.rueckform {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.rueckform input[type="date"] {
    width: auto;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
}

.knopf-leise {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.knopf-leise:hover {
    color: var(--text);
}

/* Eine Marke, die nur benennt (Landkreis), nicht warnt oder lobt. */
.marke-leise {
    background: #eef2f5;
    color: var(--text);
    margin: 0.1rem 0.15rem 0.1rem 0;
}

/* Ein Filter ist eine Zeile, kein Stapel: die Felder nebeneinander, so breit
   wie ihr Inhalt, der Knopf am Ende auf derselben Grundlinie. Wie die
   Kostenseite es vormacht. */
.filterzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

/* Jedes Feld so breit, wie sein Inhalt ist — und als Ganzes umbrechend.
   Erst nahm jedes Feld eine feste Mindestbreite, und die Knöpfe rutschten
   allein in die nächste Zeile; dann liess ich die Felder schrumpfen, und
   die Knöpfe blieben, aber der Text stand abgeschnitten da ("nur laufende
   V…"). Beides zugleich geht bei fünf Feldern nicht — also bekommt der
   Inhalt seinen Platz, die Zeile bricht geordnet um, und wo ein Text
   trotzdem zu lang wäre, wird der Text gekürzt und nicht das Feld. */
.filterzeile .field {
    margin: 0;
    flex: 0 0 auto;
    min-width: 0;
}

.filterzeile .field select,
.filterzeile .field input {
    width: auto;
    min-width: 0;
}

.filterzeile .filter-knoepfe {
    display: flex;
    gap: 0.5rem;
    min-width: 0;
}

.filterzeile .filter-hinweis {
    flex-basis: 100%;
    margin: 0;
}

/* Das Bank-Feld nahm sonst die Breite seines längsten Eintrags. */
.filterzeile .field select {
    max-width: 18rem;
}

/* Die Knöpfe geben nicht nach — sie sollen lesbar bleiben, auch wenn die
   Felder daneben schmal werden. */
.filterzeile .filter-knoepfe {
    flex: 0 0 auto;
}

.filterzeile .filter-knoepfe {
    flex-direction: row;
    align-items: flex-end;
}

/* Löschen steht am Ende der Bearbeiten-Seite, abgesetzt — die seltenste
   Handlung, nicht in jeder Zeile der Liste. */
.loeschen-unten {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--farbe-rahmen, #e2e2e2);
}

/* Eine Zusage muss man auf dem Brett sehen, ohne die Karte zu lesen: die
   Kante wird grün, ein Haken steht vor dem Namen, der Spaltenkopf zählt mit.
   Die leichte Tönung allein ging zwischen den Spaltenfarben unter. */
.brett-karte.stand-zugesagt {
    border-left-color: #2f855a;
    background: #f3faf5;
}

.karte-haken {
    color: #2f855a;
    font-weight: 700;
}

.brett-karte.stand-abgelehnt strong {
    text-decoration: line-through;
    text-decoration-color: #b7b7b7;
}

.spalte-zusagen {
    color: #2f855a;
    font-weight: 600;
}


/* --- Pruefmaske fuer eingescannte Antraege --------------------------------
   Felder links, erkannter Text rechts: wer einen Wert bestaetigen soll, muss
   ihn sehen koennen, ohne zu scrollen. Unter 60rem stehen sie untereinander —
   die Spalten waeren dort je 20rem breit und beide unlesbar. */
.scan-pruefung {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 24px;
    align-items: start;
}

@media (max-width: 60rem) {
    .scan-pruefung {
        grid-template-columns: minmax(0, 1fr);
    }
}

.scan-text {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    padding: 12px 16px;
    /* Der Text eines zweiseitigen Schreibens ist lang; die Felder daneben
       sollen deswegen nicht am oberen Rand allein stehen. */
    max-height: 70vh;
    overflow-y: auto;
}

.scan-text-kopf {
    font-size: 0.95rem;
    margin: 0 0 4px;
}

.scan-zeilen {
    margin: 8px 0 0;
    padding-left: 1.6em;
    font-size: 0.85rem;
}

.scan-zeilen li {
    margin-bottom: 2px;
}

/* Eine erkannte Zeile: anklickbar, ziehbar — und markierbar. Das Markieren
   ist der Grund, warum hier kein <button> mehr steht: in einem Knopf laesst
   sich kein Text mit der Maus auswaehlen, und aus "Sozialraumbuero West,
   Serriger Strasse 20, 66663 Merzig" soll sich auch nur die Strasse
   herausgreifen lassen. */
.scan-zeile {
    display: block;
    padding: 1px 3px;
    margin-left: -3px;
    color: var(--text);
    cursor: grab;
    border-radius: 3px;
    user-select: text;
    /* Eine erkannte Zeile ist so lang wie die Zeile im Brief — sie muss
       umbrechen duerfen, sonst steht ihr Ende ausserhalb der Spalte. */
    white-space: normal;
    overflow-wrap: anywhere;
}

.scan-zeile:hover,
.scan-zeile:focus-visible {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.scan-zeile:active {
    cursor: grabbing;
}

/* Die wiedererkannten Stammdatensaetze ueber den Feldern. */
.scan-bekannt {
    margin-bottom: 16px;
}

.scan-bekannt-liste {
    margin: 6px 0 0;
    padding-left: 1.2em;
}

.scan-bekannt-liste li {
    margin-bottom: 4px;
}

.scan-bekannt-liste .help-text {
    display: block;
    margin: 0;
}

/* Das Feld, in das der naechste Klick auf eine Zeile geht. Ohne diese Marke
   war das Ziel unsichtbar, und ein vergessener Feldklick trug die Zeile
   stillschweigend woanders ein. */
.scan-felder .field input.scan-feld-ziel {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}

/* Waehrend eine Zeile ueber dem Kasten haengt. */
.scan-felder .field.scan-abwurf input {
    border-color: var(--primary);
    background: var(--primary-light);
}

.scan-felder .field.scan-abwurf label {
    color: var(--primary-dark);
}

/* Ein zweiter Fund, der im Hilfetext unter dem Feld steht. */
.zahl-knopf-inline {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
}

/* Der Hinweis in der Antragsliste, dass zu diesem Antrag das eingegangene
   Schreiben vorliegt. Klein und neben dem Namen: er beantwortet eine Frage
   ("gibt es den Beleg?"), er ist nicht die Hauptsache der Zeile. */
.antrag-beleg {
    display: inline-block;
    margin-left: 8px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-decoration: none;
    vertical-align: middle;
}

.antrag-beleg:hover,
.antrag-beleg:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
}

/* Das Papier, das der letzte Klick erzeugt hat. Eine Meldung oben verschwindet
   beim naechsten Klick; diese Zeile bleibt stehen und beantwortet die Frage
   "ist jetzt etwas passiert?" dort, wo die Antwort liegt. */
.zeile-neu > td {
    background: var(--primary-light);
}

.zeile-neu > td:first-child {
    box-shadow: inset 3px 0 0 var(--primary);
}

/* Die Nachfrage vor einer Handlung, die etwas erzeugt oder loescht. Ein
   <dialog> statt window.confirm: der Browser kann es nicht abschalten, es
   traegt die Schrift der Anwendung, und der Text darf mehrzeilig sein. */
.nachfrage {
    max-width: 32rem;
    border: 0;
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 8px 30px rgb(0 0 0 / 25%);
    color: var(--text);
}

.nachfrage::backdrop {
    background: rgb(28 43 58 / 45%);
}

.nachfrage-frage {
    margin: 0 0 0.5rem;
    font-weight: 700;
    font-size: 1.05rem;
}

.nachfrage-erklaerung {
    margin: 0 0 1rem;
    color: var(--text-muted);
}

.nachfrage-knoepfe {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Die gewuenschte Besonderheit unter dem Fahrzeug der Antragsliste — Diesel,
   Elektro, Automatik. Klein: sie ist eine Bedingung, nicht die Hauptsache. */
.antrag-besonderheit {
    display: block;
    margin-top: 2px;
    font-size: .78rem;
    color: var(--text-muted);
}

/* Beschriftung und Feld einer Filterzeile gehören zusammen und brechen
   zusammen um. Als getrennte Elemente einer umbrechenden Zeile durfte der
   Umbruch zwischen sie fallen — "Landkreis" stand dann am Ende der einen
   Zeile und sein Auswahlfeld am Anfang der nächsten. */
.filterpaar {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* Das Auswahlfeld nimmt die Breite seines längsten Eintrags, aber nicht
   mehr als nötig: "Regionalverband Saarbrücken" soll die Zeile nicht
   allein füllen. */
.filterzeile-paare select {
    width: auto;
    max-width: 11rem;
}

/* --- Angeheftete erste Spalte ------------------------------------------
   Die breiten Listen rollen waagerecht. Rollt man zur Laufzeit und zur Rate,
   war das Kennzeichen aus dem Bild — man liest dann Zahlen, ohne zu wissen,
   zu wem sie gehören. Die erste Spalte bleibt deshalb stehen.

   Der Hintergrund muss undurchsichtig sein, sonst scheinen die wegrollenden
   Zellen durch; die Kante rechts zeigt, dass die Spalte steht. Nur dort, wo
   die erste Spalte die Zeile benennt — bei einer Zahlenspalte wäre sie
   sinnlos. */
.sf-fahrzeuge th:first-child,
.sf-fahrzeuge td:first-child,
.sf-antraege th:first-child,
.sf-antraege td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--white);
    box-shadow: 1px 0 0 var(--border);
}

.sf-fahrzeuge thead th:first-child,
.sf-antraege thead th:first-child {
    z-index: 2;
    background: #f8fafc;
}