/* Fragebogentool vfm — mobile first.
   Two audiences share this stylesheet. The customer fills in a long form on a phone, so tap
   targets are large and nothing hides behind the notch. The broker's staff read dense tables of
   721 questions on a desktop, so the editor pages widen out and their type stays legible.

   ONE colour family, derived from --vfm-navy. Bootstrap ships links in #0d6efd and inline code in
   pink #d63384; neither belongs to this brand, and having all three on one page is what made the
   catalogue pages look accidental. The overrides below pull them into the navy family. Every
   foreground/background pair used for text is at or above WCAG AA 4.5:1 — the ratios are noted
   where they are not obvious, because "looks fine on my screen" is not a check. */

:root {
    --vfm-navy: #002C59;
    --vfm-navy-700: #00224a;
    --vfm-navy-100: #e7eef6;
    --vfm-navy-050: #f2f6fb;
    --vfm-line: #d8dfe8;
    --vfm-ink: #17202b;
    --vfm-muted: #5b6876;

    /* Link and accent, in the navy family instead of Bootstrap's #0d6efd.
       #00549e on white = 7.6:1, so it stays readable at the small sizes the tables use. */
    --vfm-link: #00549e;
    --vfm-link-hover: #003f78;

    /* Inline code / slugs. Bootstrap's pink would be a fourth colour family. 9.1:1 on the
       tinted ground. */
    --vfm-code: #33415c;
    --vfm-code-bg: #eef1f6;

    --vfm-radius: 0.5rem;
    --vfm-shadow: 0 1px 2px rgba(0, 44, 89, .06), 0 1px 3px rgba(0, 44, 89, .1);

    /* Tile states */
    --state-yes: #1a7f4b;
    --state-no: #b3261e;
    --state-na: #6b7684;

    --tap: 48px;
}

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

/* Bootstrap's own tokens, redirected. Done with variables rather than by editing the vendored
   file, because bin/setup-assets.sh overwrites that on every asset refresh. */
:root,
[data-bs-theme="light"] {
    --bs-link-color: var(--vfm-link);
    --bs-link-color-rgb: 0, 84, 158;
    --bs-link-hover-color: var(--vfm-link-hover);
    --bs-link-hover-color-rgb: 0, 63, 120;
    --bs-code-color: var(--vfm-code);
    --bs-primary: var(--vfm-navy);
    --bs-primary-rgb: 0, 44, 89;
    --bs-border-color: var(--vfm-line);
    --bs-body-color: var(--vfm-ink);
    --bs-secondary-color: var(--vfm-muted);
    --bs-emphasis-color: var(--vfm-navy);
    --bs-focus-ring-color: rgba(0, 84, 158, .3);
}

/* The buttons carry their own per-component variables, so the tokens above do not reach them. */
.btn-primary {
    --bs-btn-bg: var(--vfm-navy);
    --bs-btn-border-color: var(--vfm-navy);
    --bs-btn-hover-bg: var(--vfm-navy-700);
    --bs-btn-hover-border-color: var(--vfm-navy-700);
    --bs-btn-active-bg: var(--vfm-navy-700);
    --bs-btn-active-border-color: var(--vfm-navy-700);
    --bs-btn-disabled-bg: var(--vfm-navy);
    --bs-btn-disabled-border-color: var(--vfm-navy);
}

.btn-outline-primary {
    --bs-btn-color: var(--vfm-link);
    --bs-btn-border-color: var(--vfm-link);
    --bs-btn-hover-bg: var(--vfm-navy);
    --bs-btn-hover-border-color: var(--vfm-navy);
    --bs-btn-active-bg: var(--vfm-navy);
    --bs-btn-active-border-color: var(--vfm-navy);
}

/* Bootstrap's .table-hover tint is a grey wash that fights the navy. */
.table {
    --bs-table-hover-bg: var(--vfm-navy-050);
    --bs-table-border-color: var(--vfm-line);
}

code {
    background: var(--vfm-code-bg);
    padding: .1rem .3rem;
    border-radius: .25rem;
}

body {
    color: var(--vfm-ink);
    background: #f4f6f9;
    /* Stops iOS Safari from zooming when a text field is focused: everything is >= 16px. */
    font-size: 1rem;
}

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1080;
    background: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
}

/* --- Header ------------------------------------------------------------- */

.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--vfm-navy);
    color: #fff;
    padding-top: env(safe-area-inset-top);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.app-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    max-width: 60rem;
    margin: 0 auto;
    padding: 0.5rem 1rem;
    min-height: var(--tap);
}

.app-header__brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

/* Das Wortzeichen neben dem vfm-Kasten. Erbt Farbe und Gewicht von .app-header__brand, braucht
   aber eine eigene Regel — sonst meldet StylesheetVollstaendigTest zu Recht eine Waise. */
.app-header__title {
    letter-spacing: -0.01em;
}

.app-header__mark {
    font-weight: 700;
    letter-spacing: 0.02em;
    background: #fff;
    color: var(--vfm-navy);
    border-radius: 0.25rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.9rem;
}

.app-header__user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.app-header__name {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 30rem) {
    .app-header__name {
        display: none;
    }
}

/* The modifier MUST match Role::value. It did not: these classes were inherited from the
   Besichtigungstool ('admin', 'vfm', 'makler'), while this project's roles are 'superadmin',
   'mandant_admin' and 'mitarbeiter'. Three of the four chips therefore matched no rule at all,
   and Bootstrap's bare .badge sets only color:#fff — white text on the navy header, invisible.
   Only 'none' worked, by coincidence of naming. */
.role-badge {
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .02em;
    padding: .3rem .5rem;
}

