/* ==========================================================================
   App-Komponenten. Nutzt ausschliesslich Tokens aus drk-tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-300);
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3 { font-family: var(--font-head); line-height: 1.2; color: var(--color-heading); }
h1 { font-size: var(--fs-700); font-weight: 900; margin: 0 0 var(--space-2); }
h2 { font-size: var(--fs-500); font-weight: 700; margin: 0 0 var(--space-3); }
h3 { font-size: var(--fs-400); font-weight: 700; }
p  { margin: 0 0 var(--space-3); }

a { color: var(--drk-red-dark); text-underline-offset: 2px; }
a:hover { color: var(--drk-red); }

.muted { color: var(--color-text-muted); }
.mono, code.mono, .mono code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.9em; }

/* -- Fokus (Barrierefreiheit) -------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--drk-white); color: var(--drk-red-dark);
    padding: var(--space-2) var(--space-3); z-index: 100;
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

/* -- Header / Footer ----------------------------------------------------- */
.app-header {
    background: var(--color-surface);
    border-bottom: 4px solid var(--drk-red);
    box-shadow: var(--shadow-sm);
}
.app-header__inner, .app-footer__inner {
    max-width: var(--maxw); margin: 0 auto; padding: var(--space-2) var(--space-4);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    flex-wrap: nowrap;
}
/* Oben buendig, nicht mittig: die Gliederung beginnt auf der Hoehe der
   Wortmarke im Logo. Bei zwei Zeilen stand der Block sonst mittig neben dem
   Logo und sprang gegenueber der dreizeiligen Fassung um. */
.brand { display: inline-flex; align-items: flex-start; gap: var(--space-2); text-decoration: none; min-width: 0; }
.brand__logo { display: block; height: 34px; width: auto; flex: 0 0 auto; }
.brand__sep { width: 1px; align-self: stretch; min-height: 30px; background: var(--gray-300); margin: 0 2px; flex: 0 0 auto; }
.brand__org { display: flex; flex-direction: column; min-width: 0; }
.brand__org--top { justify-content: flex-start; }
.brand__org--center { align-self: stretch; justify-content: center; }
/* Die Gliederungsbezeichnung neben dem Logo steht nach dem DRK-Styleguide
   nicht fett und kleiner als die Wortmarke: das Logo fuehrt, der Name
   begleitet es. Nachgemessen an einem Bildschirmfoto der Kopfzeile: die
   Wortmarke steht auf drei Zeilen zu 11,3 px und hat rund 8 px Versalhoehe.
   Dieselbe Versalhoehe hat der Name bei 11 px Schriftgroesse. Mit 13 px
   Zeilenabstand passen Gliederung und Dienst/Fachbereich zusammen in die
   64 px hohe Kopfzeile: drei Zeilen sind 39 px. */
.brand__ovline { font-family: var(--font-body); font-weight: 400; color: var(--drk-black); font-size: 11px; line-height: 13px; max-width: 280px; }
.brand__ovline--sub { color: var(--gray-700); }
.brand__system { font-family: var(--font-body); font-weight: 600; color: var(--drk-black); font-size: 0.9rem; }

/* App-Shell: schlanke Kopfzeile, darunter Sidebar + Inhalt */
.app-shell { --header-h: 64px; display: flex; flex-direction: column; min-height: 100vh; }
.app-header { position: sticky; top: 0; z-index: 40; }
.app-header__spacer { flex: 1 1 auto; }

/* Menue-Umschalter (nur auf schmalen Screens sichtbar) */
.nav-toggle {
    display: none; flex: 0 0 auto; width: 40px; height: 36px; padding: 0; cursor: pointer;
    background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius);
    align-items: center; justify-content: center;
}
.nav-toggle:hover { border-color: var(--drk-red); }
.nav-toggle__bars { position: relative; display: block; width: 18px; height: 2px; background: var(--drk-black); }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--drk-black); }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/* Benutzerbereich rechts in der Kopfzeile */
.usermenu { display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.usermenu__link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 3px 8px 3px 3px; border-radius: 999px; color: var(--gray-700); }
.usermenu__link:hover { background: var(--gray-100); }
.usermenu__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--drk-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: 0 0 auto; }
.usermenu__name { font-size: 0.85rem; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu__logout {
    font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    color: var(--gray-700); background: transparent; border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 6px 10px; transition: border-color .12s ease, color .12s ease;
}
.usermenu__logout:hover { border-color: var(--drk-red); color: var(--drk-red); }

/* Der eigene Ausweis ist die einzige gefuellte Flaeche in der Kopfzeile. Das
   ist Absicht: im Dienst muss er in einem Griff da sein, und was man unter
   Zeitdruck sucht, darf nicht aussehen wie alles andere. Vorher stand hier ein
   Textlink ganz ohne eigene Gestaltung -- zwischen Avatar und Abmelden war er
   praktisch unsichtbar.

   Mehr als diese eine Flaeche bekommt die Kopfzeile aber nicht; der uebrige
   Stil bleibt, wie er ist. */
.usermenu__ausweis {
    display: inline-flex; align-items: center;
    padding: 5px var(--space-4);
    border-radius: 999px;
    background: var(--drk-red); color: #fff;
    font-size: 0.85rem; font-weight: 700; text-decoration: none;
    white-space: nowrap;
}
.usermenu__ausweis:hover { background: var(--drk-red-dark); color: #fff; }
.usermenu__ausweis:focus-visible { outline: 2px solid var(--drk-black); outline-offset: 2px; }

/* Auf schmalen Geraeten weicht zuerst der Name, nicht der Ausweis -- den Namen
   kennt man, den Ausweis braucht man. */
@media (max-width: 560px) {
    .usermenu__name { display: none; }
}

/* Lichtbild in der Mitgliedsakte */
.akte-kopf { display: flex; align-items: flex-start; gap: var(--space-4); }
.akte-bild {
    flex: 0 0 auto; width: 76px; height: 98px;
    border-radius: var(--radius-sm); border: 1px solid var(--color-border);
    object-fit: cover; background: var(--gray-100, #f2f2f2);
}
.akte-bild--leer {
    display: flex; align-items: center; justify-content: center;
    color: var(--gray-500); font-size: var(--fs-100); text-align: center;
    line-height: 1.2; padding: var(--space-2);
}

/* Rumpf: Sidebar + Inhalt */
.app-body { display: flex; align-items: flex-start; flex: 1 0 auto; width: 100%; max-width: var(--maxw); margin: 0 auto; }
.app-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* Seitennavigation: ruhige Liste, kraeftiger DRK-roter Aktiv-Zustand als Signatur */
.app-sidebar {
    flex: 0 0 236px; width: 236px; align-self: stretch;
    background: var(--color-surface); border-right: 1px solid var(--color-border);
    position: sticky; top: var(--header-h); max-height: calc(100vh - var(--header-h));
    min-height: calc(100vh - var(--header-h)); overflow-y: auto;
    display: flex; flex-direction: column;
}
.sidenav { padding: var(--space-4) var(--space-3) var(--space-6); display: flex; flex-direction: column; flex: 1 0 auto; }
.sidebar-foot {
    margin-top: auto; padding: var(--space-4) 12px;
    border-top: 1px solid var(--gray-200);
    color: var(--color-text-muted); font-size: var(--fs-100);
}
.sidenav__link {
    display: block; text-decoration: none; font-family: var(--font-body); font-size: var(--fs-200);
    font-weight: 600; color: var(--gray-900); padding: 9px 12px; border-radius: var(--radius-sm); line-height: 1.25;
}
.sidenav__link:hover { background: rgba(230, 0, 5, .07); color: var(--drk-red-dark); }
.sidenav__link--home { font-weight: 700; }
.sidenav__link[aria-current="page"] { background: var(--drk-red-dark); color: var(--drk-white); font-weight: 700; }
.sidenav__link[aria-current="page"]:hover { background: var(--drk-red-dark); color: var(--drk-white); }
.sidenav__group { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--gray-200); }
.sidenav__title {
    margin: 0 0 var(--space-2); padding: 0 12px; font-family: var(--font-body);
    font-size: var(--fs-100); font-weight: 700; color: var(--gray-500);
}

/* Overlay-Hintergrund fuer die mobile Navigation */
.nav-backdrop { display: none; }

.inline-form { margin: 0; }

/* Dashboard */
.dash-head { margin-bottom: var(--space-5); }
.dash-head h1 { margin-bottom: 2px; }
.dash-sub { color: var(--color-text-muted); font-size: var(--fs-200); margin: 0; }

/* Kennzahlen stehen als Reihe in einem Kasten, nicht als Raster aus lauter
   Einzelkarten. Vorher bekam jede Zahl eine eigene Karte mit eigenem Rahmen und
   eigenem Innenabstand; auf einer Seite mit fuenf Zahlen ging dadurch mehr
   Flaeche fuer Rahmen drauf als fuer Inhalt, und eine Null sah aus wie ein
   Befund. Jetzt teilen sie sich einen Kasten und trennen sich durch eine Linie. */
.dash-stats, .stat-reihe {
    display: flex; flex-wrap: wrap; align-items: stretch;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); margin-bottom: var(--space-4); overflow: hidden;
}
.dash-stats > .stat, .stat-reihe > .stat {
    flex: 1 1 150px; min-width: 0;
    padding: var(--space-3) var(--space-4);
    display: flex; flex-direction: column; gap: 2px;
    border-left: 1px solid var(--color-border);
    background: none;
}
.dash-stats > .stat:first-child, .stat-reihe > .stat:first-child { border-left: 0; }
.stat__num {
    font-family: var(--font-head); font-weight: 900; font-size: var(--fs-600);
    line-height: 1.05; color: var(--drk-black); font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--fs-100); font-weight: 600; color: var(--color-text-muted); }

