/* Besichtigungstool vfm — mobile first.
   The tool is used one-handed while walking through a building, so tap targets are large,
   the header stays put, and nothing important hides behind the notch or the home indicator. */

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

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

    --tap: 48px;
}

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

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;
}

.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;
    }
}

.role-badge {
    font-weight: 500;
}

.role-badge--admin { background: #7a4bd1; }
.role-badge--vfm { background: #0d6efd; }
.role-badge--makler { background: #0f766e; }
.role-badge--none { background: var(--state-no); }

/* --- 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__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. */

@media (min-width: 82rem) {
    .container-narrow,
    .app-header__inner {
        max-width: 76rem;
    }
}

@media (min-width: 100rem) {
    .container-narrow,
    .app-header__inner {
        max-width: 84rem;
    }
}

/* 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);
}