/* Light chip on the dark header: 10.4:1, and it reads as a label rather than as a warning. */
.role-badge--superadmin    { background: #f0d9a8; color: #4a3405; }
.role-badge--mandant_admin { background: #cfe0f5; color: var(--vfm-navy); }
.role-badge--mitarbeiter   { background: #cfe8dd; color: #0a3622; }
.role-badge--none          { background: #f8d7da; color: #6a1a21; }

/* --- Layout ------------------------------------------------------------- */

.app-main {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

.container-narrow {
    max-width: 60rem;
    margin: 0 auto;
    padding-inline: 1rem;
}

.page-head {
    padding: 1.25rem 0 0.5rem;
}

.page-head h1 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
}

.page-head .lead {
    color: var(--vfm-muted);
    font-size: 0.95rem;
    margin: 0.35rem 0 0;
}

/* --- Dashboard tiles ---------------------------------------------------- */

.tile-grid {
    display: grid;
    /* Obergrenze statt 1fr: Bei nur zwei Kacheln (Rolle ohne Verwaltung) entsteht sonst eine
       leere dritte Spalte, die wie eine fehlende Kachel aussieht. So bleiben sie in natuerlicher
       Groesse linksbuendig, und der Rest der Zeile liest sich als bewusster Freiraum. */
    grid-template-columns: repeat(auto-fill, minmax(15rem, 19rem));
    justify-content: start;
    gap: 0.75rem;
}

.tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 6.5rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--vfm-line);
    border-radius: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.tile:hover,
.tile:focus-visible {
    border-color: var(--vfm-navy);
    box-shadow: 0 2px 10px rgba(0, 44, 89, 0.08);
}

.tile__label {
    font-weight: 600;
    color: var(--vfm-navy);
}

.tile__hint {
    font-size: 0.875rem;
    color: var(--vfm-muted);
}

.tile__count {
    margin-top: auto;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
}

/* --- Utility ------------------------------------------------------------ */

.text-muted-sm {
    font-size: 0.875rem;
    color: var(--vfm-muted);
}

.btn-vfm {
    background: var(--vfm-navy);
    border-color: var(--vfm-navy);
    color: #fff;
    min-height: var(--tap);
}

.btn-vfm:hover,
.btn-vfm:focus-visible {
    background: var(--vfm-navy-700);
    border-color: var(--vfm-navy-700);
    color: #fff;
}

.card-plain {
    background: #fff;
    border: 1px solid var(--vfm-line);
    border-radius: 0.75rem;
}

/* --- Section bar (sticky, under the header) ------------------------------ */

.section-bar {
    position: sticky;
    top: calc(var(--tap) + env(safe-area-inset-top));
    z-index: 1020;
    background: #fff;
    border-bottom: 1px solid var(--vfm-line);
}

.section-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.75rem;
    font-size: 0.875rem;
}

.section-bar__back {
    color: var(--vfm-navy);
    text-decoration: none;
    font-weight: 500;
}

.section-bar__progress {
    color: var(--vfm-muted);
    font-variant-numeric: tabular-nums;
}

.save-status {
    color: var(--vfm-muted);
    font-size: 0.8125rem;
    min-width: 7rem;
    text-align: right;
}

.save-status[data-state="saved"] { color: var(--state-yes); }
.save-status[data-state="offline"],
.save-status[data-state="error"] { color: #a15c00; }
.save-status[data-state="signedout"] { color: var(--state-no); }

.section-no {
    color: var(--vfm-muted);
    font-weight: 500;
}

/* --- Groups & tiles ------------------------------------------------------ */

.group {
    margin-bottom: 1.5rem;
}

.group__title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vfm-muted);
    margin: 1.25rem 0 0.5rem;
}

.group__hint {
    font-size: 0.875rem;
    color: var(--vfm-muted);
    margin: -0.25rem 0 0.75rem;
}

.tile-item {
    background: #fff;
    border: 1px solid var(--vfm-line);
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.tile-item[data-state="yes"] { border-left: 4px solid var(--state-yes); }
.tile-item[data-state="no"] { border-left: 4px solid var(--state-no); }
.tile-item[data-state="na"] { border-left: 4px solid var(--state-na); }

.tile-item__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 0.875rem;
}

.tile-item__toggle {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    background: none;
    border: 0;
    padding: 0.5rem 0;
    text-align: left;
    min-height: var(--tap);
    justify-content: center;
    color: inherit;
}

.tile-item__toggle--static { cursor: default; }

.tile-item__label {
    font-weight: 500;
    line-height: 1.3;
}

.tile-item__hint {
    font-size: 0.75rem;
    color: var(--vfm-muted);
}

.tile-item__chevron::after {
    content: "";
}

.tile-item__body {
    padding: 0.25rem 0.875rem 0.875rem;
    border-top: 1px solid var(--vfm-line);
}

.tile-item__help {
    font-size: 0.875rem;
    color: var(--vfm-muted);
}

.tile-item__actions {
    margin-top: 0.5rem;
}

.tile-item__measures {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
}

.tile-item__measures li {
    padding: 0.35rem 0;
    border-top: 1px dashed var(--vfm-line);
}

.tile-item--custom .tile-item__body { border-top: 0; }

.tile-item__custom-label {
    border: 0;
    border-bottom: 1px dashed var(--vfm-line);
    border-radius: 0;
    padding-left: 0;
    font-weight: 500;
}

/* --- Three-state switch -------------------------------------------------- */

.state-switch {
    display: inline-flex;
    flex: 0 0 auto;
    border: 1px solid var(--vfm-line);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f7f9fb;
}

.state-switch__btn {
    width: 2.75rem;
    min-height: var(--tap);
    border: 0;
    background: none;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--vfm-muted);
}

.state-switch__btn + .state-switch__btn {
    border-left: 1px solid var(--vfm-line);
}

.state-switch__btn.is-active { color: #fff; }
.state-switch__btn--yes.is-active { background: var(--state-yes); }
.state-switch__btn--no.is-active { background: var(--state-no); }
.state-switch__btn--na.is-active { background: var(--state-na); }

.state-switch__btn:disabled { opacity: 0.55; }

/* --- Fields -------------------------------------------------------------- */

.field { margin-bottom: 0.875rem; }
.field--compact { margin-bottom: 0.625rem; }

.field__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.field__unit {
    font-weight: 400;
    color: var(--vfm-muted);
}

.field__hint {
    font-size: 0.8125rem;
    color: var(--vfm-muted);
    margin: -0.125rem 0 0.375rem;
}

.plain-item {
    background: #fff;
    border: 1px solid var(--vfm-line);
    border-radius: 0.75rem;
    padding: 0.875rem;
    margin-bottom: 0.5rem;
}

.plain-item .field:last-child { margin-bottom: 0; }

.choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.choice {
    min-height: var(--tap);
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--vfm-line);
    border-radius: 0.5rem;
    background: #fff;
    font-size: 0.9375rem;
}

.choice--active {
    background: var(--vfm-navy);
    border-color: var(--vfm-navy);
    color: #fff;
}

.check-list .form-check {
    min-height: 2.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.check-list .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0;
}

/* --- Hazards ------------------------------------------------------------- */

.hazards {
    background: var(--vfm-navy-100);
    border-radius: 0.75rem;
    padding: 0.875rem;
    margin-bottom: 0.75rem;
}

.hazards__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.hazards__list {
    display: grid;
    gap: 0.375rem;
}

.hazard {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: var(--tap);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--vfm-line);
    border-radius: 0.5rem;
    background: #fff;
    text-align: left;
}

.hazard--on {
    border-color: var(--vfm-navy);
    box-shadow: inset 0 0 0 1px var(--vfm-navy);
}

.hazard__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--vfm-line);
    border-radius: 0.25rem;
    background: #fff;
    color: var(--vfm-navy);
    font-weight: 700;
    flex: 0 0 auto;
}

.hazard--on .hazard__check {
    border-color: var(--vfm-navy);
    background: var(--vfm-navy);
    color: #fff;
}

/* --- Photos -------------------------------------------------------------- */

.photos { margin-top: 0.5rem; }

.photos__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.5rem;
}

.photo {
    margin: 0;
    border: 1px solid var(--vfm-line);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}

.photo img {
    display: block;
    width: 100%;
    height: 7rem;
    object-fit: cover;
}

.photo__doc {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 7rem;
    padding: 0.5rem;
    font-size: 0.8125rem;
    text-decoration: none;
    color: var(--vfm-ink);
    word-break: break-all;
}

.photo figcaption {
    padding: 0.375rem;
    border-top: 1px solid var(--vfm-line);
}

.photo__delete {
    padding: 0.125rem 0;
    font-size: 0.75rem;
}