/* Ein Akzent ist eine Aussage, kein Schmuck: rot steht da, wo etwas zu tun ist.
   Deshalb traegt eine Null den Akzent nie -- und wird zusaetzlich zurueckgenommen,
   damit der Blick an den Zahlen haengen bleibt, die etwas bedeuten. */
.stat--accent .stat__num { color: var(--drk-red); }
.stat--warn .stat__num { color: #8a4b10; }
.stat--null .stat__num { color: var(--gray-500); font-weight: 700; }
.stat--null .stat__label { color: var(--gray-500); }

/* Spalten nach Mindestbreite statt im festen Verhaeltnis 2:1. Vorher blieb bei
   einer kurzen linken und einer langen rechten Karte die halbe Seite leer, und
   unter 720 Pixeln klappte alles hart untereinander. */
.dash-cols, .dash-raster {
    display: grid; gap: var(--space-4); align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}
.dash-cols--single { grid-template-columns: 1fr; }

.dash-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.dash-panel + .dash-panel { margin-top: var(--space-4); }
.dash-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--gray-200); }
.dash-panel__title { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-400); color: var(--drk-red); }
.dash-panel__link { font-size: var(--fs-100); font-weight: 600; color: var(--drk-red-dark); text-decoration: none; white-space: nowrap; }
.dash-panel__link:hover { text-decoration: underline; }
.dash-panel__body { padding: var(--space-4) var(--space-5); }
.dash-empty { color: var(--color-text-muted); margin: 0; }

.recent { display: flex; flex-direction: column; }
.recent__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--gray-100); }
.recent__item:first-child { padding-top: 0; }
.recent__item:last-child { border-bottom: 0; padding-bottom: 0; }
.recent__main { min-width: 0; flex: 1 1 auto; }
.recent__title { font-weight: 600; color: var(--drk-black); text-decoration: none; }
.recent__title:hover { color: var(--drk-red); }
.recent__meta { font-size: var(--fs-100); color: var(--color-text-muted); margin-top: 3px; }
.recent__action { flex: 0 0 auto; }

.quick { display: flex; flex-direction: column; gap: var(--space-2); }
.arealist { display: flex; flex-direction: column; }
.arealist a { text-decoration: none; color: var(--gray-900); font-weight: 600; font-size: var(--fs-200); padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
.arealist a:last-child { border-bottom: 0; }
.arealist a:hover { color: var(--drk-red); }



/* Schmale Screens: Kopfzeile schlank, Navigation als eingeblendetes Panel */
@media (max-width: 820px) {
    .nav-toggle { display: inline-flex; }
    .usermenu__name { display: none; }
    .app-body { display: block; }
    .app-sidebar {
        position: fixed; top: var(--header-h); left: 0; bottom: 0; width: 264px; max-height: none;
        transform: translateX(-100%); transition: transform .18s ease; z-index: 45; box-shadow: var(--shadow-sm);
    }
    body.nav-open .app-sidebar { transform: translateX(0); }
    .nav-backdrop { position: fixed; inset: var(--header-h) 0 0 0; background: rgba(0,0,0,.38); z-index: 44; border: 0; }
    body.nav-open .nav-backdrop { display: block; }
}

.app-main { flex: 1 0 auto; padding: var(--space-6) var(--space-4); }
.app-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); }
.app-footer__inner { color: var(--color-text-muted); font-size: var(--fs-100); }

/* -- Layoutbausteine ----------------------------------------------------- */
.container { max-width: var(--maxw); margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    /* Vorher var(--space-5) ringsum. Bei einer Karte mit drei Zeilen Inhalt war
       der Rand breiter als manche Spalte. */
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-sm);
}
.card__title { border-bottom: 2px solid var(--gray-200); padding-bottom: var(--space-2); }

/* Karten und Spaltenblocke, die unmittelbar aufeinander folgen, brauchen Luft
   dazwischen. Dafuer gab es bisher keine Regel: jede Ansicht half sich selbst,
   und wo das vergessen wurde, lagen die Karten Kante an Kante. */
.card + .card,
.card + .dash-cols,
.card + .dash-raster,
.dash-cols + .card,
.dash-raster + .card,
.dash-cols + .dash-cols,
.dash-raster + .dash-raster,
.dash-cols + .dash-raster,
.dash-raster + .dash-cols { margin-top: var(--space-4); }

/* Nicht aber nebeneinander: in einem Raster sind zwei Karten keine
   aufeinanderfolgenden Bloecke, sondern Spalten. Ihr Abstand kommt aus dem
   gap des Rasters. Ohne diese Ausnahme bekam die rechte Karte zusaetzlich
   einen oberen Abstand und stand um genau diesen Betrag tiefer als die linke. */
.dash-cols > .card + .card,
.dash-raster > .card + .card { margin-top: 0; }

.subhead { margin: var(--space-5) 0 var(--space-2); }