.photos__add {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.photos__status {
    font-size: 0.8125rem;
    color: var(--vfm-muted);
}

/* --- Value table --------------------------------------------------------- */

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.value-table {
    min-width: 38rem;
    font-size: 0.875rem;
}

.value-table input { min-width: 5rem; }

.value-table__sum {
    font-variant-numeric: tabular-nums;
    color: var(--vfm-muted);
    white-space: nowrap;
}

/* --- Measures ------------------------------------------------------------ */

.measure {
    background: #fff;
    border: 1px solid var(--vfm-line);
    border-radius: 0.75rem;
    padding: 0.875rem;
    margin-bottom: 0.5rem;
}

.measure__origin {
    font-size: 0.8125rem;
    color: var(--vfm-muted);
    margin-bottom: 0.375rem;
}

.measure__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* --- Overview ------------------------------------------------------------ */

.progress-card {
    background: #fff;
    border: 1px solid var(--vfm-line);
    border-radius: 0.75rem;
    padding: 0.875rem;
    margin-bottom: 1rem;
}

.progress-card .progress {
    height: 0.5rem;
    margin-bottom: 0.5rem;
}

.progress-card .progress-bar { background: var(--vfm-navy); }

.section-list {
    display: grid;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}

.section-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.625rem 0.875rem;
    background: #fff;
    border: 1px solid var(--vfm-line);
    border-radius: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.section-link--done { border-left: 4px solid var(--state-yes); }

.section-link__no {
    flex: 0 0 1.75rem;
    text-align: center;
    font-weight: 600;
    color: var(--vfm-muted);
}

.section-link__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.section-link__title { font-weight: 500; }

.section-link__meta {
    font-size: 0.8125rem;
    color: var(--vfm-muted);
}

.section-link__chevron {
    color: var(--vfm-muted);
    font-size: 1.25rem;
}

.report-actions {
    display: grid;
    gap: 0.5rem;
}

.section-nav {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
}

.filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-bar input[type="search"] { flex: 1 1 12rem; }
.filter-bar select { flex: 0 0 9rem; }

.plain-item__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.custom-items:empty + [data-custom-add] { margin-top: 0; }

/* --- Finalize / signatures ------------------------------------------------ */

.check-summary {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
}

.check-summary li {
    padding: 0.25rem 0;
    border-bottom: 1px dashed var(--vfm-line);
}

.check-summary li:last-child { border-bottom: 0; }

.signature-block {
    padding: 0.75rem 0;
    border-top: 1px solid var(--vfm-line);
}

.signature-block:first-of-type { border-top: 0; }

.signature-pad {
    display: block;
    width: 100%;
    height: 10rem;
    background: #fff;
    border: 1px dashed var(--vfm-line);
    border-radius: 0.5rem;
    /* The canvas must own the gesture, otherwise a signing stroke scrolls the page. */
    touch-action: none;
}

.signature-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.signature-done img {
    max-width: 16rem;
    height: auto;
    background: #fff;
    border: 1px solid var(--vfm-line);
    border-radius: 0.5rem;
    padding: 0.25rem;
}

/* --- Verwaltung ---------------------------------------------------------- */

.editor-section {
    background: #fff;
    border: 1px solid var(--vfm-line);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

.editor-section > summary {
    cursor: pointer;
    font-weight: 600;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.editor-section__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background: var(--vfm-navy-100);
    color: var(--vfm-navy);
    font-size: 0.8125rem;
}

.editor-group {
    border: 0;
    border-top: 1px solid var(--vfm-line);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

.editor-items { font-size: 0.875rem; }
.editor-items th { color: var(--vfm-muted); font-weight: 600; }
.editor-new { background: #fbfcfe; }

/* --- Anmeldeseite -------------------------------------------------------- */

/* Handy: gestapelte Karte, Markenband oben. Ab Tablet zweigeteilt — links wofuer das
   Werkzeug da ist, rechts die Anmeldung. Vorher stand eine 26rem-Karte mitten auf einer
   leeren Flaeche. */
.login {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: calc(1.5rem + env(safe-area-inset-top)) 1rem calc(1.5rem + env(safe-area-inset-bottom));
    background:
        radial-gradient(80% 55% at 50% -10%, #dbe5f0 0%, rgba(219, 229, 240, 0) 70%),
        #eef1f5;
}

.login__card {
    width: 100%;
    max-width: 26rem;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(0, 44, 89, 0.06),
        0 12px 32px rgba(0, 44, 89, 0.12);
}

/* Markenpanel — hier und nur hier die volle Hausfarbe. */
.login__brandpanel {
    background: linear-gradient(160deg, #013a72 0%, var(--vfm-navy) 60%, #00224a 100%);
    color: #fff;
    padding: 1.75rem 1.5rem;
}

.login__mark {
    display: inline-block;
    background: #fff;
    color: var(--vfm-navy);
    font-weight: 700;
    font-size: 0.9375rem;
    border-radius: 0.3rem;
    padding: 0.15rem 0.5rem;
    margin-bottom: 1rem;
}

.login__title {
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0 0 0.4rem;
}

.login__claim {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #bcd2e6;
    margin: 0;
}

.login__points {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.login__points li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: #d3e2ef;
}

.login__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #6ea3d6;
}

/* Handlungsseite */
.login__actionpanel {
    display: flex;
    flex-direction: column;
}

.login__actionpanel-inner {
    padding: 1.5rem;
}

.login__action-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vfm-navy);
    margin: 0 0 0.35rem;
}

.login__action-hint {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--vfm-muted);
    margin: 0 0 1.25rem;
}

/* Die eine Handlung der Seite. */
.login__action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0.75rem 1.25rem;
    background: var(--vfm-navy);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.6rem;
}

.login__action:hover,
.login__action:focus-visible {
    background: var(--vfm-navy-700);
    color: #fff;
}

.login__action:focus-visible {
    outline: 3px solid #7ba7d4;
    outline-offset: 2px;
}

/* Entwicklungsmodus: eigener Streifen am Fuss der Handlungsseite, deutlich untergeordnet.
   Negative Raender ziehen ihn bis an die Kartenkante. In Produktion faellt er ganz weg. */
.login__dev {
    margin-top: auto;
    padding: 1.125rem 1.5rem 1.375rem;
    background: #fdf8ec;
    border-top: 1px solid #f0e3c4;
}

.login__dev-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #8a6415;
    margin: 0 0 0.4rem;
}

.login__dev-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #d19b1d;
}

.login__dev-hint {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #6f5a2c;
    margin: 0 0 0.75rem;
}

.login__dev-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.login__dev-roles a {
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    background: #fff;
    border: 1px solid #e3d3aa;
    border-radius: 0.4rem;
    color: #6f5a2c;
    font-size: 0.8125rem;
    text-decoration: none;
}

.login__dev-roles a:hover,
.login__dev-roles a:focus-visible {
    border-color: #c9a94f;
    color: #4a3c1c;
}

.login__hinweis {
    margin: .75rem 0 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--vfm-muted);
}

.login__foot {
    font-size: 0.75rem;
    color: #8792a0;
    margin: 0;
    text-align: center;
}

/* Ab 48rem (768px, iPad hochkant) nebeneinander: Das Markenpanel traegt die linke Haelfte,
   die Anmeldung die rechte. Damit ist die Flaeche belegt, statt eine schmale Karte in die
   Mitte zu setzen. */
@media (min-width: 48rem) {
    .login__card {
        max-width: 56rem;
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
    }

    .login__brandpanel {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Sonst zieht die Flex-Voreinstellung "stretch" das vfm-Zeichen auf Panelbreite. */
        align-items: flex-start;
        padding: 2.75rem 2.25rem;
    }

    .login__title {
        font-size: 2rem;
    }

    .login__claim {
        font-size: 1rem;
    }

    .login__points {
        margin-top: 1.75rem;
    }

    .login__actionpanel-inner {
        padding: 2.75rem 2.25rem;
    }

    .login__action-title {
        font-size: 1.25rem;
    }
}

/* --- Breitere Schirme ----------------------------------------------------
   Mobil bleibt alles wie es ist. Ab Tablet wird die Breite genutzt, statt
   Handy-Zeilen nur auseinanderzuziehen: Aktionen wandern neben die Ueberschrift,
   Listenzeilen bekommen Inhalt in der Mitte, der Bericht wird zweispaltig. */

/* Kopfzeile: auf dem Desktop ist Platz fuer den ganzen Namen. */
@media (min-width: 48rem) {
    .app-header__name {
        max-width: 22rem;
    }
}

/* Seitenkopf mit Hauptaktion rechts daneben. */
.page-head--action {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.page-head__action {
    margin: 0;
}

@media (min-width: 48rem) {
    .page-head--action {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.5rem;
    }

    /* Neben der Ueberschrift braucht der Knopf keine volle Breite mehr. */
    .page-head__action .btn {
        width: auto;
        padding-inline: 1.5rem;
        white-space: nowrap;
    }
}

/* --- Berichtszeilen ------------------------------------------------------ */

.report-rows {
    display: grid;
    gap: 0.375rem;
}

/* Auf dem Handy bleibt es bei Titel, Untertitel und Status — Ersteller und Datum sind dort
   Ballast (in der eigenen Liste steht ohnehin ueberall derselbe Name). */
.report-row {
    display: grid;
    grid-template-areas: "main badge";
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.15rem 0.75rem;
    padding: 0.75rem 0.875rem;
    min-height: var(--tap);
    background: #fff;
    border: 1px solid var(--vfm-line);
    border-radius: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.report-row:hover,
.report-row:focus-visible {
    border-color: var(--vfm-navy);
    box-shadow: 0 2px 10px rgba(0, 44, 89, 0.08);
}

.report-row__main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.report-row__title {
    font-weight: 600;
    line-height: 1.3;
}

.report-row__sub,
.report-row__owner,
.report-row__date {
    font-size: 0.8125rem;
    color: var(--vfm-muted);
}

/* Lange Firmennamen duerfen den Status nicht wegdruecken. Der Untertitel darf auf dem Handy
   umbrechen — sonst faellt dort das Besichtigungsdatum hinten weg. */
.report-row__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-row__owner,
.report-row__date {
    display: none;
}

.report-row .badge {
    grid-area: badge;
    align-self: center;
}

@media (min-width: 48rem) {
    .report-row {
        grid-template-areas: "main owner date badge";
        grid-template-columns: minmax(0, 1fr) 13rem 6rem 7rem;
        gap: 1rem;
        padding: 0.875rem 1rem;
    }

    .report-row__owner {
        grid-area: owner;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .report-row__sub {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .report-row__date {
        grid-area: date;
        display: block;
        font-variant-numeric: tabular-nums;
    }

    .report-row .badge {
        justify-self: start;
    }
}

/* --- Bericht: zweispaltig ab Desktop -------------------------------------
   Links die Abschnitte, rechts die Aktionen — dauerhaft sichtbar, ohne ans
   Ende scrollen zu muessen. Auf dem Handy bleibt die Reihenfolge unveraendert:
   Fortschritt, Abschnitte, Aktionen, Fassungen. */
.report-layout {
    display: grid;
    gap: 1.25rem;
}

/* Ab 48rem (768px) — damit auch Tablets im Hochformat zwei Spalten bekommen und nicht
   eine auseinandergezogene Handy-Liste zeigen. */
@media (min-width: 48rem) {
    .report-layout {
        grid-template-columns: minmax(0, 1fr) 18rem;
        align-items: start;
        gap: 1.5rem;
    }

    .report-layout__side {
        position: sticky;
        top: calc(var(--tap) + env(safe-area-inset-top) + 1rem);
    }
}

@media (min-width: 62rem) {
    .report-layout {
        grid-template-columns: minmax(0, 1fr) 19rem;
        gap: 1.75rem;
    }
}

/* Aktionsblock in der Seitenspalte: dort ist volle Breite genau richtig. */
.report-layout__side .report-actions {
    margin-bottom: 1rem;
}

/* --- Grosse Schirme: Breite wirklich nutzen ------------------------------
   Bis hier war der Inhalt auf 60rem gedeckelt — auf einem 1440er-Schirm zwei
   Drittel Nutzflaeche, und der Bogen lief als eine Spalte 940px breiter Karten
   endlos nach unten. Handy und Tablet-Hochformat bleiben unberuehrt. */

/* Hier stand eine Verbreiterung von .container-narrow auf 76rem bzw. 84rem. Sie kam aus dem
   Besichtigungstool und war fuer dessen zweispaltiges Kachelraster (.tile-grid, .group) gedacht
   — Klassen, die es in diesem Projekt nicht gibt. Wirkung hier: die Fragen-Maske wurde 1170px
   breit und ihre Hilfetexte 1100px lang, also ueber 160 Zeichen je Zeile.
   Die Kopfzeile darf mitwachsen, der Textkoerper nicht. */
@media (min-width: 82rem) {
    .app-header__inner {
        max-width: 76rem;
    }
}

/* Bogen-Abschnitt zweispaltig ab 62rem (992px) — also ab iPad quer.
   Im Hochformat (834px) bliebe eine Kachel mit Drei-Zustand-Schalter zu schmal. */
@media (min-width: 62rem) {
    .group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 1rem;
        /* Karten behalten ihre eigene Hoehe, statt sich auf die hoechste der Zeile zu strecken. */
        align-items: start;
    }

    .group__title,
    .group__hint,
    .hazards,
    .custom-items,
    [data-custom-add] {
        grid-column: 1 / -1;
    }

    /* Wertverteilung und Lagertabelle brauchen die ganze Breite. */
    .plain-item:has(.table-scroll) {
        grid-column: 1 / -1;
    }

    /* Im Raster ersetzt gap den Aussenabstand der Karten. */
    .group .tile-item,
    .group .plain-item {
        margin-bottom: 0;
    }

    .custom-items {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 1rem;
        align-items: start;
    }

    .custom-items .tile-item {
        margin-bottom: 0;
    }
}

/* Abschnittsliste der Uebersicht zweispaltig, sobald die Hauptspalte breit genug ist —
   halbiert das Scrollen und fuellt die Flaeche mit Inhalt statt mit Luft. */
@media (min-width: 82rem) {
    .section-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }
}

/* Diagnose auf der "Kein Zugang"-Seite: der einzige Ort, an dem eine unvollstaendige
   Zitadel-Einrichtung fuer den Nutzer sichtbar wird. */
.diagnosis {
    margin: 0;
    display: grid;
    gap: 0.25rem 1rem;
}

.diagnosis dt {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--vfm-muted);
    margin-top: 0.75rem;
}

.diagnosis dd {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.diagnosis code {
    background: var(--vfm-navy-100);
    color: var(--vfm-navy);
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    word-break: break-all;
}

@media (min-width: 40rem) {
    .diagnosis {
        grid-template-columns: 14rem minmax(0, 1fr);
    }

    .diagnosis dt {
        margin-top: 0;
        grid-column: 1;
    }

    .diagnosis dd {
        grid-column: 2;
    }
}

/* Nicht gewaehlte Abschnitte in der Uebersicht: zurueckgenommen, aber erreichbar. */
.section-list--muted {
    margin-bottom: 1.25rem;
}

.section-link--muted {
    background: transparent;
    border-style: dashed;
    color: var(--vfm-muted);
}

.section-link--muted .section-link__title {
    font-weight: 500;
}

/* --- Loeschen ------------------------------------------------------------
   Zweistufig: Der Knopf klappt erst auf, was verloren geht. Rot erst dort,
   wo es wirklich losgeht — sonst stumpft die Farbe ab. */
.danger-zone {
    margin-top: 1.5rem;
    border: 1px solid var(--vfm-line);
    border-radius: 0.75rem;
    background: #fff;
}

.danger-zone > summary {
    cursor: pointer;
    min-height: var(--tap);
    display: flex;
    align-items: center;
    padding: 0.5rem 0.875rem;
    font-size: 0.9375rem;
    color: var(--state-no);
}

.danger-zone[open] > summary {
    border-bottom: 1px solid var(--vfm-line);
    font-weight: 600;
}

.danger-zone__body {
    padding: 0.875rem;
    font-size: 0.9375rem;
}

.danger-zone .btn-danger {
    min-height: var(--tap);
}

/* --- Fragebogen: Datei-Ablegefläche und Hinweis-Einblendung ---------------------------- */

.datei__zone {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 1rem;
    border: 2px dashed var(--vfm-line);
    border-radius: .5rem;
    cursor: pointer;
    text-align: center;
}

.datei__zone--aktiv {
    border-color: var(--vfm-navy);
    background: var(--vfm-navy-100);
}

.datei__liste {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
}

.datei__liste li {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .35rem 0;
    border-bottom: 1px solid var(--vfm-line);
}

.datei__liste li span { flex: 1 1 auto; word-break: break-word; }
.datei__liste li small { color: var(--vfm-muted); white-space: nowrap; }

/* Hinweis-Einblendung. Kein Dialog: sie darf das Ausfüllen nicht unterbrechen. */
.toast-hinweis {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    transform: translate(-50%, 1rem);
    max-width: min(32rem, calc(100vw - 2rem));
    padding: .7rem 1rem;
    border-radius: .5rem;
    background: var(--vfm-ink);
    color: #fff;
    font-size: .9rem;
    line-height: 1.35;
    box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 60;
}

.toast-hinweis--sichtbar { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
    .toast-hinweis { transition: none; }
}

.karte--hinweis { border-left: 5px solid var(--vfm-navy); }
.zusatz-badge {
    display: inline-block;
    margin-right: .5rem;
    padding: .15rem .5rem;
    border-radius: .25rem;
    background: var(--vfm-navy-100);
    color: var(--vfm-navy-700);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* --- Postfach ------------------------------------------------------------------------- */

.container-weit { max-width: 76rem; margin-inline: auto; padding-inline: 1rem; }

.filterzeile {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.filterzeile input[type="search"] { flex: 1 1 14rem; min-height: var(--tap); }
.filterzeile select { min-height: var(--tap); }

.tabelle-umbruch { overflow-x: auto; }

/* Kein `text-transform: capitalize`. Es trifft JEDES Wort, nicht nur das erste: aus "GF fehlt"
   wurde "GF Fehlt" und aus "Katalog nicht veröffentlicht" wäre "Katalog Nicht Veröffentlicht"
   geworden. Die Werte, die aus dem ENUM kommen ("offen", "eingegangen"), bekommen ihren
   Grossbuchstaben stattdessen über ::first-letter — das trifft wirklich nur den ersten. */
.status {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: .25rem;
    font-size: .78rem;
    font-weight: 600;
}

.status::first-letter {
    text-transform: uppercase;
}

.status--offen       { background: #fff3cd; color: #6b5200; }
.status--eingegangen { background: var(--vfm-navy-100); color: var(--vfm-navy-700); }
.status--bearbeitet  { background: #d1e7dd; color: #0a3622; }
.status--archiviert  { background: #e9ecef; color: #495057; }

.blaettern {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.zeile {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: .5rem;
}

.zeile label { margin: 0; }
.zeile select { min-height: var(--tap); }

.einwilligung {
    padding: .6rem 0;
    border-bottom: 1px solid var(--vfm-line);
}

.einwilligung:last-child { border-bottom: 0; }

.zus-liste dt { font-weight: 600; margin-top: .5rem; }
.zus-liste dd { margin: 0 0 .25rem; }
.kopftabelle th { width: 14rem; font-weight: 600; }

/* --- Verschicken und Wiederaufnahme --------------------------------------------------- */

.link-kasten {
    display: block;
    padding: .5rem .6rem;
    background: var(--vfm-navy-100);
    border-radius: .3rem;
    font-size: .82rem;
    word-break: break-all;
}

.offener-link {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: .6rem 0;
    border-bottom: 1px solid var(--vfm-line);
}

.offener-link:last-child { border-bottom: 0; }

#code {
    max-width: 12rem;
    font-size: 1.4rem;
    letter-spacing: .25em;
    text-align: center;
}

/* --- Katalog-Editor ------------------------------------------------------------------- */

.karte--gefahr { border-left: 5px solid #b02a37; }
tr.inaktiv { opacity: .55; }
.protokoll-wert { font-size: .82rem; max-width: 22rem; word-break: break-word; }
/* Slugs and other machine keys. Was .74rem (~11.8px) monospace — the contrast was fine at
   9.1:1, but at that size it still could not be read, which is the part a ratio does not catch.
   .8rem plus real padding, and tabular figures so columns of them line up. */
.pill {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: .25rem;
    background: var(--vfm-code-bg);
    color: var(--vfm-code);
    font-size: .8rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Verwaltungsseiten: Struktur ------------------------------------------------------ */

/* The editor pages were bare tables on a grey ground: no edge between "page" and "content",
   so 31 rows of nearly identical text had nothing to sit in. A single card per block does the
   work — and doubles as the print unit. */
.karte-block {
    background: #fff;
    border: 1px solid var(--vfm-line);
    border-radius: var(--vfm-radius);
    box-shadow: var(--vfm-shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.karte-block__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--vfm-line);
    background: var(--vfm-navy-050);
}

.karte-block__kopf h2,
.karte-block__kopf h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--vfm-navy);
}

.karte-block__zahl {
    margin-left: auto;
    font-size: .8rem;
    color: var(--vfm-muted);
    font-variant-numeric: tabular-nums;
}

.karte-block .table { margin-bottom: 0; }
.karte-block .table > :not(caption) > * > * { padding-inline: 1rem; }

/* Deliberately NOT sticky. A sticky thead would have to position against .tabelle-umbruch,
   which `overflow-x: auto` turns into a scroll container — the row then pins inside the table
   instead of at the viewport and sits on top of the data. The tables here are 8 to 23 rows, so
   the header stays in view anyway; the Gesamtansicht is the answer for reading the long list. */
.karte-block .table thead th {
    background: #fff;
    box-shadow: inset 0 -1px 0 var(--vfm-line);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--vfm-muted);
    white-space: nowrap;
}

.page-head--katalog {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem 1.5rem;
}

.page-head--katalog > div:first-child { flex: 1 1 20rem; }

/* Counts belong next to the title, not buried in a sentence. */
.kennzahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0;
}

.kennzahl__wert {
    display: block;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--vfm-navy);
    font-variant-numeric: tabular-nums;
}

.kennzahl__name {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vfm-muted);
}

/* --- Gesamtansicht ------------------------------------------------------------------- */

/* Hülle der ganzen Seite: hält den Druckbereich zusammen und dient als Geltungsbereich, damit
   die Regeln unten keine andere Seite treffen. */
.gesamt {
    container-type: inline-size;
}

/* Zum Korrekturlesen von 721 Fragen. Deshalb schmalere Textspalte als bei den Tabellen: eine
   Zeile über die ganze Breite eines 1440er Bildschirms liest niemand gern. */
.gesamt-index {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: 1.5rem;
}

.gesamt-index__eintrag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .6rem;
    border: 1px solid var(--vfm-line);
    border-radius: 2rem;
    background: #fff;
    color: var(--vfm-navy);
    font-size: .82rem;
    text-decoration: none;
}

.gesamt-index__eintrag:hover { border-color: var(--vfm-link); color: var(--vfm-link); }
.gesamt-index__eintrag--zusatz { border-style: dashed; }

.gesamt-index__eintrag--aktiv {
    background: var(--vfm-navy);
    border-color: var(--vfm-navy);
    color: #fff;
}

.gesamt-index__zahl {
    font-size: .72rem;
    color: var(--vfm-muted);
    font-variant-numeric: tabular-nums;
}

.gesamt-index__eintrag--aktiv .gesamt-index__zahl { color: #cfe0f5; }

/* Ein Zusatzfragebogen ist etwas anderes als ein Hauptabschnitt — er wird nur manchen Kunden
   gestellt. Die gestrichelte Kante sagt das, ohne dass man die Überschrift lesen muss. */
.gesamt-abschnitt--zusatz { border-left: 4px solid var(--vfm-navy-100); }

/* Der Sprung aus dem Index landet sonst unter der klebenden Kopfzeile. */
.gesamt-abschnitt,
.gesamt-frage { scroll-margin-top: 4rem; }

.gesamt-beschreibung,
.gesamt-ausloeser {
    margin: 0;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--vfm-line);
    font-size: .9rem;
}

.gesamt-ausloeser {
    background: var(--vfm-navy-050);
    color: var(--vfm-navy-700);
}

.gesamt-oder {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vfm-muted);
}

.gesamt-fragen {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gesamt-frage {
    padding: .85rem 1rem;
    border-bottom: 1px solid #eef1f6;
}

.gesamt-frage:last-child { border-bottom: 0; }

.gesamt-frage__kopf {
    display: flex;
    gap: .65rem;
    align-items: baseline;
}

.gesamt-frage__nr {
    flex: 0 0 auto;
    min-width: 2.5rem;
    font-size: .78rem;
    color: var(--vfm-muted);
    font-variant-numeric: tabular-nums;
}

.gesamt-frage__text {
    max-width: 52rem;
    font-weight: 500;
    line-height: 1.45;
}

/* Das Sternchen muss ohne Farbe funktionieren, deshalb steht es als Zeichen da und wird nicht
   nur rot eingefärbt. */
.gesamt-pflicht {
    color: #b3261e;
    text-decoration: none;
    font-weight: 700;
}

.gesamt-frage__meta,
.gesamt-frage__hilfe {
    margin: .3rem 0 0 3.15rem;
    font-size: .84rem;
    color: var(--vfm-muted);
}

.gesamt-frage__hilfe {
    max-width: 52rem;
    color: var(--vfm-ink);
    background: #fbfcfe;
    border-left: 3px solid var(--vfm-navy-100);
    padding: .35rem .6rem;
}

.gesamt-optionen {
    margin: .4rem 0 0 3.15rem;
    padding-left: 1.1rem;
    font-size: .86rem;
}

.gesamt-optionen li { margin-bottom: .15rem; }

@media (max-width: 40rem) {
    .gesamt-frage__meta,
    .gesamt-frage__hilfe { margin-left: 0; }
    .gesamt-optionen { margin-left: 0; }
}

/* --- Druck -------------------------------------------------------------------------- */

/* Der Bogen wird ausgedruckt und weitergegeben — an HK zur Abnahme, an Compliance für die
   Begründung der Pflichtfelder. Bildschirm-Chrom fliegt raus, Seitenumbrüche mitten in einer
   Frage werden verhindert. */
@media print {
    body { background: #fff; }

    .app-header,
    .skip-link,
    .d-print-none { display: none !important; }

    .app-main { padding: 0; }
    .container-weit { max-width: none; padding: 0; }

    .karte-block {
        border: 0;
        box-shadow: none;
        margin-bottom: 1rem;
        break-inside: auto;
    }

    .karte-block__kopf {
        background: transparent;
        border-bottom: 1.5pt solid #000;
        padding-inline: 0;
        break-after: avoid;
    }

    .gesamt-frage {
        padding-inline: 0;
        break-inside: avoid;
    }

    .gesamt-abschnitt { break-before: page; }
    .gesamt-abschnitt:first-of-type { break-before: auto; }

    .alert { border: 1pt solid #000; }
    .pill { background: transparent; border: .5pt solid #666; }

    a { color: #000; text-decoration: none; }
}

/* --- Verwaltungs-Startseite ---------------------------------------------------------- */

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

.kachel {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-height: 6.5rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--vfm-line);
    border-radius: var(--vfm-radius);
    box-shadow: var(--vfm-shadow);
    color: inherit;
    text-decoration: none;
}

.kachel:hover {
    border-color: var(--vfm-link);
    box-shadow: 0 2px 4px rgba(0, 44, 89, .1), 0 4px 12px rgba(0, 44, 89, .08);
}

/* Nicht antippbar, und das muss man SEHEN, nicht erst durch einen Klick merken. */
.kachel--offen {
    background: #fbfcfd;
    border-style: dashed;
    box-shadow: none;
    cursor: not-allowed;
}

.kachel--offen:hover { border-color: var(--vfm-line); box-shadow: none; }
.kachel--offen .kachel__titel { color: var(--vfm-muted); }

.kachel__titel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--vfm-navy);
}

.kachel__text {
    font-size: .875rem;
    color: var(--vfm-muted);
    line-height: 1.4;
}

/* --- Der Kundenbogen ----------------------------------------------------------------- */

/* Dieser Block fehlte vollständig. AP 3 hat das Markup gebaut, das Stylesheet dazu nie — die
   Klassen `.frage`, `.label`, `.hilfe`, `.jn`, `.check-liste`, `.datei`, `.fortschritt` und
   `.balken` standen ohne eine einzige Regel da. Der Bogen sah deshalb aus wie ein rohes
   HTML-Formular: Beschriftung und Feld in einer Zeile, Feldbreiten nach Browservorgabe, kein
   Fortschrittsbalken, sondern eine Textzeile.
   Schlimmer als die Optik war `.versteckt`: ohne Regel wurde NICHTS ausgeblendet, der Kunde sah
   also alle bedingten Fragen sofort. Das ist der erste Selektor hier unten. */

.versteckt {
    display: none !important;
}

/* Fortschritt bleibt am oberen Rand stehen. Bei 43 Pflichtangaben zum Start und bis zu 23
   Zusatzfragebögen ist "wie weit bin ich" die häufigste Frage des Ausfüllenden. */
.fortschritt {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--vfm-line);
    padding: .6rem 1rem calc(.5rem + env(safe-area-inset-top));
    padding-top: calc(.6rem + env(safe-area-inset-top));
}

.balken {
    max-width: 52rem;
    margin: 0 auto;
    height: .5rem;
    background: var(--vfm-navy-100);
    border-radius: 1rem;
    overflow: hidden;
}

.balken__fuellung {
    height: 100%;
    background: linear-gradient(90deg, var(--vfm-navy) 0%, #1f6bb0 100%);
    border-radius: 1rem;
    /* Der Balken wächst, wenn ein Zusatzfragebogen dazukommt — ohne Übergang springt er. */
    transition: width .25s ease-out;
}

.fortschritt__label,
.fortschritt__status {
    max-width: 52rem;
    margin: .35rem auto 0;
    font-size: .8125rem;
    color: var(--vfm-muted);
}

.fortschritt__status:empty { display: none; }
.fortschritt__status { color: var(--vfm-navy); }

/* Der Bogen ist eine Leseaufgabe, keine Tabelle: 52rem, nicht die ganze Fensterbreite.
   Zeilen über 100 Zeichen verliert das Auge beim Rücksprung. */
.is-bogen .container-narrow,
.is-bogen .fortschritt > * {
    max-width: 52rem;
}

.dokumentkopf {
    padding: 1.75rem 0 1rem;
}

/* --- Abschnitt als Karte ------------------------------------------------------------- */

.karte {
    background: #fff;
    border: 1px solid var(--vfm-line);
    border-radius: var(--vfm-radius);
    box-shadow: var(--vfm-shadow);
    margin-bottom: 1.25rem;
    padding: 1.25rem 1rem .25rem;
}

.karte > h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem .75rem;
    margin: 0 0 .35rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--vfm-navy);
    line-height: 1.3;
}

/* "Schritt 3" ist Beiwerk und stand vorher in Überschriftengröße vor dem Titel. */
.zaehler {
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vfm-muted);
}