/* -- Auth ---------------------------------------------------------------- */
.auth-wrap { min-height: 60vh; display: grid; place-items: center; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card__title { margin-bottom: 0; }

/* -- Formulare ----------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-weight: 600; font-size: var(--fs-200); }
.field--check { flex-direction: row; align-items: flex-start; gap: var(--space-3); }
.field--check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--drk-red); }

.input {
    font: inherit; color: var(--color-text);
    background: var(--drk-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3);
    width: 100%;
}
.input:focus-visible { border-color: var(--color-focus); }
.input--code { letter-spacing: .25em; text-align: center; font-size: var(--fs-500); }

select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gray-500) 50%), linear-gradient(135deg, var(--gray-500) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }

/* -- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    font: inherit; font-weight: 700; cursor: pointer;
    border: 2px solid transparent; border-radius: var(--radius);
    padding: var(--space-3) var(--space-5);
    text-decoration: none; transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn--primary { background: var(--drk-red); color: var(--drk-white); }
.btn--primary:hover { background: var(--drk-red-dark); color: var(--drk-white); }
.btn--ghost { background: transparent; color: var(--drk-red-dark); border-color: var(--color-border); }
.btn--ghost:hover { border-color: var(--drk-red); color: var(--drk-red); }
.btn--danger { background: transparent; color: var(--color-error-fg); border-color: #e3bcbc; }
.btn--danger:hover { background: var(--color-error-fg); color: #fff; border-color: var(--color-error-fg); }
.btn--block { width: 100%; }
.btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--fs-200); }

/* -- Alerts -------------------------------------------------------------- */
.alert { border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; border: 1px solid transparent; }
.alert--error { background: var(--color-error-bg); color: var(--color-error-fg); border-color: #f3c0c0; }
.alert--info  { background: var(--color-info-bg); color: var(--color-info-fg); border-color: #c7d8ec; }
/* Die Erfolgsmeldung wurde in sechs Ansichten benutzt, ohne je eine Regel zu
   haben -- sie sah dadurch aus wie ein neutraler Kasten. Gruen, aber das
   gedeckte Gruen der Tokens, nicht das Signalgruen eines Ampelsymbols. */
.alert--ok    { background: #eef6ee; color: #1d4d26; border-color: #c2ddc6; }

/* -- Tabellen ------------------------------------------------------------ */
.table { width: 100%; border-collapse: collapse; margin: var(--space-2) 0; }
.table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--gray-200); }
.table td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* -- Definitionsliste / Checkliste --------------------------------------- */
.deflist { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.deflist dt { color: var(--color-text-muted); }
.deflist dd { margin: 0; }

.checklist { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.checklist li { position: relative; padding-left: 28px; color: var(--gray-700); }
.checklist li::before {
    content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
    border: 2px solid var(--gray-300); border-radius: 4px;
}
.checklist li.is-done { color: var(--gray-900); }
.checklist li.is-done::before { background: var(--drk-red); border-color: var(--drk-red); }
.checklist li.is-done::after {
    content: ""; position: absolute; left: 5px; top: 5px; width: 5px; height: 9px;
    border: solid var(--drk-white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* -- Ergebnis-Score ------------------------------------------------------ */
.result-score { text-align: center; padding: var(--space-4) 0 var(--space-2); }
.result-score__value { font-family: var(--font-head); font-weight: 900; font-size: 3rem; color: var(--drk-red); line-height: 1; }
.result-score__label { color: var(--color-text-muted); font-size: var(--fs-200); }

/* -- Konzeptliste (Startbildschirm) ------------------------------------- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
    text-align: left; font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .04em;
    color: var(--gray-500); border-bottom: 2px solid var(--gray-200); padding: var(--space-2) var(--space-3);
}
.data-table tbody td { padding: var(--space-3); border-bottom: 1px solid var(--gray-200); vertical-align: top; }
.data-table tbody tr:hover { background: var(--gray-050); }
.cell-title { font-weight: 700; }
.cell-sub { color: var(--gray-500); font-size: var(--fs-100); }
.row-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
/* In einer Tabellenzelle bleiben die Schaltflaechen nebeneinander. Umbrechen
   zieht die Zeile in die Hoehe; fuer die Breite sorgt .table-scroll. */
td.row-actions { flex-wrap: nowrap; align-items: center; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-100); font-weight: 700; white-space: nowrap; }
.badge--entwurf       { background: var(--drk-blue-light); color: var(--drk-blue-dark); }
.badge--abgeschlossen { background: #e7f4ea; color: #1e6b34; }
.badge--eigenes       { background: var(--gray-100); color: var(--gray-700); }
.badge--freigegeben   { background: #fdece0; color: #8a4b10; }
.badge--ortsverein    { background: var(--gray-100); color: var(--gray-700); }

.empty-state { text-align: center; padding: var(--space-8) var(--space-4); color: var(--gray-500); }
.empty-state h2 { color: var(--gray-700); }

.account-strip { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; color: var(--gray-700); font-size: var(--fs-200); }
.account-strip .mono { color: var(--gray-900); }

/* -- Einsatzart-Auswahl -------------------------------------------------- */
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.art-form { margin: 0; }
.art-card {
    display: flex; flex-direction: column; gap: var(--space-2); text-align: left; width: 100%; height: 100%;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-4); cursor: pointer; font: inherit; transition: border-color .12s ease, box-shadow .12s ease;
}
.art-card:hover { border-color: var(--drk-red); box-shadow: var(--shadow-sm); }
.art-card__title { font-family: var(--font-head); font-weight: 700; color: var(--drk-red); font-size: var(--fs-400); }
.art-card__desc { color: var(--gray-700); font-size: var(--fs-200); }

/* -- Editor -------------------------------------------------------------- */
.container--narrow { max-width: 820px; }
.fset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4) var(--space-5) var(--space-5); margin: 0; }
.fset__legend { font-family: var(--font-head); font-weight: 700; color: var(--drk-red); padding: 0 var(--space-2); }
.fset .field { margin-top: var(--space-4); }
/* Unterkapitel des Konzept-Editors. Sie stehen im uebergeordneten Kapitel und
   heben sich nur durch Einzug und einen ruhigeren Rahmen ab, damit die
   Gliederung sichtbar bleibt, ohne wie ein Kasten im Kasten zu wirken. */
.fset--stufe2, .fset--stufe3 {
    margin-top: var(--space-5);
    border-color: var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--gray-050);
}
.fset--stufe3 { background: #fff; }
.fset--stufe2 > .fset__legend, .fset--stufe3 > .fset__legend {
    font-size: var(--fs-200); color: var(--gray-900);
}
.fset__nr { color: var(--drk-red); font-variant-numeric: tabular-nums; }
.field__error { color: var(--color-error-fg); font-size: var(--fs-100); }
.row-actions--left { justify-content: flex-start; }

/* Filterzeile ueber einer Tabelle: Feld, Haken und Schaltflaeche in einer
   Linie, auf schmalen Geraeten untereinander. */
.filterzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }
.filterzeile .input { width: auto; }
.filterzeile label { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.finalize-box { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
    border: 1px dashed var(--color-border); border-radius: var(--radius); padding: var(--space-4); }

@media (max-width: 560px) {
    h1 { font-size: var(--fs-600); }
    .deflist { grid-template-columns: 1fr; gap: var(--space-1); }
    .deflist dt { margin-top: var(--space-2); }
}

/* ===== Finanzmodul ===== */
/* Formularraster */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }
.fset .grid-2, .fset .grid-3 { margin-top: var(--space-4); }

/* Das Einheitenformular blendet die Bloecke aus, die zur gewaehlten Art nicht
   passen. Das Attribut hidden allein genuegt dafuer nicht: .fset setzt oben
   eigene Eigenschaften, und ein Browser mit display-Vorgabe fuer fieldset
   zeigte den Block trotz hidden weiter. Darum hier ausdruecklich -- und mit
   !important, weil jede Regel mit Klassenselektor sonst gewinnt. */
.fset[hidden], [data-wenn-mp][hidden] { display: none !important; }
.grid-2 .field, .grid-3 .field { margin-top: 0; }
@media (max-width: 560px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Zahlenspalten in Tabellen */
.data-table th.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Filterleiste (Jahr) */
.filterbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.filterbar .input { width: auto; }

/* Hinweisbox */
.hinweis { padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--gray-050); margin-bottom: var(--space-4); }
.hinweis--fehler { border-color: #e3bcbc; background: #fbeaea; color: var(--color-error-fg); }

/* Kassenbuchzeilen: verblasst (genehmigt/geplant) und storniert */
.kassenbuch .row--offen td { opacity: .5; }
.row--storno td { text-decoration: line-through; color: var(--gray-500); }
.kassenbuch__hinweis { margin-top: var(--space-3); }

/* Katalogauswahl (shop-artig) */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.shop-item { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--color-surface); display: flex; flex-direction: column; gap: 6px; }
.shop-item__name { font-weight: 700; color: var(--drk-black); }
.shop-item__meta { font-size: var(--fs-100); color: var(--color-text-muted); }
.shop-item__qty { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: 4px; font-size: var(--fs-100); font-weight: 600; }
.shop-item__qty .input { width: 88px; }

/* Antragskopf */
.antrag-kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-3); }
.antrag-kopf__label { display: block; font-size: var(--fs-100); color: var(--color-text-muted); }
.antrag-kopf__wert { display: block; font-weight: 700; font-size: var(--fs-400); color: var(--drk-black); font-variant-numeric: tabular-nums; }
.antrag-begruendung { margin: var(--space-3) 0 0; }

/* Positionsliste */
.poslist { display: flex; flex-direction: column; }
.pos { display: flex; gap: var(--space-4); align-items: flex-start; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--gray-100); }
.pos:last-child { border-bottom: 0; }
.pos__main { min-width: 0; flex: 1 1 auto; }
.pos__head { display: flex; align-items: center; gap: var(--space-3); }
.pos__name { font-weight: 600; color: var(--drk-black); }
.pos--abgelehnt .pos__name { text-decoration: line-through; color: var(--gray-500); }
.pos__meta { font-size: var(--fs-200); color: var(--gray-700); margin-top: 3px; font-variant-numeric: tabular-nums; }
.pos__grund { font-size: var(--fs-100); color: var(--color-error-fg); margin-top: 3px; }
.pos__actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; align-items: flex-start; }

/* Aufklapp-Werkzeuge (Ablehnen/Anpassen/Hinzufuegen) */
.pos__tool { position: relative; }
.pos__tool > summary { list-style: none; cursor: pointer; }
.pos__tool > summary::-webkit-details-marker { display: none; }
.pos__form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); align-items: center; }
.pos__form .input { width: auto; flex: 1 1 120px; }
.pos__tool--add { margin-top: var(--space-4); }
.pos__addform { margin-top: var(--space-3); }

/* Druckansicht Kassenbuch */
.druck-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.druck-fuss { margin-top: var(--space-4); }
.druck-unterschrift { display: flex; gap: var(--space-8); margin-top: var(--space-8); }
.druck-unterschrift div { flex: 1; border-top: 1px solid var(--gray-500); padding-top: 4px; font-size: var(--fs-100); color: var(--gray-700); }

/* Protokolltabelle etwas kompakter */
.log-table td { font-size: var(--fs-100); }

/* ---- Dashboard-Kacheln (Startseite) ------------------------------------ */
.dash-grid {
    display: grid;
    /* Schmalere Spalten und engere Fugen: vorher 250 Pixel bei 24 Pixel Abstand,
       wodurch auf der breiten Seite drei Kacheln standen und rechts eine
       Spaltenbreite leer blieb. */
    grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    /* Jede Kachel nur so hoch wie ihr Inhalt. Gleich hohe Kacheln sehen
       ordentlicher aus, aber eine Kachel mit zwei Zahlen wird dann auf die
       Hoehe der Kachel mit vieren gezogen und steht halb leer da. */
    align-items: start;
}
.dash-tile {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    /* Keine Mindesthoehe mehr: eine Kachel ohne Zahlen war vorher genauso hoch
       wie eine mit vieren und stand halb leer da. */
}
.dash-tile__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-2); margin-bottom: var(--space-3);
}
.dash-tile__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-400);
    color: var(--drk-red);
    text-decoration: none;
    min-width: 0;
}
.dash-tile__title:hover { text-decoration: underline; }

/* Die Zahlen einer Kachel stehen in einer Zeile nebeneinander und teilen sich
   den Platz, statt mit grossen Abstaenden umzubrechen. */
.dash-tile__figures {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
}
.dash-figure { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.dash-figure__num {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: var(--fs-500);
    line-height: 1.15;
    color: var(--drk-black);
    font-variant-numeric: tabular-nums;
}
.dash-figure--accent .dash-figure__num { color: var(--drk-red); }

/* Eine Null meldet, dass nichts zu tun ist. Sie bleibt lesbar, draengt sich
   aber nicht vor die Zahlen, die etwas bedeuten. */
.dash-figure--null .dash-figure__num { color: var(--gray-400, #bbb); font-weight: 700; }
.dash-figure--null .dash-figure__label { color: var(--gray-500); }

.dash-figure__label {
    font-size: var(--fs-100);
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1.3;
}
.dash-tile__hint {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-200);
    line-height: 1.4;
    color: var(--color-text-muted);
}
.dash-tile__foot {
    margin-top: auto;
    padding-top: var(--space-3);
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
}
.dash-tile__action {
    font-weight: 600;
    font-size: var(--fs-200);
    color: var(--drk-red);
    text-decoration: none;
}
.dash-tile__action:hover { color: var(--drk-red-dark); text-decoration: underline; }

/* Der Modulstand unten rechts: still, aber immer auffindbar. */
.dash-tile__version {
    font-size: var(--fs-100); color: var(--gray-500); text-decoration: none;
    margin-left: auto;
}
.dash-tile__version:hover { color: var(--drk-red); }

.dash-hinweis { margin: 0 0 var(--space-4); font-size: var(--fs-100); }

/* -- Zeilenaktionen als Icons + horizontal scrollbare Tabellen ---------- */
.table-scroll { overflow-x: auto; }
.btn--icon { padding: 6px; line-height: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn--icon .icon { display: block; width: 18px; height: 18px; }
.row-actions .btn--icon + .btn--icon { margin-left: 0; }

/* -- Kassenbuch: Filter/Suche, Monatsgruppen ---------------------------- */
.kb-filter { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin-bottom: var(--space-4); }
.kb-filter__search { position: relative; flex: 1 1 260px; min-width: 220px; }
.kb-filter__search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--gray-500); pointer-events: none; }
.kb-filter__search .input { padding-left: 34px; width: 100%; }
.kb-filter__item { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-100); color: var(--gray-700); }
.kb-filter__item .input { width: auto; }
tr.kb-month td { background: var(--gray-050); font-weight: 700; color: var(--drk-red-dark); font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .03em; border-top: 2px solid var(--gray-200); }
tr.kb-empty td { text-align: center; padding: var(--space-6) var(--space-4); }