.beschreibung {
    margin: 0 0 .5rem;
    font-size: .9rem;
    color: var(--vfm-muted);
    line-height: 1.5;
}

/* --- Eine Frage ---------------------------------------------------------------------- */

.frage {
    padding: 1rem 0;
    border-top: 1px solid #eef1f6;
}

.karte > .frage:first-of-type { border-top: 0; padding-top: .5rem; }
.frage:last-child { padding-bottom: 1.25rem; }

/* Browser geben fieldset einen Rahmen, eigenes Padding und `min-width: min-content` — das
   Letzte lässt lange Optionslisten aus der Karte laufen. */
.frage fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* font-size MUSS hier stehen. Bootstrap stylt `legend` als Überschrift
   (`font-size: calc(1.275rem + .3vw)`), und die Gruppenfragen — jn, mehrfach, zustimmung, also
   289 der 721 — benutzen legend statt label, weil ein <label> nur auf EIN Feld zeigen kann.
   Ohne diese Zeile sahen die beiden häufigsten Fragetypen völlig unterschiedlich aus: "Ausgeübter
   Beruf" in 1 rem, "Üben Sie körperlich schwere Tätigkeiten aus?" in 1,4 rem.
   Die Klasse gewinnt gegen den Elementselektor, float/width bringt Bootstrap schon mit. */
.label {
    display: block;
    margin-bottom: .4rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--vfm-ink);
}

.frage legend.label + * { clear: both; }

.pflicht {
    color: #b3261e;
    font-weight: 700;
    margin-left: .1rem;
}

.hilfe {
    /* 46rem sind rund 80 Zeichen. Darueber verliert das Auge beim Ruecksprung die Zeile — und
       diese Erklaerungen sind lang, weil sie die rechtliche Folge einer Aenderung nennen. */
    max-width: 46rem;
    margin: 0 0 .5rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--vfm-muted);
}

.fehler {
    margin-top: .4rem;
    font-size: .8125rem;
    font-weight: 500;
    color: #b3261e;
}

/* --- Felder -------------------------------------------------------------------------- */

/* Nach Element ausgewählt, nicht nach Klasse: die Feld-Teiltemplates schreiben blanke
   <input>/<select>/<textarea> ohne Klasse, und daran soll sich nichts ändern müssen. */
:is(.frage, form.karte) :is(
    input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
    input[type="date"], input[type="month"], select, textarea
) {
    display: block;
    width: 100%;
    min-height: var(--tap);
    padding: .6rem .75rem;
    background: #fff;
    border: 1px solid #b9c3d0;
    border-radius: .5rem;
    /* 1rem, damit iOS Safari beim Fokus nicht hineinzoomt. */
    font-size: 1rem;
    font-family: inherit;
    color: var(--vfm-ink);
}