/* -- Belege: Hinweis in Liste + Liste im Formular ----------------------- */
.beleg-flag { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 1px 6px 1px 4px; border-radius: var(--radius-sm); background: var(--gray-100); color: var(--gray-700); font-size: var(--fs-100); vertical-align: middle; }
.beleg-flag .icon { width: 13px; height: 13px; }
.belege__titel { margin: 0 0 var(--space-3); }
.belege__list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: 6px; }
.belege__item { display: flex; align-items: center; gap: 8px; }
.belege__item .icon { width: 16px; height: 16px; color: var(--gray-500); flex: 0 0 auto; }
.belege__upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.belege__upload .input { flex: 1 1 240px; }

/* -- Beschaffungs-Shop: Kategorien-Optionen + Varianten ----------------- */
.shop-list { display: grid; gap: var(--space-3); }
.shop-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--color-surface); }
.shop-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.shop-card__name { font-weight: 600; }
.shop-card__meta { color: var(--color-text-muted); font-size: var(--fs-100); }
.shop-variant { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); padding: var(--space-2) 0; }
.shop-variant + .shop-variant { border-top: 1px dashed var(--gray-200); }
.shop-opt { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-100); color: var(--gray-700); }
.shop-opt > span { font-weight: 500; }
.shop-opt .input { width: auto; min-width: 90px; }
.shop-opt--menge .input { max-width: 90px; }
.shop-opt--frei { flex: 1 1 180px; }
.shop-opt--frei .input { width: 100%; }
.shop-more { margin-top: var(--space-2); }
.shop-more > summary { cursor: pointer; color: var(--drk-red-dark); font-size: var(--fs-100); }
.pos__opts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.pos__opt { display: inline-flex; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--gray-100); color: var(--gray-700); font-size: var(--fs-100); }
.pos__opt--frei { background: var(--color-info-bg); color: var(--color-info-fg); }

/* -- Formularhelfer ----------------------------------------------------- */
/* .field setzt flex-direction: column; fuer nebeneinanderliegende Felder
   muss die Richtung hier ausdruecklich zurueckgesetzt werden. Jede Spalte
   bleibt intern eine Spalte (Label ueber Eingabefeld). */