/* Ein Datum braucht keine 52rem. Feldbreite als Hinweis auf die erwartete Eingabe. */
:is(.frage, form.karte) :is(input[type="date"], input[type="month"]) { max-width: 12rem; }
:is(.frage, form.karte) input[type="number"] { max-width: 9rem; }
:is(.frage, form.karte) input[type="tel"] { max-width: 16rem; }
:is(.frage, form.karte) input[type="email"] { max-width: 24rem; }
:is(.frage, form.karte) input[type="text"] { max-width: 28rem; }
:is(.frage, form.karte) select { max-width: 28rem; }

:is(.frage, form.karte) textarea {
    /* Fragetexte und Optionslisten brauchen Platz; 28rem waere hier zu eng. */
    max-width: 44rem;
    min-height: 5.5rem;
    line-height: 1.5;
    resize: vertical;
}

:is(.frage, form.karte) :is(input, select, textarea):focus-visible {
    outline: 3px solid #7ba7d4;
    outline-offset: 1px;
    border-color: var(--vfm-navy);
}

:is(.frage, form.karte) :is(input, select, textarea)[aria-invalid="true"] {
    border-color: #b3261e;
    background: #fff8f8;
}

/* --- Ja / Nein ----------------------------------------------------------------------- */

/* 252 der 721 Fragen sind Ja/Nein — das ist DAS Feld dieses Bogens. Zwei große Flächen statt
   zweier Punkte, weil der Bogen zum Teil auf dem Handy ausgefüllt wird. Der Radiopunkt bleibt
   sichtbar: eine Auswahl, die nur durch Farbe kenntlich ist, verliert jeder, der Farben nicht
   unterscheidet, und Screenreader brauchen ohnehin das echte Element. */
.jn {
    display: flex;
    gap: .5rem;
    max-width: 22rem;
}

.jn__option {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--tap);
    padding: .5rem .75rem;
    background: #fff;
    border: 1px solid #b9c3d0;
    border-radius: .5rem;
    font-weight: 500;
    cursor: pointer;
}

.jn__option:hover { border-color: var(--vfm-navy); }

.jn__option:has(input:checked) {
    background: var(--vfm-navy-100);
    border-color: var(--vfm-navy);
    color: var(--vfm-navy-700);
    box-shadow: inset 0 0 0 1px var(--vfm-navy);
}

.jn__option:has(input:focus-visible) {
    outline: 3px solid #7ba7d4;
    outline-offset: 1px;
}

.jn__option input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--vfm-navy); }

/* --- Mehrfachauswahl ----------------------------------------------------------------- */

.check-liste {
    display: grid;
    gap: .25rem;
    border: 1px solid var(--vfm-line);
    border-radius: .5rem;
    padding: .25rem;
    max-width: 34rem;
}

.check-liste__option {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    min-height: var(--tap);
    padding: .55rem .6rem;
    border-radius: .375rem;
    line-height: 1.4;
    cursor: pointer;
}

.check-liste__option:hover { background: var(--vfm-navy-050); }
.check-liste__option:has(input:checked) { background: var(--vfm-navy-100); font-weight: 500; }

.check-liste__option:has(input:focus-visible) {
    outline: 3px solid #7ba7d4;
    outline-offset: -1px;
}

.check-liste__option input,
.zustimmung input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .1rem;
    accent-color: var(--vfm-navy);
}

/* --- Zustimmung ---------------------------------------------------------------------- */

/* Der Text steht IN der Checkbox, es gibt also keine Beschriftung darüber. Die Einwilligungen
   nach Art. 9 Abs. 2 lit. a DSGVO sind lange Absätze — sie brauchen Zeilenhöhe und Kante. */
.zustimmung {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    /* Im Editor folgt die Box direkt auf ein Textarea und klebte daran. */
    margin: .6rem 0 .35rem;
    padding: .85rem 1rem;
    background: var(--vfm-navy-050);
    border: 1px solid var(--vfm-navy-100);
    border-radius: .5rem;
    line-height: 1.55;
    cursor: pointer;
}

.zustimmung:has(input:checked) { background: #f0f7f3; border-color: #b9dcc9; }
.zustimmung:has(input:focus-visible) { outline: 3px solid #7ba7d4; outline-offset: 1px; }

/* --- Datei-Upload -------------------------------------------------------------------- */

.datei { max-width: 34rem; }

.datei__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: 1.25rem 1rem;
    background: var(--vfm-navy-050);
    border: 2px dashed #a9bcd2;
    border-radius: .5rem;
    text-align: center;
    cursor: pointer;
}

.datei__zone > span { font-weight: 500; color: var(--vfm-navy); }
.datei__zone > small { color: var(--vfm-muted); font-size: .78rem; }
.datei__zone:hover { border-color: var(--vfm-navy); background: var(--vfm-navy-100); }

.datei__zone:has(input:focus-visible) {
    outline: 3px solid #7ba7d4;
    outline-offset: 2px;
}

.datei__liste {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
    display: grid;
    gap: .35rem;
}

.datei__liste li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .65rem;
    background: #fff;
    border: 1px solid var(--vfm-line);
    border-radius: .375rem;
    font-size: .875rem;
}

.datei__liste li > span { flex: 1 1 auto; word-break: break-word; }
.datei__liste li > small { flex: 0 0 auto; color: var(--vfm-muted); font-variant-numeric: tabular-nums; }

/* --- Schaltflächen, die es noch nicht gab -------------------------------------------- */

.btn-gefahr {
    background: #fff;
    border: 1px solid #d9a3a0;
    border-radius: .375rem;
    color: #96201a;
    font-weight: 500;
    cursor: pointer;
}

.btn-gefahr:hover { background: #b3261e; border-color: #b3261e; color: #fff; }

.btn-sekundaer {
    background: #fff;
    border: 1px solid #b9c3d0;
    border-radius: .375rem;
    color: var(--vfm-navy);
    font-weight: 500;
    cursor: pointer;
}

.btn-sekundaer:hover { background: var(--vfm-navy-050); border-color: var(--vfm-navy); }

.btn-klein {
    min-height: 2.25rem;
    padding: .3rem .65rem;
    font-size: .8125rem;
}

.btn-gefahr:focus-visible,
.btn-sekundaer:focus-visible {
    outline: 3px solid #7ba7d4;
    outline-offset: 1px;
}

/* --- Abschluss ----------------------------------------------------------------------- */

.aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1.5rem 0 2rem;
}

.aktionen .btn { min-height: var(--tap); }
.aktionen--zusammenfassung { justify-content: space-between; }

.zus-block { margin-bottom: 1.25rem; }

@media (min-width: 40rem) {
    .karte { padding: 1.5rem 1.75rem .5rem; }
    .karte > h2 { font-size: 1.25rem; }
    .frage { padding: 1.15rem 0; }
}

/* --- Lokale Anmeldung und Registrierung ---------------------------------------------- */

/* Anmelden und Code-Eingabe tragen wenig Inhalt — die zweispaltige Karte wäre dort halb leer. */
.login__card--schmal {
    max-width: 30rem;
}

@media (min-width: 48rem) {
    .login__card--schmal {
        max-width: 30rem;
        grid-template-columns: 1fr;
    }

    .login__card--schmal .login__brandpanel {
        padding: 1.75rem 2.25rem;
    }
}

/* Formular in einer Karte: dieselben Feldregeln wie im Kundenbogen, ohne .frage außen herum.
   Die Feldselektoren oben greifen über :is(.frage, form.karte) — hier kommt der Abstand dazu. */
.karte-form .label {
    margin-top: 1rem;
}

.karte-form .label:first-of-type {
    margin-top: 0;
}

/* :not(checkbox|radio) ist hier nicht Feinschliff, sondern notwendig: ohne die Ausnahme bekommt
   auch ein Ankreuzfeld `width: 100%` und `min-height: 48px` — es wird dann zu einem riesigen
   Kasten, der die halbe Zeile einnimmt. Genau so sah die Bereichsauswahl beim Anlegen eines
   Maklers aus. Die Groesse der Ankreuzfelder steht weiter unten bei .check-liste. */
.karte-form input:not([type="checkbox"]):not([type="radio"]),
.karte-form select,
.karte-form textarea {
    display: block;
    width: 100%;
    min-height: var(--tap);
    padding: .6rem .75rem;
    background: #fff;
    border: 1px solid #b9c3d0;
    border-radius: .5rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--vfm-ink);
}

.karte-form input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.karte-form select:focus-visible,
.karte-form textarea:focus-visible {
    outline: 3px solid #7ba7d4;
    outline-offset: 1px;
    border-color: var(--vfm-navy);
}

/* Ein Schlüssel, der abgetippt wird. Weiter Zeichenabstand, damit man nicht die Zeile verliert,
   und `user-select: all`, damit ein Klick ihn ganz markiert statt eine Gruppe. */
.totp-schluessel {
    margin: .25rem 0 .75rem;
    padding: .6rem .75rem;
    background: var(--vfm-code-bg);
    border-radius: .5rem;
    color: var(--vfm-code);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.05rem;
    letter-spacing: .08em;
    word-break: break-all;
    user-select: all;
}

/* Wiederherstellungscodes: die Seite wird ausgedruckt, deshalb eigener Geltungsbereich. */
.codes-seite .karte {
    padding-bottom: 1.25rem;
}

.codes-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .5rem;
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.codes-liste li {
    padding: .5rem .65rem;
    background: var(--vfm-code-bg);
    border-radius: .375rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1rem;
    letter-spacing: .05em;
    user-select: all;
}

@media print {
    .codes-seite .alert { border: 1pt solid #000; }
    .codes-liste li { background: transparent; border: .5pt solid #666; }
}

/* Der zweite, nachgeordnete Anmeldeweg. Gleiche Größe (beide sind echte Wege), aber ohne die
   Füllung — sonst konkurrieren zwei gleich laute Knöpfe. */
.login__action--zweit {
    margin-top: 1.25rem;
    background: #fff;
    border: 1px solid var(--vfm-line);
    color: var(--vfm-navy);
}

.login__action--zweit:hover,
.login__action--zweit:focus-visible {
    background: var(--vfm-navy-050);
    border-color: var(--vfm-navy);
    color: var(--vfm-navy);
}

/* Mehrere Felder in einer Zeile, sobald Platz ist — das Einladungsformular hat drei kurze. */
.feldzeile {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0 1rem;
    align-items: end;
}

.feldzeile .label {
    margin-top: 0;
}

/* --- JSON-Import ---------------------------------------------------------------------- */

.import-fehler,
.import-hinweise {
    margin: .5rem 0 0;
    padding-left: 1.25rem;
    line-height: 1.55;
}

.import-hinweise { padding: 1rem 1rem 1rem 2.25rem; }
.import-hinweise li + li { margin-top: .5rem; }

.import-liste {
    padding: 0 1rem 1rem;
    border-top: 1px solid #eef1f6;
}

.import-liste h3 { margin: 1rem 0 .35rem; color: var(--vfm-navy); }

.import-slugs {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: 0 0 .75rem;
}

/* Wegfallen und Dazukommen muessen sich unterscheiden, ohne dass man die Ueberschrift
   mitliest — und nicht nur ueber Farbe, deshalb zusaetzlich die Kante. */
.pill--weg {
    background: #fdeceb;
    color: #96201a;
    box-shadow: inset 2px 0 0 #b3261e;
}

.pill--neu {
    background: #eaf5ef;
    color: #0a3622;
    box-shadow: inset 2px 0 0 #1a7f4b;
}

/* Registrierungslink in der Einladungsliste — zugeklappt, damit Token nicht in jedem
   Bildschirmfoto stehen. */
.einladungslink summary {
    cursor: pointer;
    font-size: .8125rem;
    color: var(--vfm-link);
}

.einladungslink .totp-schluessel {
    margin: .35rem 0 0;
    font-size: .8rem;
    letter-spacing: 0;
    max-width: 34rem;
}