.field--row { display: flex; flex-direction: row; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.field--row > div { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 160px; min-width: 0; }
/* Schmale Spalte fuer kurze Eingaben wie PLZ oder Prozentsatz. */
.field--row > .col--eng { flex: 0 0 120px; }
.field--row > .col--eng .input { width: 100%; }
@media (max-width: 480px) {
    .field--row > .col--eng { flex: 1 1 100%; }
}
.input--s { max-width: 160px; }
.rg-formpos .input { min-width: 120px; }
.rg-formpos .input--s { min-width: 70px; }

/* -- Moderne Rechnung (Bildschirm-Vorschau; Druck via print.css) -------- */
/* Logo und Informationsblock bilden eine gemeinsame rechte Spalte. Beide
   Spalten sind gleich breit und durch space-between rechtsbuendig, das Logo
   steht darin links. Der Informationsblock wird um die linke Aussenkante des
   senkrechten Kreuzbalkens eingerueckt: das Kreuz ist quadratisch und so hoch
   wie das Logo, sein senkrechter Balken beginnt bei 32,6 Prozent der
   Kreuzbreite. Der Einzug haengt damit nur an der Logohoehe, nicht am
   Zuschnitt der Logodatei. Entspricht der Briefvorlage (Logo ab 147,7 mm,
   Infoblock-Text ab 152,56 mm). */
/* Spaltenbreite = Breite des DRK-Kompaktlogos. Das Kompaktlogo hat ein festes
   Seitenverhaeltnis von 281:89 (Breite:Hoehe); das quadratische Kreuz sitzt
   links, sein senkrechter Balken beginnt bei 29/89 der Hoehe. Logospalte und
   Infoblock teilen sich dieselbe Breite, der Infoblock wird um genau diesen
   Balkenversatz eingerueckt. Dadurch steht der Infoblocktext buendig an der
   linken Aussenkante des unteren Kreuzbalkens, wie in der Briefvorlage. */
/* Briefkopf der Rechnung: Logospalte und Infoblock teilen sich die Breite des
   Kompaktlogos, der Infoblock ist um den Versatz des senkrechten Kreuzbalkens
   eingerueckt. Der Brief ueberschreibt das weiter unten mit den absoluten
   Massen der Vorlage; hier bleibt das bewaehrte Flex-Layout der Rechnung. */
.rg {
    color: #1a1a1a;
    --rg-logo-h: 15mm;
    --rg-spalte: calc(var(--rg-logo-h) * 3.1573);
    --rg-kreuz: calc(var(--rg-logo-h) * 0.32584);
}
.rg__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.rg__abs { font-size: 6pt; color: var(--gray-500); align-self: flex-end; }
.rg__logo-sp { flex: 0 0 var(--rg-spalte); display: flex; justify-content: flex-start; }
.rg__logo { width: var(--rg-spalte); height: auto; }
.rg__adresszeile { display: flex; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-5); }
.rg__empf { line-height: 1.5; }
.rg__empf-name { font-weight: 700; }
.rg__info { flex: 0 0 var(--rg-spalte); padding-left: var(--rg-kreuz); box-sizing: border-box; font-size: 8pt; line-height: 1.45; color: var(--gray-700); overflow-wrap: anywhere; }
.rg__info-stark { font-weight: 700; color: #1a1a1a; font-size: 10pt; line-height: 1.25; }
/* Die Vorlage trennt die Gruppen des Infoblocks durch genau eine Leerzeile
   und setzt die Zeilenhoehe fest auf 10 pt. Beides wird hier nachgebildet:
   eine Leerzeile entspricht damit exakt 10 pt Abstand. */
.rg__info { line-height: 10pt; }
.rg__info-gruppe--weiter { margin-top: 10pt; }
.rg__info-block { margin-top: 10pt; }
/* Bezeichner im Infoblock: fett und schwarz, in normaler Schreibweise. */
.rg__lbl { display: block; font-weight: 700; color: #1a1a1a; font-size: 8pt; }

.rg__ortdatum { margin-top: var(--space-5); color: var(--gray-700); }
.rg__kopfzeile { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-top: var(--space-4); border-bottom: 3px solid var(--drk-red); padding-bottom: var(--space-2); }
.rg__titel { color: var(--drk-red); margin: 0; font-size: 1.9rem; }
.rg__eck { font-size: var(--fs-100); border-collapse: collapse; }
.rg__eck td { padding: 1px 0 1px 12px; text-align: right; }
.rg__eck td:first-child { color: var(--gray-500); }
.rg__betreff { font-weight: 700; margin: var(--space-5) 0 var(--space-2); }
.rg__anrede { margin: 0 0 var(--space-4); }
.rg__pos { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; }
.rg__pos thead th { background: var(--drk-red); color: #fff; text-align: left; padding: 7px 10px; font-size: var(--fs-100); }
.rg__pos thead th.num { text-align: right; }
.rg__pos tbody td { padding: 7px 10px; border-bottom: 1px solid var(--gray-200); vertical-align: top; }
.rg__pos-nr { width: 42px; color: var(--gray-500); }
.rg__pos .num { text-align: right; white-space: nowrap; }
.rg__summe { display: flex; justify-content: flex-end; margin-top: var(--space-3); }
.rg__summe table { border-collapse: collapse; min-width: 280px; }
.rg__summe td { padding: 4px 10px; }
.rg__summe td.num { text-align: right; white-space: nowrap; }
.rg__summe-total td { border-top: 2px solid var(--drk-red); font-weight: 700; font-size: 1.1rem; color: var(--drk-red-dark); padding-top: 8px; }
.rg__hinweis { margin: var(--space-2) 0; }
.rg__zahlung { margin-top: var(--space-5); }
.rg__bank { border-collapse: collapse; font-size: var(--fs-100); margin-top: 4px; }
.rg__bank td { padding: 2px 16px 2px 0; }
.rg__schluss { margin-top: var(--space-4); }
.rg__gruss { margin-top: var(--space-5); }
.rg__gruss-name { font-weight: 700; margin: var(--space-4) 0 0; }

/* ==========================================================================
   Lagekarte: Karteneditor
   ========================================================================== */

.container--weit { max-width: 1600px; }
.card__titel { margin: 0 0 var(--space-3); font-size: 1.1rem; }
.hinweis--info { border-color: #b9d4e8; background: #eef5fa; }
.hinweis--warnung { border-color: #e8d4a8; background: #fdf6e7; }

.lk { display: flex; flex-direction: column; gap: var(--space-3); }

/* -- Werkzeugleiste ------------------------------------------------------- */
.lk__leiste {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
    padding: var(--space-3); border: 1px solid var(--color-border);
    border-radius: var(--radius); background: var(--gray-050);
}
.lk__werkzeuge { display: flex; flex-wrap: wrap; gap: 4px; }
.lk__wz {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; cursor: pointer;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: #fff; color: var(--gray-700);
}
.lk__wz:hover:not(:disabled) { border-color: var(--drk-red); color: var(--drk-red); }
.lk__wz.is-aktiv { background: var(--drk-red); border-color: var(--drk-red); color: #fff; }
.lk__wz:disabled { opacity: .4; cursor: not-allowed; }

.lk__stil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.lk__stil-feld { display: flex; align-items: center; gap: 6px; font-size: var(--fs-100); }
.lk__stil-text { color: var(--gray-700); }
.lk__stil-feld input[type="color"] {
    width: 34px; height: 30px; padding: 0; cursor: pointer;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: none;
}
.lk__stil-feld input[type="range"] { width: 90px; }

.lk__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }

/* -- Positionierung ------------------------------------------------------- */
.lk__position {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-4); padding: var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius);
}
.lk__suche-zeile, .lk__koord-zeile { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.lk__suche-zeile .input { flex: 1 1 220px; }
.lk__hinweis { margin: var(--space-2) 0 0; font-size: var(--fs-100); }

.lk__treffer { list-style: none; margin: var(--space-2) 0 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.lk__treffer li + li { border-top: 1px solid var(--color-border); }
.lk__treffer-knopf {
    display: block; width: 100%; padding: 8px 10px; cursor: pointer;
    border: 0; background: none; text-align: left; font-size: var(--fs-100); color: var(--gray-900);
}
.lk__treffer-knopf:hover { background: var(--gray-100); }

/* -- Buehne: Legende, Karte, Eigenschaften -------------------------------- */
/* min-width: 0 verhindert, dass ein Rasterfeld von seinem Inhalt
   aufgeblaeht wird und die Flaeche ueberlaeuft. */
.lk__buehne { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.lk__buehne > * { min-width: 0; }
.lk__buehne:has(.lk__eigenschaften:not([hidden])) { grid-template-columns: 290px minmax(0, 1fr) 260px; }

.lk__legende {
    padding: var(--space-3); border: 1px solid var(--color-border);
    border-radius: var(--radius); background: #fff;
    max-height: 78vh; overflow-y: auto; overflow-x: hidden;
    box-sizing: border-box;
}
.lk__legende-titel { margin: 0; font-size: 1rem; }
.lk__legende-kopf { margin-bottom: var(--space-3); }
.lk__legende-kopf .muted { font-size: var(--fs-100); margin: 4px 0 0; }

.lk__favoriten {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px; margin-bottom: var(--space-3);
}
.lk__zeichen {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px 4px; cursor: grab; text-align: center; min-width: 0;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff;
}
/* Die Zeichen sind unterschiedlich breit und hoch. Ein fester Rahmen mit
   object-fit haelt die Kachelhoehe gleich, ohne ein Zeichen zu verzerren. */
.lk__zeichen svg,
.lk__zeichen-bild { flex: 0 0 auto; width: 100%; height: 48px; object-fit: contain; }
.lk__zeichen:hover { border-color: var(--drk-red); }
.lk__zeichen.is-aktiv { border-color: var(--drk-red); box-shadow: 0 0 0 2px rgba(230, 0, 5, .15); }
.lk__zeichen.is-versteckt { display: none; }
/* Lange Bezeichnungen wie "Krankentransportwagen" muessen umbrechen
   statt die Spalte zu sprengen. Mehr als drei Zeilen braucht die Legende
   nicht; der vollstaendige Text steht im title-Attribut. */
.lk__zeichen-text {
    font-size: 10px; line-height: 1.2; color: var(--gray-700);
    width: 100%; overflow-wrap: anywhere; hyphens: auto;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -- Mitglieder ------------------------------------------------------------ */
/* Beschreibungsliste als zweispaltige Paare; auf schmalen Geraeten
   untereinander, damit nichts abgeschnitten wird. */
.dl-paare {
    display: grid; grid-template-columns: 11rem minmax(0, 1fr);
    gap: 6px var(--space-3); margin: 0;
}
.dl-paare dt { font-weight: 600; color: var(--gray-700); }
.dl-paare dd { margin: 0; }
@media (max-width: 640px) {
    .dl-paare { grid-template-columns: 1fr; gap: 2px; }
    .dl-paare dd { margin-bottom: var(--space-2); }
}

.liste-schlicht { list-style: none; margin: 0; padding: 0; }
.liste-schlicht li {
    display: flex; justify-content: space-between; gap: var(--space-3);
    padding: 6px 0; border-bottom: 1px solid var(--color-border);
}
.liste-schlicht li:last-child { border-bottom: 0; }

.kennung {
    display: inline-block; padding: 4px 8px; border-radius: var(--radius-sm);
    background: var(--gray-100); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1rem; letter-spacing: .08em;
}

.klassen-gitter {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 4px;
}
.klassen-feld {
    display: flex; align-items: center; gap: 6px; padding: 4px 6px;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    font-size: var(--fs-100); background: #fff;
}

.zelle-klein { font-size: var(--fs-100); color: var(--gray-700); }
.zeile-still { opacity: .55; }

/* -- Unterschrift ---------------------------------------------------------- */
.us__vorschau {
    display: inline-block; padding: var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    background: #fff; margin-bottom: var(--space-3);
}
.us__bild { display: block; height: 60px; width: auto; max-width: 100%; }

.us__flaeche { position: relative; margin-bottom: var(--space-3); }
.us__canvas {
    display: block; width: 100%; height: auto; aspect-ratio: 1000 / 320;
    border: 1px solid var(--color-border); border-radius: var(--radius);
    background: #fff; cursor: crosshair;
    /* Ohne das scrollt ein Tablet die Seite, statt zu zeichnen. */
    touch-action: none;
}
/* Hilfslinie, damit die Unterschrift nicht schief im Feld steht. */
.us__linie {
    position: absolute; left: 8%; right: 8%; bottom: 22%;
    border-bottom: 1px dashed var(--color-border); pointer-events: none;
}

/* Nur fuer Screenreader sichtbar */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Suchfeld und vollstaendiger Katalog */
.lk__zsuche { display: block; margin-bottom: var(--space-3); }
.lk__zsuche .input { width: 100%; box-sizing: border-box; }

.lk__alle { margin-top: var(--space-3); display: flex; flex-direction: column; gap: 6px; }
.lk__zgruppe {
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--gray-050, #fafafa);
}
.lk__zgruppe > summary {
    cursor: pointer; padding: 6px 8px; font-size: var(--fs-100); font-weight: 600;
    color: var(--gray-800); list-style-position: inside;
}
.lk__zgruppe[open] > summary { border-bottom: 1px solid var(--color-border); }
.lk__zliste {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px; padding: 6px;
}

.lk__quelle {
    margin: var(--space-3) 0 0; font-size: 10px; line-height: 1.3;
    border-top: 1px solid var(--color-border); padding-top: var(--space-2);
}

.lk__karte-huelle { min-width: 0; }
.lk__karte {
    width: 100%; height: 72vh; min-height: 420px;
    border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--gray-100);
}
.lk__karte--zeichnen { cursor: crosshair; }
.lk__status { margin: var(--space-2) 0 0; min-height: 1.2em; font-size: var(--fs-100); }
.lk__status--warnung { color: var(--color-error-fg); }

/* [hidden] setzt display:none, verliert aber gegen eine eigene
   display-Regel. Beide Flaechen blenden sich sonst nie aus. */
.lk__eigenschaften[hidden],
.lk__alle[hidden] { display: none !important; }
.lk__eigenschaften {
    padding: var(--space-3); border: 1px solid var(--color-border);
    border-radius: var(--radius); background: #fff;
    display: flex; flex-direction: column; gap: var(--space-3);
}
.lk__eig-titel { margin: 0; font-size: 1rem; }

/* -- Beschriftungen auf der Karte ----------------------------------------- */
.lk-tip {
    padding: 2px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .9); font-size: 11px; color: var(--gray-900);
}
.lk-text { white-space: nowrap; font-weight: 600; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.lk-zeichen { background: none; border: 0; }
.lk-zeichen img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Leaflet-Bedienelemente nicht ueber die eigene Kopfzeile legen */
.leaflet-container { font: inherit; }
.leaflet-top { z-index: 500; }

@media (max-width: 1100px) {
    .lk__buehne,
    .lk__buehne:has(.lk__eigenschaften:not([hidden])) { grid-template-columns: 1fr; }
    .lk__legende { max-height: none; }
    .lk__favoriten { grid-template-columns: repeat(4, 1fr); }
    .lk__karte { height: 60vh; }
}

/* -- Druck ----------------------------------------------------------------- */
@media print {
    .lk__leiste, .lk__position, .lk__legende, .lk__eigenschaften, .lk__status { display: none !important; }
    .lk__buehne { display: block; }
    .lk__karte { height: auto; border: 0; }
}

/* -- Konzept-Editor: Abschnitte ausserhalb des Formulars ------------------ */
/* Die Feldgruppen im Formular stehen in einem Flex-Stapel und bekommen ihren
   Abstand ueber dessen gap. Deckblatt, Lagekarten und der Knopfblock liegen
   ausserhalb des Formulars und brauchen denselben Abstand ausdruecklich. */
.konzept-extra { margin-top: var(--space-4); }

/* -- Deckblatt im Konzept-Editor ------------------------------------------ */
.deck { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-4); align-items: start; }
.deck__vorschau {
    display: flex; align-items: center; justify-content: center; min-height: 150px; padding: var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--gray-050);
}
.deck__vorschau img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.deck__formulare { display: flex; flex-direction: column; gap: var(--space-4); }

@media (max-width: 760px) {
    .deck { grid-template-columns: 1fr; }
}

/* -- Deckblatt und Lagekarten auf dem Blatt (Anzeige und Druck) ----------- */
/* Bilder auf dem Blatt bekommen eine Hoehengrenze. Ein hochformatiges Bild
   wuerde sonst hoeher als der Satzspiegel und waere im Druck angeschnitten
   oder schoebe den ganzen Abschnitt auf die naechste Seite. Die Grenze wirkt
   als Kasten: object-fit haelt das Seitenverhaeltnis, das Bild passt sich ein
   und wird nicht verzerrt. */
.sheet__deckblatt { margin: 0 0 var(--space-5); }
.sheet__deckblatt img {
    display: block; width: 100%; height: auto;
    max-height: 150mm; object-fit: contain; object-position: left top;
}
/* Dass jede Lagekarte auf einem eigenen Blatt beginnt, steht in print.css:
   der erzwungene Umbruch heisst im Druck anders als im Spaltensatz der
   Seitenvorschau und ist dort je Medium geregelt. */
.sheet__karte { margin: var(--space-3) 0 0; }
/* 225 mm: Satzspiegel einer A4-Seite (265 mm) abzueglich Anlagentitel und
   Bildunterschrift. Damit bleibt jede Lagekarte samt Beschriftung auf ihrem
   Blatt. */
.sheet__karte img {
    display: block; margin: 0 auto; border: 1px solid #ccc;
    width: auto; height: auto; max-width: 100%; max-height: 225mm;
}
.sheet__karte figcaption { margin-top: 4px; font-size: 8pt; color: #666; }

/* ==========================================================================
   Schriftverkehr: Brief nach der DRK-Briefvorlage
   Der Briefkopf kommt aus .rg (siehe Rechnung); hier nur der Briefkoerper.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Briefblatt nach den Massen der DRK-Briefvorlage (aus der .dotx gemessen):

     Seitenraender   links 22,0 | rechts 47,5 | oben 49,5 | unten 14,0 mm
     Fliesstext      22,0 bis 162,5 mm, also 140,5 mm breit
     Infoblock       verankerter Rahmen, Text ab 152,58 mm, 49,93 mm breit
     Logo            links 147,66 | oben 15,03 mm, 47,6 mm breit
     Schriften       Fliesstext 11 pt, Infoblock 8 pt, Gliederung 10 pt fett,
                     Ruecksendezeile 6 pt
     Abstaende       Ort/Datum nach 9,88 | Betreff nach 9,88
                     Gruss vor 9,88, nach 19,76 mm (Raum fuer die Unterschrift)

   Entscheidend: Der Infoblock ist in der Vorlage ein verankerter Rahmen und
   steht damit ausserhalb des Textflusses. Deshalb beginnt der Betreff direkt
   unter dem Anschriftenfeld und nicht unterhalb der rechten Spalte. Hier wird
   er dafuer absolut positioniert. Die Rechnung behaelt ihr bisheriges
   Flex-Layout; diese Regeln greifen nur auf .br.
   -------------------------------------------------------------------------- */

/* Die Masse stehen als Eigenschaften in brief-druck.css, damit Bildschirm,
   Vorschau und @page aus derselben Quelle rechnen. Fehlt dieses Stylesheet
   einmal, greifen die Ersatzwerte aus der Briefvorlage. */
.sheet.br {
    position: relative;
    font-size: 11pt;
}
/* Nur am Bildschirm, und dort nur fuer das durchgehende Blatt ohne Vorschau:
   im Druck kommen die Raender aus @page und dem .sheet-Block in print.css.
   Stuende dieses padding auch im Druck, zaehlte der untere Rand doppelt --
   einmal aus @page, einmal hier --, und die letzte Seite haette unten
   doppelt so viel Luft wie alle anderen. */
@media screen {
    .sheet.br {
        padding:
            var(--rand-oben-erste, 49.5mm) var(--rand-rechts, 47.5mm)
            var(--rand-unten, 14mm) var(--rand-links, 22mm);
    }
}

/* Logo an seiner Position aus der Vorlage, ausserhalb des Flusses. */
.sheet.br .rg__top { display: block; position: static; }
.sheet.br .rg__logo-sp {
    position: absolute; top: 15.03mm; left: 147.66mm;
    width: 47.6mm; display: block; flex: none;
}
.sheet.br .rg__logo { width: 47.6mm; height: auto; }

/* Ruecksendezeile und Anschriftenfeld bleiben im Fluss und haben die festen
   Hoehen der Vorlage: 9 mm und 30 mm. Dadurch beginnt Ort/Datum bei 88,5 mm,
   gerechnet ab dem oberen Rand von 49,5 mm. */
.sheet.br .rg__abs {
    display: block; height: 9mm; margin: 0;
    font-size: 6pt; color: var(--gray-700); align-self: auto;
}

.sheet.br .rg__adresszeile { display: block; margin: 0; }
/* Anschriftenfeld der Vorlage: 78,4 mm breit, 30 mm hoch. */
.sheet.br .rg__empf { width: 78.4mm; min-height: 30mm; line-height: 1.35; }

/* Der Infoblock ist in der Vorlage ein Rahmen mit Umfluss (wrapSquare) ab
   150,02 mm. Der Fliesstext weicht ihm aus; nach der Vorlage blieben ihm
   128 mm statt der vollen 140,5 mm des Textbereichs.

   Daraus ergaben sich nur 2,6 mm Luft bis zur rechten Spalte, und beide
   Bloecke liefen optisch ineinander. 122 mm lassen 8,6 mm Zwischenraum und
   trennen sie sichtbar, ohne den Satzspiegel zu verlassen. Wer es enger oder
   weiter will, aendert diese eine Zahl. */
.sheet.br .rg__ortdatum,
.sheet.br .br__az,
.sheet.br .br__betreff,
.sheet.br .br__anrede,
.sheet.br .br__text,
.sheet.br .br__gruss,
.sheet.br .br__anlagen { max-width: 122mm; }
.sheet.br .rg__info {
    position: absolute;
    top: 48.79mm;
    left: 152.58mm;
    width: 49.93mm;
    flex: none;
    padding-left: 0;
    font-size: 8pt;
    line-height: 10pt;
}
.sheet.br .rg__info-stark { font-size: 10pt; line-height: 12pt; }
/* Die Spalte ist 49,93 mm breit, eine IBAN passt damit auf eine Zeile. Die
   Zeilenhoehe bleibt die des Infoblocks, damit die Bankzeilen im selben
   Raster stehen wie alles andere. */
.sheet.br .rg__kontozeile { font-size: 8pt; line-height: 10pt; white-space: nowrap; }

/* Abstaende des Briefkoerpers, Werte aus den Absatzformaten der Vorlage. */
/* Ort/Datum schliesst unmittelbar an das 30 mm hohe Anschriftenfeld an. */
.sheet.br .rg__ortdatum { margin: 0 0 9.88mm; color: inherit; }
.br__az { margin: -7mm 0 9.88mm; font-size: 9pt; color: var(--gray-700); }
.br__betreff { margin: 0 0 9.88mm; font-size: 11pt; font-weight: 700; color: #1a1a1a; }
.br__anrede { margin: 0 0 11pt; }
/* Blocksatz mit Silbentrennung, wie im Musterbrief des Styleguides. Die
   Trennung besorgt der Browser anhand der Sprache des Dokuments (lang="de"
   am html-Element); ohne sie risse der Blocksatz in der 122 mm schmalen
   Spalte groessere Luecken auf. Chrome, Firefox und Safari auf dem Rechner
   bringen das deutsche Trennmuster mit; fehlt es einmal, bleibt der
   Blocksatz und nur die Trennung entfaellt. */
.br__text {
    line-height: 1.4;
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    /* Nicht nach zwei Buchstaben trennen: mindestens sechs Zeichen im Wort,
       drei davor und drei danach. */
    -webkit-hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-chars: 6 3 3;
}
/* Der Briefkoerper steht in echten Absaetzen, damit orphans und widows
   wirken koennen. Der Abstand zwischen ihnen ist genau eine Leerzeile, also
   so viel, wie zuvor die doppelte Zeilenschaltung ergab. */
.br__text p { margin: 0 0 1.4em; }
.br__text p:last-child { margin-bottom: 0; }
.br__gruss { margin-top: 9.88mm; }
.br__gruss p { margin: 0; }
/* 19,76 mm nach der Grussformel: Raum fuer die handschriftliche Unterschrift. */
.br__unterzeichner { margin-top: 19.76mm !important; font-weight: 400; }

/* Die Briefvorlage laesst zwischen Grussformel und Name 19,76 mm Raum fuer
   die Unterschrift. Ist eine hinterlegt, fuellt sie genau diesen Raum:
   3,8 mm Abstand plus 16 mm Bildhoehe. Der Name rueckt dann nicht noch
   einmal nach unten. */
.br__sig {
    display: block; height: 16mm; width: auto; max-width: 70mm;
    margin: 3.76mm 0 0; object-fit: contain; object-position: left bottom;
}
.br__gruss--sig .br__unterzeichner { margin-top: 0 !important; }
.br__funktion { color: inherit; }
.br__anlagen { margin-top: 9.88mm; font-size: 9pt; }
.br__anlagen-titel { margin: 0 0 2px; font-weight: 700; }
.br__anlagen ul { margin: 0; padding-left: 1.2em; }

/* -- Umbruch ---------------------------------------------------------------
   Bewusst ausserhalb von @media print: diese Eigenschaften wirken nur dort,
   wo ueberhaupt umbrochen wird, also im Druck und im mehrspaltigen Satz der
   Seitenvorschau. Stuenden sie nur im Druckblock, braeche die Vorschau anders
   um als das Papier. */
/* Der Briefkoerper darf ueber mehrere Seiten laufen. Betreff und Anrede
   sollen nicht allein am Seitenende stehen bleiben. */
.br__betreff, .br__anrede { break-after: avoid; page-break-after: avoid; }
.br__gruss { break-inside: avoid; page-break-inside: avoid; }
.br__text { orphans: 2; widows: 2; }

/* -- Druckoptionen ueber der Seitenvorschau -------------------------------- */
.druckoptionen { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.druckoption {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-100); color: var(--gray-700);
}

/* -- Kopfzeile innerhalb einer Karte: schmalerer Abstand als am Seitenkopf -- */
.page-head--eng { margin-bottom: var(--space-4); }
.page-head--eng .card__titel { margin: 0; }

/* -- Platzhalterliste im Schriftverkehr ----------------------------------- */
.platzhalter { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-4); margin: 0; }
.platzhalter dt { margin: 0; }
.platzhalter dt code { font-size: var(--fs-100); background: var(--gray-100); padding: 1px 6px; border-radius: var(--radius-sm); }
.platzhalter dd { margin: 0; color: var(--gray-700); font-size: var(--fs-100); }

/* Wert, der nicht eingegeben, sondern aus vorhandenen Daten abgeleitet wird. */
.feld-abgeleitet { margin: 0; padding: 7px 10px; border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm); background: var(--gray-050); color: var(--gray-900); }

/* ==========================================================================
   Material und Lager
   ========================================================================== */

/* Ein Lagerort kann tief verschachtelt sein. Statt einer eigenen Spalte je
   Ebene bekommt die Zeile einen Einzug nach ihrer Tiefe; die Tabelle bleibt
   damit auf dem Tablet lesbar und laesst sich sortieren wie jede andere. */
.baum-stufe { display: inline-block; width: calc(var(--stufe, 0) * 16px); }

.bestand-gesamt {
    font-family: var(--font-head); font-weight: 900;
    font-size: var(--fs-500); color: var(--drk-red); white-space: nowrap;
}

/* Vorzeichen in Buchungslisten: Zugang und Abgang auf einen Blick. */
.plus  { color: #1e6b34; }
.minus { color: var(--color-error-fg); }

.zeile--still td { color: var(--gray-500); }
.zeile--warn td  { background: #fdf4ec; }

.stat--warn .stat__num { color: #8a4b10; }
.badge--ok   { background: #e7f4ea; color: #1e6b34; }
.badge--warn { background: #fdece0; color: #8a4b10; }

.dash-stats--klein { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: var(--space-4); }

.filterleiste { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
.filterleiste .field { flex: 1 1 220px; margin: 0; }
.filterleiste .field:last-child { flex: 0 0 auto; }

.liste-schlicht__wert {
    flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700;
}
.liste-schlicht__text { flex: 1 1 auto; }

/* -- Mengenwahl beim Buchen -----------------------------------------------
   Die Knoepfe haengt /assets/js/app.js an das Zahlenfeld. Sie sind gross
   genug fuer einen Finger: im Lager wird mit dem Tablet gebucht, nicht mit
   der Maus. */
.input--zahl { max-width: 160px; font-size: 1.25rem; text-align: center; }

.mengen-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--space-3); }
.mengen-knopf {
    min-width: 44px; min-height: 40px; padding: 0 10px; cursor: pointer;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: #fff; color: var(--drk-black);
    font-family: var(--font-body); font-size: var(--fs-200); font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mengen-knopf:hover { border-color: var(--drk-red); color: var(--drk-red); }
.mengen-knopf--rund {
    width: 44px; border-radius: 999px; font-size: 1.3rem; line-height: 1;
    background: var(--gray-050);
}
.mengen-knopf--minus { color: var(--color-error-fg); }
.mengen-knopf--plus  { color: #1e6b34; }

@media (max-width: 560px) {
    .filterleiste .field { flex: 1 1 100%; }
}

/* -- Haltbarkeit ----------------------------------------------------------
   Vier Zustaende, vier Farben: abgelaufen rot, in den naechsten 30 Tagen
   faellig orange, in 90 Tagen faellig gelb, darueber gruen. Ohne Datum
   bleibt es grau -- das ist kein Mangel, sondern eine Angabe, die es nicht
   gibt. */
.badge--mhd-abgelaufen { background: #fbe3e3; color: #a51e0f; }
.badge--mhd-kritisch   { background: #fdece0; color: #8a4b10; }
.badge--mhd-bald       { background: #fdf6e0; color: #7a5c10; }
.badge--mhd-gueltig    { background: #e7f4ea; color: #1e6b34; }
.badge--mhd-ohne       { background: var(--gray-100); color: var(--gray-700); }

/* Zwischenueberschrift innerhalb einer Karte: unter dem Kartentitel, aber
   ueber dem Fliesstext. */
.subhead {
    margin: var(--space-5) 0 var(--space-2);
    font-family: var(--font-body); font-weight: 700; font-size: 1rem;
    color: var(--drk-black);
}

/* Spalte zum Abhaken auf der gedruckten Liste. */
.druck-haken { width: 18mm; }
@media print { .druck-haken { border-bottom: .2mm solid #999; } }


/* ---------------------------------------------------------------------------
   Einsaetze und Dienste
--------------------------------------------------------------------------- */

/* Das Scanfeld fuer die Mitgliedsnummer. Gross, weil es im Dienst mit
   Handschuhen und in schlechtem Licht getroffen werden muss, und weil ein
   Handscanner hineinschreibt, ohne dass jemand zielt. */
.input--gross {
    font-size: var(--fs-600);
    padding: var(--space-3) var(--space-4);
    letter-spacing: .08em;
}

/* Umgekehrt: ein Feld, das in einer Tabellenzeile mitlaeuft und die Zeile
   nicht sprengen darf. */
.input--klein {
    font-size: var(--fs-300);
    padding: var(--space-1) var(--space-2);
    max-width: 260px;
}

/* Ein Formular, das als eine Zeile neben dem Text steht: Feld und Knopf
   nebeneinander, umbrechend, wenn der Platz nicht reicht. */
.reihe-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: 0;
}

/* Eine Planstelle. Die Fahrzeugstelle und ihre Besatzung gehoeren sichtbar
   zusammen -- deshalb die Gruppe mit eigenem Rahmen und eingerueckten
   Kindern. Faellt das Fahrzeug aus, sieht man sofort, was mit ihm faellt. */
.planstelle-gruppe {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-4);
}

.planstelle-gruppe__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-2);
}

.planstelle__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.planstelle__zahl {
    font-variant-numeric: tabular-nums;
    color: var(--gray-700);
    white-space: nowrap;
}

.planstelle__fuss {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-border);
}

/* Eine gedraengte Liste fuer Nebensaechliches -- Hinweise unter einer
   Planstelle etwa, die den Blick nicht vom Wesentlichen ziehen sollen. */
.liste-schlicht--eng li {
    padding: var(--space-1) 0;
    border-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Bewegung

   Zurueckhaltend und fast immer als Antwort auf eine Handlung: etwas wird
   angefasst, aufgeklappt, verschoben, bestaetigt. Keine Einblendungen beim
   Laden -- die sagen nichts und halten nur auf.

   Alles laeuft ueber eine gemeinsame Dauer, damit die Oberflaeche sich wie ein
   Stueck anfuehlt und nicht wie fuenf verschiedene Bausteine.
--------------------------------------------------------------------------- */
:root {
    --zeit-kurz: 120ms;
    --zeit-mittel: 200ms;
    --kurve: cubic-bezier(.2, .7, .3, 1);
}

.btn, .sidenav__link, .badge, .input, .stat, .version-chip,
.liste-schlicht li, .data-table tbody tr {
    transition:
        background-color var(--zeit-kurz) var(--kurve),
        border-color     var(--zeit-kurz) var(--kurve),
        color            var(--zeit-kurz) var(--kurve),
        box-shadow       var(--zeit-kurz) var(--kurve),
        transform        var(--zeit-kurz) var(--kurve);
}

/* Ein Knopf, der gedrueckt wird, gibt nach. Das ist die kleinste Rueckmeldung,
   die es gibt, und auf einem Tablet mit Handschuhen die einzige, die ankommt. */
.btn:active { transform: translateY(1px); }

/* Zeilen, die zu etwas fuehren, heben sich beim Ueberfahren leicht ab. Zeilen
   ohne Ziel nicht -- sonst verspricht die Oberflaeche etwas, was nicht da ist. */
.data-table tbody tr:hover { background: var(--gray-50, rgba(0, 0, 0, .02)); }

/* Karten, die man anfassen kann, heben sich; feste Karten bleiben liegen. */
.karte--fassbar:hover {
    border-color: var(--gray-400);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

/* Der Tastaturfokus bleibt immer sichtbar, auch wenn Bewegung abgeschaltet ist. */
.btn:focus-visible, .sidenav__link:focus-visible, .version-chip:focus-visible,
.dash-tile__title:focus-visible, [draggable="true"]:focus-visible {
    outline: 2px solid var(--color-focus, var(--drk-red));
    outline-offset: 2px;
}

/* Wer Bewegung abbestellt hat, bekommt keine. Ohne Ausnahme -- auch nicht die
   "dezenten" Uebergaenge, denn bei Schwindel ist gerade die kleine Bewegung
   am Rand das Problem. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   Ziehen und Ablegen

   Dieselben Klassen fuer die Kacheln der Startseite und fuer Helfer auf
   Planstellen; was gezogen wird, sieht ueberall gleich aus.
--------------------------------------------------------------------------- */
[draggable="true"] { cursor: grab; }
[draggable="true"]:active { cursor: grabbing; }

.zieht {
    opacity: .45;
    transform: scale(.99);
}

/* Das Ziel nimmt den roten Rand an, sobald etwas darueber schwebt -- so ist
   ohne Beschriftung klar, wo das Losgelassene landet. */
.ziel-bereit {
    border-color: var(--drk-red);
    box-shadow: inset 0 0 0 1px var(--drk-red);
}

.zieh-griff {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex: 0 0 auto;
    border-radius: var(--radius-sm);
    color: var(--gray-500);
    cursor: grab;
}
.zieh-griff:hover { color: var(--drk-red); background: rgba(230, 0, 5, .07); }
/* Drei Linien als Griff, aus Rahmen gezeichnet statt als Zeichen -- ein Symbol
   aus der Schrift sieht auf jedem System anders aus. */
.zieh-griff::before {
    content: ""; width: 10px; height: 8px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-left: 0; border-right: 0;
    box-shadow: inset 0 3px 0 -1px currentColor;
}

/* ---------------------------------------------------------------------------
   Changelog
--------------------------------------------------------------------------- */
.versionen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }

.version-chip {
    display: inline-flex; align-items: baseline; gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border); border-radius: 999px;
    text-decoration: none; color: var(--gray-900); font-size: var(--fs-200);
}
.version-chip:hover { border-color: var(--drk-red); color: var(--drk-red); }
.version-chip__name { font-weight: 600; }
.version-chip__nr { color: var(--color-text-muted); font-size: var(--fs-100); }

.changelog { list-style: none; margin: 0; padding: 0; }
.changelog__eintrag {
    display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-3) 0; border-bottom: 1px solid var(--gray-200);
}
.changelog__eintrag:last-child { border-bottom: 0; }

/* Die Art der Aenderung traegt die Farbe, nicht der Text: so laesst sich eine
   lange Liste nach "was ist neu" oder "was wurde behoben" ueberfliegen, ohne
   zu lesen. */
.changelog__art {
    flex: 0 0 92px; text-align: center;
    font-size: var(--fs-100); font-weight: 700; line-height: 1.6;
    border-radius: var(--radius-sm); border: 1px solid transparent;
}
.changelog__art--neu        { background: #eef6ee; color: #1d4d26; border-color: #c2ddc6; }
.changelog__art--geaendert  { background: #eef5fa; color: #1c4a6b; border-color: #c7d8ec; }
.changelog__art--behoben    { background: #fdf6e7; color: #7a4e07; border-color: #e8d4a8; }
.changelog__art--entfernt   { background: var(--gray-100, #f2f2f2); color: var(--gray-700); border-color: var(--gray-300, #ddd); }
.changelog__art--sicherheit { background: #fbeaea; color: var(--color-error-fg); border-color: #e3bcbc; }

.changelog__text { min-width: 0; font-size: var(--fs-200); line-height: 1.5; }

.changelog__modul {
    display: inline-block; margin-right: var(--space-2);
    font-weight: 700; color: var(--drk-red); text-decoration: none;
}
.changelog__modul:hover { text-decoration: underline; }
.changelog__modul--kern { color: var(--gray-700); }


.sidebar-foot__version {
    display: flex; justify-content: space-between; gap: var(--space-2);
    text-decoration: none; color: inherit;
    padding: 2px 0 var(--space-2);
}
.sidebar-foot__version:hover { color: var(--drk-red); }

/* ---------------------------------------------------------------------------
   Balken fuer Jahreswerte
--------------------------------------------------------------------------- */
.balken { list-style: none; margin: 0; padding: 0; }
.balken__zeile {
    display: grid; grid-template-columns: 4rem 1fr 5.5rem;
    align-items: center; gap: var(--space-3); padding: 3px 0;
}
.balken__jahr { font-weight: 600; text-decoration: none; color: var(--gray-700); font-variant-numeric: tabular-nums; }
.balken__jahr:hover { color: var(--drk-red); }
.balken__jahr--aktiv { color: var(--drk-red); }
.balken__spur { background: var(--gray-100, #f2f2f2); border-radius: 999px; height: 10px; overflow: hidden; }
.balken__wert {
    display: block; height: 100%; width: var(--anteil, 0%);
    background: var(--gray-400, #bbb); border-radius: 999px;
}
.balken__wert--aktiv { background: var(--drk-red); }
.balken__zahl { text-align: right; font-variant-numeric: tabular-nums; color: var(--gray-700); font-size: var(--fs-200); }

/* ---------------------------------------------------------------------------
   Was jetzt ansteht
--------------------------------------------------------------------------- */
.ansteht {
    border: 1px solid #e3bcbc; background: #fdf3f3;
    border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}
.ansteht__titel {
    font-family: var(--font-head); font-weight: 700; font-size: var(--fs-300);
    color: var(--drk-red); margin: 0 0 var(--space-2);
}
.ansteht__liste { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.ansteht__posten {
    display: inline-flex; align-items: baseline; gap: var(--space-2);
    background: var(--color-surface); border: 1px solid #e3bcbc;
    border-radius: 999px; padding: var(--space-1) var(--space-3);
    text-decoration: none; color: var(--gray-900); font-size: var(--fs-200);
}
.ansteht__posten:hover { border-color: var(--drk-red); color: var(--drk-red); }
.ansteht__zahl { font-weight: 800; color: var(--drk-red); font-variant-numeric: tabular-nums; }
.ansteht__posten--mild { border-color: #e8d4a8; }
.ansteht__posten--mild .ansteht__zahl { color: #8a4b10; }

.filterleiste--eng { gap: var(--space-1); margin: 0; }
.data-table--eng th, .data-table--eng td { padding-top: var(--space-2); padding-bottom: var(--space-2); }

/* Helferstreifen zum Ziehen auf Planstellen */
.helfer-liste {
    list-style: none; margin: 0 0 var(--space-3); padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.helfer {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-surface); font-size: var(--fs-200);
}
.helfer:hover { border-color: var(--drk-red); }
.helfer__name { font-weight: 600; }
.helfer__nr { color: var(--color-text-muted); font-size: var(--fs-100); }

/* Eine Planstelle als Ablageziel darf sich beim Ueberfahren zeigen, aber erst
   waehrend eines Ziehvorgangs -- sonst blinkt sie bei jeder Mausbewegung. */
.planstelle {
    border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: var(--space-3) var(--space-4); margin-top: var(--space-3);
}
.planstelle--luecke { border-color: #e8d4a8; background: #fdfaf2; }

/* ---------------------------------------------------------------------------
   Meldeebene

   Ein <dialog>, damit Fokusfang und die Esc-Taste vom Browser kommen und nicht
   nachgebaut werden muessen. Ohne Skript bleibt es geschlossen -- der Weg
   fuehrt dann ueber die Meldungsuebersicht.
--------------------------------------------------------------------------- */
.ebene {
    width: min(640px, calc(100vw - 2 * var(--space-4)));
    max-height: calc(100vh - 2 * var(--space-5));
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .22);
    background: var(--color-surface);
    color: var(--color-text, var(--gray-900));
}
.ebene::backdrop { background: rgba(0, 0, 0, .45); }

.ebene__kasten { display: flex; flex-direction: column; max-height: inherit; margin: 0; }

.ebene__kopf {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}
.ebene__titel {
    font-family: var(--font-head); font-weight: 700; font-size: var(--fs-500);
    color: var(--drk-red); margin: 0;
}
.ebene__zu {
    background: none; border: 0; padding: var(--space-1) var(--space-2);
    color: var(--gray-700); font-size: var(--fs-200); font-weight: 600;
    cursor: pointer; border-radius: var(--radius-sm);
}
.ebene__zu:hover { color: var(--drk-red); background: rgba(230, 0, 5, .07); }

/* Der Rumpf scrollt, Kopf und Fuss bleiben stehen: auf einem Tablet im
   Querformat waere das Absenden sonst unerreichbar. */
.ebene__rumpf { padding: var(--space-4) var(--space-5); overflow-y: auto; }

.ebene__fuss {
    display: flex; gap: var(--space-3); flex-wrap: wrap;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--gray-50, #fafafa);
}

.technik {
    border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: var(--space-3); background: var(--gray-50, #fafafa);
}
.technik__konsole {
    margin: var(--space-2) 0 0; padding: var(--space-2);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-100); line-height: 1.45;
    max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}

.sidebar-foot__melden { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: var(--space-2); }
.sidebar-foot__knopf {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: inherit; text-align: left; text-decoration: none;
}
.sidebar-foot__knopf:hover { color: var(--drk-red); text-decoration: underline; }