:root {
    --hv-bg: #ececef;
    --hv-surface: #f6f6f8;
    --hv-border: #c9c9cf;
    --hv-text: #2f2f34;
    --hv-muted: #6f6f78;
    --hv-accent: #6b5f78;
    --hv-accent-dark: #564b62;
    --hv-error-bg: #f2e8ea;
    --hv-error-border: #b78c96;
    --hv-error-text: #6d3843;
    --hv-sidebar-width: 220px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--hv-bg);
    color: var(--hv-text);
}

a {
    color: var(--hv-accent);
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.login-box {
    width: 100%;
    max-width: 420px;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    padding: 34px 38px 38px;
}

.login-logo {
    margin: 0 0 4px;
    font-size: 32px;
    font-weight: 700;
    color: var(--hv-accent);
    letter-spacing: 1px;
}

.login-subtitle {
    margin: 0 0 30px;
    color: var(--hv-muted);
    font-size: 15px;
}

.login-title {
    margin: 0 0 24px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hv-border);
    color: var(--hv-accent);
    font-size: 20px;
    font-weight: 600;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 600;
}

.form-input {
    width: 100%;
    height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--hv-border);
    border-radius: 0;
    background: #ffffff;
    color: var(--hv-text);
    font: inherit;
    outline: none;
}

/* Placeholder in Eingabefeldern etwas kompakter darstellen */
.form-input::placeholder {
    font-size: 12px;
}

.form-input:focus {
    border-color: var(--hv-accent);
}

.login-button {
    width: 100%;
    height: 44px;
    border: 1px solid var(--hv-accent-dark);
    border-radius: 0;
    background: var(--hv-accent);
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.login-button:hover {
    background: var(--hv-accent-dark);
}

.login-button:focus {
    outline: 2px solid var(--hv-accent);
    outline-offset: 2px;
}

.login-error {
    margin: 0 0 20px;
    padding: 11px 12px;
    border: 1px solid var(--hv-error-border);
    background: var(--hv-error-bg);
    color: var(--hv-error-text);
    font-size: 14px;
}

.login-footer {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid var(--hv-border);
    color: var(--hv-muted);
    font-size: 12px;
    text-align: center;
}


/* ---------------------------------------------------------
   HV26 Hauptanwendung
   --------------------------------------------------------- */

.hv-app {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* obere Hauptnavigation */

.hv-topbar {
    height: 78px;
    display: flex;
    align-items: stretch;
    background: #e2e2e6;
    border-bottom: 1px solid var(--hv-border);
}

.hv-brand {
    width: var(--hv-sidebar-width);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--hv-accent);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 1px;

    border-right: 1px solid var(--hv-border);
}


/* Hauptbereiche */

.hv-mainnav {
    display: flex;
    flex: 1;
    align-items: stretch;
}

.hv-mainnav-item {
    min-width: 92px;
    padding: 9px 14px 7px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    border-right: 1px solid var(--hv-border);

    color: var(--hv-text);
    text-decoration: none;
    font-size: 12px;
}

.hv-mainnav-item:hover {
    background: #d8d8de;
    color: var(--hv-accent);
}

.hv-mainnav-item.active {
    background: var(--hv-surface);
    color: var(--hv-accent);
    border-bottom: 3px solid var(--hv-accent);
}

.hv-mainnav-icon {
    width: 26px;
    height: 26px;
}

.hv-mainnav-icon svg {
    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

/* ---------------------------------------------------------
   Globale Hinweise im Kopfbereich
   --------------------------------------------------------- */

.hv-hinweise {
    flex: 0 0 auto;

    border-collapse: separate;
    border-spacing: 4px;

    padding: 0 10px;
}

.hv-hinweise td {
    height: 30px;

    padding: 0;

    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
}

/*
 * Hinweise innerhalb einer Tabellenzeile
 */

.hv-hinweise td > .hv-hinweis,
.hv-hinweise td > .hv-benachrichtigungen {
    display: inline-flex;
    vertical-align: middle;
}

.hv-hinweise td > .hv-hinweis + .hv-hinweis,
.hv-hinweise td > .hv-benachrichtigungen + .hv-hinweis {
    margin-left: 4px;
}


/*
 * Einzelner Hinweis
 */

.hv-hinweis {
    position: relative;

    width: 42px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--hv-surface);
    color: var(--hv-accent);

    border: 1px solid var(--hv-border);

    text-decoration: none;
    box-sizing: border-box;
}

.hv-hinweis:hover {
    background: #d8d8de;
    color: var(--hv-accent-dark);
    border-color: var(--hv-accent);
}


/*
 * Symbol
 */

.hv-hinweis-symbol {
    width: 30px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.hv-hinweis-symbol svg {
    width: 30px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/*
 * Zähler oben rechts
 */

.hv-hinweis-badge {
    position: absolute;

    top: -6px;
    right: -7px;

    min-width: 17px;
    height: 17px;

    padding: 0 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border-radius: 9px;

    background: #b42318;
    color: #ffffff;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    border: 2px solid #e2e2e6;
}

/*
 * Zweiter Mail-Zähler oben links:
 * offene E-Mails ohne aktive Zuständigkeit.
 */
.hv-hinweis-badge-links {
    left: -7px;
    right: auto;

    background: #2563eb;
}

.hv-hinweis-mail {
    margin-right: 4px;
}


/* Benutzer oben rechts */

.hv-user {
    min-width: 190px;
    padding: 0 18px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;

    font-size: 13px;

    border-left: 1px solid var(--hv-border);
}

.hv-user a {
    margin-top: 4px;
    font-size: 12px;
    text-decoration: none;
}

.hv-user a:hover {
    text-decoration: underline;
}


/* Bereich unterhalb der Iconleiste */

.hv-body {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}


/* linke Untermenü-Navigation */

.hv-sidebar {
    width: var(--hv-sidebar-width);
    flex-shrink: 0;

    background: #e5e5e8;
    border-right: 1px solid var(--hv-border);

    overflow: hidden;
}

.hv-sidebar-title {
    padding: 17px 18px 12px;

    color: var(--hv-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;

    border-bottom: 1px solid var(--hv-border);
}

.hv-subnav {
    display: flex;
    flex-direction: column;
}

.hv-subnav a {
    padding: 11px 18px;

    color: var(--hv-text);
    text-decoration: none;
    font-size: 14px;

    border-bottom: 1px solid #d3d3d7;
}

.hv-subnav a:hover {
    background: #d9d9de;
    color: var(--hv-accent);
}

.hv-subnav a.active {
    padding-left: 14px;

    background: var(--hv-surface);
    color: var(--hv-accent);

    border-left: 4px solid var(--hv-accent);

    font-weight: 600;
}


/* Arbeitsbereich */

.hv-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 28px 32px;

    background: var(--hv-bg);

    overflow: auto;
}

.hv-content h1 {
    margin: 0 0 22px;

    color: var(--hv-accent);
    font-size: 24px;
    font-weight: 600;

    padding-bottom: 10px;
    border-bottom: 1px solid var(--hv-border);
}

.hv-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
}

.hv-table th,
.hv-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--hv-border);
}

.hv-table th {
    background: #e2e2e6;
    color: var(--hv-accent);
    font-size: 13px;
    font-weight: 600;
}

.hv-table td {
    font-size: 14px;
}

.hv-table tbody tr:hover {
    background: #eeeeF1;
}

.hv-table-links td {
    padding: 0;
}

.hv-table-links td a,
.hv-table-links td a:visited,
.hv-table-links td a:hover,
.hv-table-links td a:active {
    display: block;
    width: 100%;
    padding: 10px 12px;
    color: var(--hv-text);
    text-decoration: none;
}

.hv-table-links tbody tr:hover td a {
    color: var(--hv-text);
}

.hv-form {
    max-width: 760px;
}

.hv-form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
}

.hv-page-header .hv-form-actions {
    margin-top: 0;
}

.hv-form-actions .login-button {
    width: auto;
    min-width: 180px;
    padding-left: 18px;
    padding-right: 18px;
}

.hv-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--hv-border);
    background: var(--hv-surface);
    color: var(--hv-text);
    text-decoration: none;
}

.hv-button-secondary:hover {
    background: #e2e2e6;
    color: var(--hv-accent);
}

.hv-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hv-border);
}

.hv-page-header h1 {
    margin: 0;
    padding: 0;
    border-bottom: 0;
}

/* =========================================================
   Buchhaltung - Kontextauswahl im Seitenkopf
   ========================================================= */

.hv-buchhaltung-kontext {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.hv-buchhaltung-kontext-titel {
    color: var(--hv-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.hv-buchhaltung-kontext-feld {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hv-buchhaltung-kontext-feld label {
    color: var(--hv-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.hv-buchhaltung-kontext-feld select {
    width: auto;
    min-width: 190px;
    height: 38px;
}

.hv-buchhaltung-kontext-feld:nth-of-type(3) select {
    min-width: 260px;
}

@media (max-width: 1100px) {

    .hv-buchhaltung-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .hv-buchhaltung-kontext {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }
}

.hv-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--hv-accent-dark);
    background: var(--hv-accent);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.hv-button-primary:hover {
    background: var(--hv-accent-dark);
    color: #ffffff;
}

.hv-error-box {
    padding: 18px 20px;
    background: var(--hv-error-bg);
    border: 1px solid var(--hv-error-border);
    color: var(--hv-error-text);
}

.hv-error-box p {
    margin: 0;
}


/*
 * Meldungen
 */

.hv-meldung {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--hv-border);
    background: var(--hv-surface);
}

.hv-meldung-symbol {
    flex: 0 0 54px;
}

.hv-meldung-symbol svg {
    display: block;
    width: 54px;
    height: 54px;
    fill: currentColor;
}

.hv-meldung-symbol-innen {
    fill: none;
    stroke: white;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hv-meldung-inhalt {
    flex: 1;
}

.hv-meldung-inhalt h1 {
    margin: 0 0 8px;
    font-size: 20px;
}

.hv-meldung-inhalt p {
    margin: 0;
}


/*
 * Meldungstypen
 */

.hv-meldung-stop,
.hv-meldung-fehler {
    border-left: 5px solid #a94442;
}

.hv-meldung-stop .hv-meldung-symbol,
.hv-meldung-fehler .hv-meldung-symbol {
    color: #a94442;
}

.hv-meldung-warnung {
    border-left: 5px solid #c28b20;
}

.hv-meldung-warnung .hv-meldung-symbol {
    color: #c28b20;
}

.hv-meldung-hinweis {
    border-left: 5px solid #557a9b;
}

.hv-meldung-hinweis .hv-meldung-symbol {
    color: #557a9b;
}

.hv-meldung-erfolg {
    border-left: 5px solid #56845c;
}

.hv-meldung-erfolg .hv-meldung-symbol {
    color: #56845c;
}

.hv-recht-bezeichnung {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hv-recht-icon,
.hv-recht-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hv-recht-icon svg,
.hv-recht-status svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hv-recht-icon {
    color: var(--hv-accent);
}

.hv-recht-status.erlaubt {
    color: #2f7d32;
}

.hv-recht-status.gesperrt {
    color: #a33a3a;
}


/*
 * Rechteübersicht Benutzer
 */

.hv-rechte-uebersicht th:not(:first-child),
.hv-rechte-uebersicht td:not(:first-child) {
    text-align: center;
}

.hv-rechte-uebersicht td:not(:first-child) .hv-recht-status {
    width: 100%;
    justify-content: center;
}


/*
 * Auswahlfelder in der Rechteverwaltung
 */

.hv-rechte-uebersicht select.form-input {
    min-width: 145px;
    width: 100%;
}

.hv-detail-table {
    width: 100%;
    table-layout: fixed;
}

.hv-detail-table th {
    width: 32%;
}

.hv-detail-table td {
    width: 68%;
}


/*
 * Suche in der Objektnavigation
 */

.hv-sidebar-search {
    padding: 2px;
    padding-bottom: 10px;
    background: #e5e5e8;
    border-bottom: 1px solid #d3d3d7;
}

.hv-sidebar-search-input {
    display: block;
    width: 100%;
    height: 42px;

    padding: 0 12px;

    background: #ffffff;
    color: var(--hv-text);

    border: 1px solid var(--hv-border);
    border-radius: 0;

    font-family: inherit;
    font-size: 14px;
}

.hv-sidebar-search-input::placeholder {
    color: var(--hv-muted);
}

.hv-sidebar-search-input:hover {
    border-color: #aaaab2;
}

.hv-sidebar-search-input:focus {
    outline: none;
    border-color: var(--hv-accent);
}

.hv-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.hv-detail-box {
    display: flex;
    flex-direction: column;
}

.hv-detail-box h2 {
    margin-top: 0;
}

.hv-detail-box .hv-detail-table {
    flex: 1;
    margin-bottom: 0;
}

.hv-detail-box .hv-detail-table tbody,
.hv-detail-box .hv-detail-table tr {
    height: 100%;
}

@media (max-width: 900px) {
    .hv-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Personen - aktuelle Mietverhältnisse im festen Kopf
   ========================================================= */

.hv-mietkopf {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: 235px minmax(0, 1fr);

    border: 1px solid var(--hv-border);
    background: var(--hv-surface);
}


/*
 * Linker fester Bereich.
 */

.hv-mietkopf-titel {
    display: flex;
    align-items: center;

    padding: 12px 16px;

    color: var(--hv-accent);

    font-size: 16px;
    font-weight: 600;
}


/*
 * Rechte Seite mit einem oder mehreren
 * aktiven Mietverhältnissen.
 */

.hv-mietkopf-vertraege {
    min-width: 0;
}


/*
 * Eine Zeile = ein aktives Mietverhältnis.
 */

.hv-mietkopf-vertrag {
    display: flex;
    align-items: center;

    min-width: 0;
    min-height: 54px;

    padding: 0 24px;

    gap: 72px;
}


/*
 * Mehrere aktive Mietverhältnisse werden
 * als einzelne Zeilen voneinander getrennt.
 */

.hv-mietkopf-vertrag + .hv-mietkopf-vertrag {
    border-top: 1px solid var(--hv-border);
}


/*
 * Fachliche Gruppe innerhalb einer Vertragszeile.
 */

.hv-mietkopf-gruppe {
    display: flex;
    align-items: center;

    flex: 0 0 auto;
    min-width: 0;

    gap: 32px;
}


/*
 * Stellung, Vertrag, Gebäude und Einheit
 * gehören gemeinsam zum Mietverhältnis.
 */

.hv-mietkopf-vertragsgruppe {
    gap: 34px;
}


/*
 * Kontostand, offene Posten, letzte Buchung und
 * letzte Wertstellung bilden gemeinsam den
 * finanziellen Schnellüberblick.
 */

.hv-mietkopf-finanzgruppe {
    flex: 1 1 auto;

    justify-content: space-between;

    gap: 24px;
}


/*
 * Eine Information aus Label + Wert.
 */

.hv-mietkopf-info {
    display: flex;
    align-items: baseline;

    min-width: 0;

    gap: 11px;
}

.hv-mietkopf-label {
    flex: 0 0 auto;

    color: var(--hv-accent);

    font-size: 12px;
    font-weight: 600;
}

.hv-mietkopf-wert {
    min-width: 0;

    color: var(--hv-text);
    font-size: 14px;

    overflow-wrap: anywhere;
}

.hv-mietkopf-wert a {
    color: var(--hv-accent);
    font-weight: 600;
}


/*
 * Noch nicht verfügbare Buchhaltungswerte
 * zurückhaltend darstellen.
 */

.hv-mietkopf-platzhalter {
    color: var(--hv-muted);
}


/*
 * Kleine Fenster:
 *
 * Erst hier lösen wir die einzeilige Desktopdarstellung
 * auf. Der Titel steht dann über den Vertragsdaten.
 */

@media (max-width: 750px) {

    .hv-mietkopf {
        grid-template-columns: 1fr;
    }

    .hv-mietkopf-titel {
        border-bottom: 1px solid var(--hv-border);
    }

    .hv-mietkopf-vertrag {
        flex-direction: column;
        align-items: stretch;

        gap: 10px;

        padding-top: 10px;
        padding-bottom: 10px;
    }

    .hv-mietkopf-gruppe {
        flex-wrap: wrap;
        gap: 10px 24px;
    }

    .hv-mietkopf-finanzgruppe {
        justify-content: flex-start;
    }

}

/*
 * Gebäude in der Objektnavigation
 */

.hv-sidebar-gebaeude {
    background: #ddddE1;
    border-bottom: 1px solid #d3d3d7;
}

.hv-subnav .hv-sidebar-gebaeude-item {
    display: block;
    padding: 8px 12px 8px 34px;

    color: var(--hv-muted);
    text-decoration: none;
    font-size: 13px;

    border-bottom: 1px solid #d0d0d5;
}

.hv-subnav .hv-sidebar-gebaeude-item:last-child {
    border-bottom: 0;
}

.hv-subnav .hv-sidebar-gebaeude-item:hover {
    background: #d4d4d9;
    color: var(--hv-accent);
}

.hv-subnav .hv-sidebar-gebaeude-item.active {
    padding-left: 30px;

    background: var(--hv-surface);
    color: var(--hv-accent);

    border-left: 4px solid var(--hv-accent);

    font-weight: 600;
}

/*
 * Aktionsfelder in der Liegenschaftsübersicht
 */

.hv-liegenschaften-table .hv-liegenschaft-aktionen-kopf {
    width: 126px;
    min-width: 126px;
    padding: 0;
}

.hv-liegenschaften-table .hv-liegenschaft-aktionen {
    width: 126px;
    min-width: 126px;
    padding: 6px;
    vertical-align: middle;
}

.hv-liegenschaft-aktionen-grid {
    display: grid;
    grid-template-columns: repeat(3, 34px);
    grid-template-rows: repeat(2, 34px);
    gap: 4px;

    width: max-content;
    margin: 0 auto;
}

.hv-table-links td .hv-liegenschaft-aktion,
.hv-table-links td .hv-liegenschaft-aktion:visited,
.hv-table-links td .hv-liegenschaft-aktion:hover,
.hv-table-links td .hv-liegenschaft-aktion:active {
    width: 34px;
    height: 34px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--hv-surface);
    color: var(--hv-accent);

    border: 1px solid var(--hv-border);

    text-decoration: none;
}

.hv-table-links td .hv-liegenschaft-aktion:hover {
    background: #e2e2e6;
    border-color: var(--hv-accent);
    color: var(--hv-accent-dark);
}

.hv-liegenschaft-aktion svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hv-table-links td .hv-liegenschaft-aktion.ist-aktiv {
    background: #e6efe7;
    border-color: #7da182;
    color: #56845c;
}

.hv-table-links td .hv-liegenschaft-aktion.ist-aktiv:hover {
    background: #dce9de;
    border-color: #56845c;
    color: #456c4a;
}

/*
 * Aktive Liegenschaft oberhalb der Übersicht
 */

.hv-aktive-liegenschaft {
    display: flex;
    align-items: center;

    margin-bottom: 12px;

    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-left: 4px solid var(--hv-accent);
}

.hv-aktive-liegenschaft-label {
    padding: 10px 14px;

    color: var(--hv-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;

    border-right: 1px solid var(--hv-border);
}

.hv-aktive-liegenschaft-info {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 10px 14px;

    color: var(--hv-text);
}

.hv-aktive-liegenschaft-info strong {
    color: var(--hv-accent);
}

/*
.hv-aktive-liegenschaft-link {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 10px 14px;

    color: var(--hv-text);
    text-decoration: none;
}

.hv-aktive-liegenschaft-link strong {
    color: var(--hv-accent);
}

.hv-aktive-liegenschaft-link:hover {
    color: var(--hv-accent);
} */

.hv-aktive-liegenschaft-aktionen {
    display: flex;
    align-items: center;
    gap: 4px;

    padding: 4px 6px;
    border-right: 1px solid var(--hv-border);
}

.hv-aktive-liegenschaft-aktionen .hv-liegenschaft-aktion,
.hv-aktive-liegenschaft-aktionen .hv-liegenschaft-aktion:visited {
    width: 34px;
    height: 34px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    background: var(--hv-surface);
    color: var(--hv-accent);

    border: 1px solid var(--hv-border);

    text-decoration: none;
}

.hv-aktive-liegenschaft-aktionen .hv-liegenschaft-aktion:hover {
    background: #e2e2e6;
    border-color: var(--hv-accent);
    color: var(--hv-accent-dark);
}

.hv-aktive-liegenschaft-aktionen .hv-liegenschaft-aktion svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * Kalender
 */

.hv-kalender-layout {
    display: flex;
    min-height: 600px;
    margin-top: 20px;
    border: 1px solid var(--hv-border);
    background: #fff;
}

.hv-kalender-sidebar {
    width: 220px;
    flex-shrink: 0;
    padding: 16px;
    box-sizing: border-box;
    border-right: 1px solid var(--hv-border);
    background: var(--hv-surface);
}

.hv-kalender-sidebar h2 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--hv-text);
}

.hv-kalender-liste {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hv-kalender-eintrag {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 3px 4px;
    box-sizing: border-box;
    cursor: pointer;
    color: var(--hv-text);
}

.hv-kalender-eintrag:hover {
    background: #e2e2e6;
}

.hv-kalender-checkbox {
    margin: 0;
    cursor: pointer;
}

.hv-kalender-farbe {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border: 1px solid var(--hv-border);
    background: var(--hv-accent);
}

.hv-kalender-bezeichnung {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hv-kalender-hauptbereich {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hv-kalender-toolbar {
    min-height: 48px;
    padding: 12px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--hv-border);
    background: var(--hv-surface);
}

.hv-kalender-inhalt {
    flex: 1;
    min-height: 500px;
    padding: 16px;
    box-sizing: border-box;
    background: #fff;
}

/* =========================================================
   Digitale Personenakte
   ========================================================= */

.hv-aktenkopf {
    margin-top: 24px;
    margin-bottom: 20px;
}

.hv-aktenkopf h2 {
    margin-bottom: 10px;
}


/* Tab-Leiste */

.hv-akten-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid #d8d3df;
}


/* Einzelner Tab */

.hv-akten-tab {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid #d8d3df;
    border-bottom: 0;
    margin-right: 4px;
    font-weight: 600;
}


/* Aktiver Tab */

.hv-akten-tab-aktiv {
    color: #49375f;
    background: #f3f0f6;
    border-color: #b7abc5;
}


/* Noch nicht verfügbare Tabs */

.hv-akten-tab-inaktiv {
    color: #999;
    background: #eeeeee;
    cursor: not-allowed;
}


/* Hauptbereich der Personenakte */

.hv-akten-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}


/* Eine Spalte der Akte */

.hv-akten-spalte {
    min-width: 0;
}


/* Abstand zwischen Bereichen innerhalb einer Spalte */

.hv-akten-bereich {
    margin-bottom: 24px;
}

.hv-akten-bereich h2 {
    margin-top: 0;
}


/* Auf kleineren Bildschirmen wieder untereinander */

@media (max-width: 1000px) {

    .hv-akten-layout {
        grid-template-columns: 1fr;
    }

}


/* Tabs auf kleinen Displays ebenfalls umbrechen */

@media (max-width: 700px) {

    .hv-akten-tabs {
        gap: 4px;
        border-bottom: 0;
    }

    .hv-akten-tab {
        border-bottom: 1px solid #d8d3df;
        margin-right: 0;
    }

}

/*
 * Monatskalender
 */

.hv-kalender-navigation {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hv-kalender-monat {
    min-width: 110px;
    text-align: center;
    font-weight: 600;
    color: var(--hv-text);
}

.hv-monatskalender {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--hv-border);
    border-left: 1px solid var(--hv-border);
}

.hv-monatskalender-wochentag {
    padding: 8px;
    box-sizing: border-box;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    background: var(--hv-surface);
    border-right: 1px solid var(--hv-border);
    border-bottom: 1px solid var(--hv-border);
}

.hv-monatskalender-tag {
    position: relative;
    min-height: 110px;
    padding: 6px;
    box-sizing: border-box;
    background: #fff;
    border-right: 1px solid var(--hv-border);
    border-bottom: 1px solid var(--hv-border);
}

.hv-monatskalender-tag-aussen {
    background: var(--hv-surface);
    color: var(--hv-muted);
}

.hv-monatskalender-tagnummer {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    font-size: 13px;
}

.hv-monatskalender-tag-heute .hv-monatskalender-tagnummer {
    background: var(--hv-accent);
    color: #fff;
}

.hv-monatskalender-termine {
    margin-top: 4px;
}

.hv-kalender-pfeil {
    font-size: 20px;
    line-height: 1;
}

.hv-kalender-ansichten {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/*
 * Wochenkalender
 */

.hv-wochenkalender {
    display: grid;
    grid-template-columns: 60px repeat(7, minmax(100px, 1fr));
    border-top: 1px solid var(--hv-border);
    border-left: 1px solid var(--hv-border);
}

.hv-wochenkalender-zeitkopf,
.hv-wochenkalender-kopf {
    min-height: 50px;
    box-sizing: border-box;
    border-right: 1px solid var(--hv-border);
    border-bottom: 1px solid var(--hv-border);
    background: var(--hv-surface);
}

.hv-wochenkalender-kopf {
    padding: 6px;
    text-align: center;
}

.hv-wochenkalender-wochentag {
    font-size: 12px;
    color: var(--hv-muted);
}

.hv-wochenkalender-datum {
    margin-top: 2px;
    font-size: 16px;
    font-weight: 600;
    color: var(--hv-text);
}

.hv-wochenkalender-zeit {
    min-height: 48px;
    padding: 4px 6px;
    box-sizing: border-box;
    text-align: right;
    font-size: 11px;
    color: var(--hv-muted);
    border-right: 1px solid var(--hv-border);
    border-bottom: 1px solid var(--hv-border);
    height: 60px;
}

.hv-wochenkalender-feld {
    min-height: 48px;
    box-sizing: border-box;
    border-right: 1px solid var(--hv-border);
    border-bottom: 1px solid var(--hv-border);
    background: #fff;
    position: relative;
    overflow: visible;
    height: 60px;
}

.hv-wochenkalender-feld-heute {
    background: var(--hv-surface);
}

.hv-wochenkalender-termin {
    position: absolute;
    left: 2px;
    right: 2px;
    z-index: 2;
    padding: 3px 5px;
    min-height: 18px;
    font-size: 12px;
    line-height: 1.2;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
}

.hv-wochenkalender-kopf-heute .hv-wochenkalender-datum {
    color: var(--hv-accent);
}

/*
 * Tageskalender
 */

.hv-tageskalender {
    border-top: 1px solid var(--hv-border);
    border-left: 1px solid var(--hv-border);
}

.hv-tageskalender-kopf {
    display: grid;
    grid-template-columns: 60px 1fr;
}

.hv-tageskalender-kopf-zeit,
.hv-tageskalender-kopf-datum {
    min-height: 50px;
    box-sizing: border-box;
    border-right: 1px solid var(--hv-border);
    border-bottom: 1px solid var(--hv-border);
    background: var(--hv-surface);
}

.hv-tageskalender-kopf-datum {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--hv-text);
}

.hv-tageskalender-kopf-heute {
    color: var(--hv-accent);
}

.hv-tageskalender-raster {
    display: grid;
    grid-template-columns: 60px 1fr;
}

.hv-tageskalender-zeit {
    min-height: 48px;
    padding: 4px 6px;
    box-sizing: border-box;
    text-align: right;
    font-size: 11px;
    color: var(--hv-muted);
    border-right: 1px solid var(--hv-border);
    border-bottom: 1px solid var(--hv-border);
    height: 60px;
}

.hv-tageskalender-termin {
    position: absolute;
    z-index: 2;
    padding: 3px 5px;
    min-height: 18px;
    font-size: 12px;
    line-height: 1.2;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
}

.hv-tageskalender-feld {
    min-height: 48px;
    box-sizing: border-box;
    border-right: 1px solid var(--hv-border);
    border-bottom: 1px solid var(--hv-border);
    background: #fff;
    position: relative;
    overflow: visible;
    height: 60px;
}

.hv-monatskalender-tag-wochenende {
    background: #f1f1f3;
}

.hv-monatskalender-tag-feiertag {
    background:
        repeating-linear-gradient(
        -45deg,
        #e7e4ea,
        #e7e4ea 8px,
        #555 8px,
        #555 9px
        );
}

.hv-wochenkalender-kopf-wochenende,
.hv-wochenkalender-feld-wochenende {
    background: #f1f1f3;
}

.hv-wochenkalender-kopf-feiertag,
.hv-wochenkalender-feld-feiertag {
    background:
        repeating-linear-gradient(
        -45deg,
        #e7e4ea,
        #e7e4ea 8px,
        #555 8px,
        #555 9px
        );
}

.hv-tageskalender-kopf-wochenende,
.hv-tageskalender-feld-wochenende {
    background: #f1f1f3;
}

.hv-tageskalender-kopf-feiertag,
.hv-tageskalender-feld-feiertag {
    background:
        repeating-linear-gradient(
        -45deg,
        #e7e4ea,
        #e7e4ea 8px,
        #555 8px,
        #555 9px
        );
}

.hv-monatskalender-termine {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
}

.hv-monatskalender-termin {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 5px;
    min-width: 0;
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
    overflow: hidden;
    cursor: pointer;
}

.hv-monatskalender-termin-uhrzeit {
    flex: 0 0 auto;
    font-weight: 600;
}

.hv-monatskalender-termin-titel {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   Verlauf - aufklappbarer neuer Eintrag
   ========================================================= */

.hv-verlauf-neu {
    width: 100%;
    margin-bottom: 24px;

    border: 1px solid #d8d3df;
    background: #f7f6f9;
}

.hv-verlauf-neu-kopf {
    padding: 12px 16px;

    cursor: pointer;

    color: #49375f;
    font-weight: 600;

    list-style: none;
}

.hv-verlauf-neu-kopf::-webkit-details-marker {
    display: none;
}

.hv-verlauf-neu-kopf::before {
    content: '+';

    display: inline-block;

    margin-right: 8px;

    font-weight: 700;
}

.hv-verlauf-neu[open] .hv-verlauf-neu-kopf::before {
    content: '−';
}

.hv-verlauf-neu[open] .hv-verlauf-neu-kopf {
    border-bottom: 1px solid #d8d3df;
    background: #f1eef5;
}


/* =========================================================
   Verlauf - Formularinhalt
   ========================================================= */

.hv-verlauf-neu-inhalt {
    width: 100%;
    padding: 20px 22px 18px;
}


/*
 * Zwei Hauptspalten:
 *
 * links  = Art, Datum, Uhrzeit, Titel
 * rechts = Notiz
 */

.hv-verlauf-form-layout {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;

    width: 100%;

    align-items: stretch;
}


/*
 * Allgemeine Formularspalte
 */

.hv-verlauf-form-spalte {
    display: flex;
    flex-direction: column;

    gap: 16px;

    min-width: 0;
}


/*
 * Einzelnes Formularfeld
 */

.hv-verlauf-form-feld {
    display: flex;
    flex-direction: column;

    gap: 6px;

    min-width: 0;
}

.hv-verlauf-form-feld label {
    font-weight: 600;
}


/*
 * Eingabefelder
 */

.hv-verlauf-form-feld input,
.hv-verlauf-form-feld select,
.hv-verlauf-form-feld textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 9px 10px;

    border: 1px solid #cfcad6;
    border-radius: 0;

    background: #ffffff;
    color: #222222;

    font: inherit;
}

.hv-verlauf-form-feld input,
.hv-verlauf-form-feld select {
    min-height: 38px;
}


/*
 * Fokus
 */

.hv-verlauf-form-feld input:focus,
.hv-verlauf-form-feld select:focus,
.hv-verlauf-form-feld textarea:focus {
    outline: none;

    border-color: #78688b;

    box-shadow:
        0 0 0 1px #78688b;
}


/* =========================================================
   Verlauf - große Notiz rechts
   ========================================================= */

.hv-verlauf-notiz-spalte {
    display: flex;

    height: 100%;
}

.hv-verlauf-notiz-feld {
    display: flex;
    flex-direction: column;

    flex: 1;

    height: 100%;
}

.hv-verlauf-notiz-feld textarea {
    flex: 1;

    width: 100%;

    min-height: 100%;
    height: 100%;

    resize: vertical;
}


/* =========================================================
   Verlauf - Aktionen
   ========================================================= */

.hv-verlauf-form-aktionen {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 20px;
    padding-top: 16px;

    border-top: 1px solid #ded9e4;
}


/*
 * Pflichtfeld-Markierung
 */

.hv-pflichtfeld {
    color: #8a3344;
}


/*
 * Abstand zur Verlaufstabelle
 */

.hv-verlauf-eintraege {
    margin-top: 20px;
}


/* =========================================================
   Verlauf - kleinere Bildschirme
   ========================================================= */

@media (max-width: 900px) {

    .hv-verlauf-form-layout {
        grid-template-columns: 1fr;
    }

    .hv-verlauf-notiz-feld textarea {
        min-height: 180px;
        height: auto;
    }

}


@media (max-width: 600px) {

    .hv-verlauf-neu-inhalt {
        padding: 16px;
    }

    .hv-verlauf-form-aktionen {
        flex-direction: column;
        align-items: stretch;
    }

}

/* =========================================================
   Verlauf - Änderungsgrund
   ========================================================= */

.hv-verlauf-aenderungsgrund {
    margin-top: 18px;
}

.hv-verlauf-aenderungsgrund small {
    color: var(--hv-muted);
    font-weight: normal;
}

/* =========================================================
   Verlauf - Textdarstellung
   ========================================================= */

/*
 * Kurze Verlaufstexte
 *
 * "pre-wrap" sorgt dafür, dass eingegebene
 * Zeilenumbrüche und Leerzeilen sichtbar bleiben.
 */

.hv-verlauf-text-kurz {
    white-space: pre-line;
    overflow-wrap: anywhere;
    line-height: 1.5;
    text-align: left;
}


/*
 * Aufklappbarer langer Verlaufstext
 */

.hv-verlauf-text-details {
    min-width: 220px;
}


/*
 * Standard-Pfeil von <details> entfernen
 */

.hv-verlauf-text-summary {
    display: block;

    cursor: pointer;

    list-style: none;
}

.hv-verlauf-text-summary::-webkit-details-marker {
    display: none;
}


/*
 * Vorschau eines langen Textes
 */

.hv-verlauf-text-vorschau {
    display: block;

    margin-bottom: 6px;

    white-space: pre-wrap;
    overflow: hidden;
    overflow-wrap: anywhere;

    line-height: 1.45;
    max-height: 5.8em;

    color: var(--hv-text);
}


/*
 * Link zum Öffnen
 */

.hv-verlauf-text-oeffnen {
    display: inline-block;

    color: var(--hv-accent);
    font-size: 13px;
    font-weight: 600;
}

.hv-verlauf-text-oeffnen:hover {
    color: var(--hv-accent-dark);
    text-decoration: underline;
}


/*
 * "Einklappen" ist zunächst unsichtbar
 */

.hv-verlauf-text-schliessen {
    display: none;

    color: var(--hv-accent);
    font-size: 13px;
    font-weight: 600;
}


/*
 * Im geöffneten Zustand:
 * Vorschau und Öffnen-Link ausblenden,
 * Einklappen-Link anzeigen.
 */

.hv-verlauf-text-details[open]
.hv-verlauf-text-vorschau,

.hv-verlauf-text-details[open]
.hv-verlauf-text-oeffnen {
    display: none;
}

.hv-verlauf-text-details[open]
.hv-verlauf-text-schliessen {
    display: inline-block;
}


/*
 * Vollständiger Text eines aufgeklappten Eintrags
 */

.hv-verlauf-text-voll {
    margin-bottom: 8px;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    line-height: 1.5;
    color: var(--hv-text);
}


/* =========================================================
   Verlauf - Änderungshistorie
   ========================================================= */

.hv-verlauf-historie-zeile > td {
    padding: 0 !important;
    background: #f1eef5;
}

.hv-verlauf-historie {
    padding: 18px 20px;

    border-left: 4px solid var(--hv-accent);
}

.hv-verlauf-historie h3 {
    margin: 0 0 14px;

    color: var(--hv-accent);
    font-size: 16px;
}

.hv-verlauf-historie-eintrag {
    padding: 14px 16px;
    margin-bottom: 12px;

    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
}

.hv-verlauf-historie-eintrag:last-child {
    margin-bottom: 0;
}

.hv-verlauf-historie-kopf {
    margin-bottom: 10px;
    padding-bottom: 8px;

    color: var(--hv-muted);
    font-size: 13px;

    border-bottom: 1px solid var(--hv-border);
}

.hv-verlauf-historie-kopf strong {
    color: var(--hv-text);
}

.hv-verlauf-historie-grund {
    margin-bottom: 12px;
    padding: 8px 10px;

    background: #ece8f1;
    border-left: 3px solid var(--hv-accent);
}

.hv-verlauf-historie-daten {
    display: grid;
    gap: 8px;
}

.hv-verlauf-historie-text {
    margin-top: 4px;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    line-height: 1.5;
}


/* =========================================================
   Verlauf - Status / Historienlink
   ========================================================= */

.hv-verlauf-status {
    min-width: 145px;
}

.hv-verlauf-status-bearbeitet {
    display: block;

    margin-bottom: 4px;

    color: var(--hv-muted);
    font-size: 12px;
}


/* =========================================================
   Verlauf - kleinere Bildschirme
   ========================================================= */

@media (max-width: 900px) {

    .hv-verlauf-text-details {
        min-width: 160px;
    }

    .hv-verlauf-historie {
        padding: 14px;
    }

}

/* =========================================================
   Verlauf - Werkzeugleiste
   Neuer Eintrag + Filter nebeneinander
   ========================================================= */

.hv-verlauf-werkzeuge {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(320px, 1fr)
        );

    gap: 14px;

    margin-bottom: 24px;

    align-items: start;
}


/*
 * Die Kästen liegen jetzt im gemeinsamen Grid.
 * Deshalb übernimmt der äußere Bereich den Abstand.
 */

.hv-verlauf-werkzeuge > .hv-verlauf-neu {
    margin-bottom: 0;
}


/* =========================================================
   Verlauf - Filter
   ========================================================= */

.hv-verlauf-filter-layout {
    display: grid;
    grid-template-columns: repeat(
        2,
        minmax(0, 1fr)
        );

    gap: 24px;

    width: 100%;
}


.hv-verlauf-filter-spalte {
    display: flex;
    flex-direction: column;

    gap: 16px;

    min-width: 0;
}


.hv-verlauf-filter-feld {
    display: flex;
    flex-direction: column;

    gap: 6px;

    min-width: 0;
}


.hv-verlauf-filter-feld label {
    font-weight: 600;
}


.hv-verlauf-filter-feld input,
.hv-verlauf-filter-feld select {
    width: 100%;
    min-height: 38px;

    padding: 9px 10px;

    border: 1px solid #cfcad6;
    border-radius: 0;

    background: #ffffff;
    color: #222222;

    font: inherit;
}


.hv-verlauf-filter-feld input:focus,
.hv-verlauf-filter-feld select:focus {
    outline: none;

    border-color: #78688b;

    box-shadow:
        0 0 0 1px #78688b;
}


/*
 * Filteraktionen
 */

.hv-verlauf-filter .hv-verlauf-form-aktionen {
    margin-top: 20px;
}


/* =========================================================
   Verlauf - Werkzeugleiste auf kleinen Bildschirmen
   ========================================================= */

@media (max-width: 900px) {

    .hv-verlauf-filter-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .hv-verlauf-werkzeuge {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   Personenübersicht - Schnellaktionen
   ========================================================= */

.hv-personen-table .hv-personen-aktionen-kopf {
    width: 92px;
    min-width: 92px;
    text-align: center;
}

.hv-personen-table .hv-personen-aktionen {
    width: 92px;
    min-width: 92px;
    padding: 6px;
    vertical-align: middle;
}


/*
 * Schnellzugriffe einer Person
 */

.hv-personen-aktionen-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 34px);

    gap: 4px;

    width: max-content;
    margin: 0 auto;
}


/*
 * Einzelner Schnellzugriff
 */

.hv-table-links td .hv-personen-aktion,
.hv-table-links td .hv-personen-aktion:visited,
.hv-table-links td .hv-personen-aktion:hover,
.hv-table-links td .hv-personen-aktion:active {
    width: 34px;
    height: 34px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--hv-surface);
    color: var(--hv-accent);

    border: 1px solid var(--hv-border);

    text-decoration: none;
}


/*
 * Maus über einem Schnellzugriff
 */

.hv-table-links td .hv-personen-aktion:hover {
    background: #e2e2e6;
    border-color: var(--hv-accent);
    color: var(--hv-accent-dark);
}


/*
 * SVG-Symbole
 */

.hv-personen-aktion svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   Verlauf - Änderungshistorie Vergleich / Diff
   ========================================================= */

/*
 * Vorher und Danach nebeneinander.
 */

.hv-verlauf-historie-vergleich {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}


/*
 * Einzelne Vergleichsseite.
 *
 * Keine zusätzlichen großen Innenabstände.
 */

.hv-verlauf-historie-version {
    min-width: 0;
}

.hv-verlauf-historie-version h4 {
    margin: 0 0 10px;
    padding-bottom: 6px;

    color: var(--hv-accent);
    font-size: 14px;

    border-bottom: 1px solid var(--hv-border);
}


/*
 * Einzelne Zeile innerhalb von Vorher / Danach.
 */

.hv-verlauf-historie-feld {
    margin: 0 0 8px;
    padding: 0;

    line-height: 1.45;
}

.hv-verlauf-historie-feld:last-child {
    margin-bottom: 0;
}


/*
 * WICHTIG:
 *
 * Die Container dürfen NICHT pre-wrap verwenden.
 * Sonst werden Einrückungen und Leerzeilen aus der
 * Twig-Datei auf der Webseite sichtbar.
 */

.hv-verlauf-historie-text,
.hv-verlauf-historie-feld .hv-verlauf-text-voll,
.hv-verlauf-historie-feld .hv-verlauf-text-vorschau {
    white-space: normal;
}


/*
 * Nur die eigentlichen Textteile erhalten pre-wrap.
 *
 * Dadurch bleiben echte Zeilenumbrüche aus einer
 * eingegebenen Notiz erhalten, ohne dass die
 * Einrückungen aus Twig sichtbar werden.
 */

.hv-verlauf-diff-alt,
.hv-verlauf-diff-alt-gleich,
.hv-verlauf-diff-neu,
.hv-verlauf-diff-neu-gleich {
    white-space: normal;
    overflow-wrap: anywhere;
}


/*
 * Details innerhalb der Änderungshistorie sollen
 * keinen künstlichen Einzug besitzen.
 */

.hv-verlauf-historie-feld .hv-verlauf-text-details {
    min-width: 0;
    width: 100%;

    margin: 4px 0 0;
    padding: 0;
}


/*
 * Auch Summary ohne Einzug.
 */

.hv-verlauf-historie-feld .hv-verlauf-text-summary {
    margin: 0;
    padding: 0;
}


/*
 * Vorschautext kompakt.
 */

.hv-verlauf-historie-feld .hv-verlauf-text-vorschau {
    margin: 0 0 4px;
    padding: 0;

    line-height: 1.45;
}


/*
 * Vollständiger Text nach dem Aufklappen.
 */

.hv-verlauf-historie-feld .hv-verlauf-text-voll {
    margin: 6px 0 0;
    padding: 0;

    line-height: 1.45;
}


/*
 * ALTER Wert:
 * unveränderter Text grau,
 * tatsächlich geänderter Teil rot und fett.
 */

.hv-verlauf-diff-alt-gleich {
    color: #777780;
}

.hv-verlauf-diff-alt {
    color: #a33a3a;
    font-weight: 700;
}


/*
 * NEUER Wert:
 * unveränderter Text normal,
 * Korrektur grün und fett.
 */

.hv-verlauf-diff-neu-gleich {
    color: var(--hv-text);
}

.hv-verlauf-diff-neu {
    color: #2f7d32;
    font-weight: 700;
}


/*
 * Automatisch erzeugte Verlaufseinträge
 * optisch etwas zurücknehmen.
 */

.hv-verlauf-automatisch td {
    color: var(--hv-muted);
}

.hv-verlauf-automatisch-hinweis {
    color: var(--hv-muted);
}


/*
 * Auf kleineren Bildschirmen Vorher / Danach
 * wieder untereinander.
 */

@media (max-width: 900px) {

    .hv-verlauf-historie-vergleich {
        grid-template-columns: 1fr;
        gap: 14px;
    }

}

/* =========================================================
   Verlauf - normale Tabellenanzeige kompakter
   ========================================================= */

/*
 * In der normalen Verlaufstabelle soll die Vorschau
 * keine Leerzeichen / Einrückungen aus Twig übernehmen.
 */

.hv-verlauf-eintraege .hv-verlauf-text-vorschau {
    white-space: pre-line;

    margin: 0 0 4px;
    padding: 0;

    line-height: 1.45;
}


/*
 * Details selbst ohne zusätzliche Einrückung.
 */

.hv-verlauf-eintraege .hv-verlauf-text-details {
    margin: 0;
    padding: 0;
}


/*
 * Summary ebenfalls bündig halten.
 */

.hv-verlauf-eintraege .hv-verlauf-text-summary {
    margin: 0;
    padding: 0;
}


/*
 * Der vollständig aufgeklappte Text darf echte
 * Zeilenumbrüche der eingegebenen Notiz weiterhin
 * darstellen.
 */

.hv-verlauf-eintraege .hv-verlauf-text-voll {
    margin: 6px 0 0;
    padding: 0;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    line-height: 1.45;
}

/* =========================================================
   Verlauf - endgültige Whitespace-Korrektur
   Änderungshistorie
   ========================================================= */

/*
 * Der äußere Container darf die Einrückungen aus Twig
 * NICHT als sichtbare Leerzeichen übernehmen.
 */
.hv-verlauf-historie-feld .hv-verlauf-text-voll {
    white-space: normal !important;
    margin: 6px 0 0;
    padding: 0;
    text-align: left;
}


/*
 * Dasselbe gilt für die kurze Darstellung innerhalb
 * der Änderungshistorie.
 */
.hv-verlauf-historie-text {
    white-space: normal !important;
    margin: 4px 0 0;
    padding: 0;
    text-align: left;
}


/*
 * Die eigentlichen Texte dürfen echte Zeilenumbrüche
 * der Notiz behalten.
 *
 * pre-line:
 * - erhält Zeilenumbrüche
 * - fasst unnötige Leerzeichen zusammen
 */
.hv-verlauf-diff-alt,
.hv-verlauf-diff-alt-gleich,
.hv-verlauf-diff-neu,
.hv-verlauf-diff-neu-gleich {
    white-space: pre-line !important;
    overflow-wrap: anywhere;
}


/*
 * Details und Summary ebenfalls ausdrücklich bündig.
 */
.hv-verlauf-historie-feld .hv-verlauf-text-details,
.hv-verlauf-historie-feld .hv-verlauf-text-summary {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
}
/* =========================================================
   Verlauf - aufgeklappter aktueller Eintrag
   Whitespace-Korrektur bei Änderungsmarkierungen
   ========================================================= */

.hv-verlauf-eintraege .hv-verlauf-text-voll {
    margin: 6px 0 0;
    padding: 0;
    white-space: normal !important;
    text-align: left;
}


/*
 * Echte Zeilenumbrüche des gespeicherten Textes
 * bleiben erhalten.
 *
 * Überflüssige Einrückungen aus Twig werden
 * dagegen nicht sichtbar dargestellt.
 */
.hv-verlauf-eintraege .hv-verlauf-text-voll
.hv-verlauf-diff-neu,
.hv-verlauf-eintraege .hv-verlauf-text-voll
.hv-verlauf-diff-neu-gleich {
    white-space: pre-line !important;
    overflow-wrap: anywhere;
}

/* =========================================================
   Verlauf - automatische Einträge
   ruhig, aber weiterhin gut lesbar
   ========================================================= */

.hv-verlauf-automatisch td {
    color: #6f6f78;
    vertical-align: top;
}


/* Titel nicht zu blass */
.hv-verlauf-automatisch td:nth-child(3) {
    color: #5f5f68;
}


/* Textspalte linksbündig und kompakt */
.hv-verlauf-automatisch td:nth-child(4) {
    text-align: left;
    white-space: normal;
    line-height: 1.4;
}


/* Keine unnötig große Höhe durch Textdarstellung */
.hv-verlauf-automatisch .hv-verlauf-text-kurz,
.hv-verlauf-automatisch .hv-verlauf-text-voll,
.hv-verlauf-automatisch .hv-verlauf-text-vorschau {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}


/* Kennzeichnung "automatisch" etwas dezenter */
.hv-verlauf-automatisch-hinweis {
    color: #85858e;
    font-size: 12px;
}

/* =========================================================
   Verlauf - strukturierte automatische Einträge
   ========================================================= */

.hv-verlauf-automatik-text {
    margin: 0;
    padding: 0;
    text-align: left;
    line-height: 1.45;
}

.hv-verlauf-automatik-zeile {
    margin: 0 0 3px;
    padding: 0;
    color: #6f6f78;
}

.hv-verlauf-automatik-zeile:last-child {
    margin-bottom: 0;
}

.hv-verlauf-automatik-zeile strong {
    color: inherit;
    font-weight: 700;
}

.hv-detail-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * Unveränderter vollständiger Verlaufstext.
 *
 * Zeilenumbrüche aus der gespeicherten Notiz bleiben
 * erhalten, ohne Twig-Einrückungen sichtbar zu machen.
 */

.hv-verlauf-text-original {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* =========================================================
   Personen - kompakte Adressübersicht
   ========================================================= */

.hv-adressen-liste {
    display: flex;
    flex-direction: column;

    width: 100%;

    margin-bottom: 14px;

    border: 1px solid var(--hv-border);
}

/*
 * Eine komplette Adresszeile
 */

.hv-adresse-zeile {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        145px
        145px;

    align-items: center;

    column-gap: 10px;

    min-width: 0;
    min-height: 40px;

    padding: 3px 8px;

    background: var(--hv-surface);

    border: 0;
    border-bottom: 1px solid var(--hv-border);
}

.hv-adresse-zeile:last-child {
    border-bottom: 0;
}

/*
 * Kleine Aktionsbuttons links
 */

.hv-adresse-aktionen {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
}


.hv-adresse-aktion {
    width: 34px;
    height: 34px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--hv-surface);
    color: var(--hv-accent);

    border: 1px solid var(--hv-border);

    text-decoration: none;
    cursor: pointer;
}


.hv-adresse-aktion:hover {
    background: #e2e2e6;
    border-color: var(--hv-accent);
    color: var(--hv-accent-dark);
}


.hv-adresse-aktion svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/*
 * Adresse
 */

.hv-adresse-text {
    flex: 1 1 auto;
    min-width: 0;

    font-size: 14px;
    line-height: 1.4;

    overflow-wrap: anywhere;
}


.hv-adresse-art {
    color: var(--hv-accent);
    font-weight: 600;
}


/*
 * Gültigkeit
 */

.hv-adresse-gueltigkeit {
    display: contents;

    color: var(--hv-muted);

    font-size: 12px;

    white-space: nowrap;
}


.hv-adresse-gueltigkeit > span {
    padding-left: 10px;

    border-left: 1px solid var(--hv-border);

    color: var(--hv-muted);
}


.hv-adresse-gueltigkeit strong {
    color: var(--hv-text);
    font-weight: 600;
}


/*
 * Inaktive Adressen optisch etwas zurücknehmen
 */

.hv-adressen-inaktiv .hv-adresse-zeile {
    background: #eeeeF1;
}


.hv-adressen-inaktiv .hv-adresse-text,
.hv-adressen-inaktiv .hv-adresse-gueltigkeit {
    color: var(--hv-muted);
}


/*
 * Schalter für inaktive Adressen
 */

.hv-inaktive-adressen-aktion {
    margin: 14px 0;
}


/*
 * Kleinere Fenster:
 * Gültigkeitsdaten unter die Adresse setzen
 */

@media (max-width: 1050px) {

    .hv-adresse-zeile {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }


    .hv-adresse-gueltigkeit {
        display: flex;

        grid-column: 2;

        gap: 14px;

        margin-top: 2px;
    }


    .hv-adresse-gueltigkeit > span {
        padding-left: 0;

        border-left: 0;
    }

}

/* =========================================================
   Personenformular - kompakt, aber in HV26-Formulargröße
   ========================================================= */

.hv-compact-form .hv-detail-table th {
    width: 32%;

    padding: 12px 14px;

    background: var(--hv-bg);
    color: var(--hv-text);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;

    vertical-align: middle;
}

.hv-compact-form .hv-detail-table td {
    width: 68%;

    padding: 10px 12px;

    background: var(--hv-bg);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;

    vertical-align: middle;
}

.hv-compact-form .hv-detail-table .form-input {
    width: 100%;
    height: 42px;

    padding: 8px 10px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;

    line-height: 1.2;
}

.hv-compact-form .hv-detail-table label {
    font-size: 14px;
}

/* =========================================================
   Personen - kompakte Kontaktwege
   ========================================================= */

.hv-kontaktwege-liste {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 14px;
    border: 1px solid var(--hv-border);
}

.hv-kontaktweg-zeile {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        145px
        145px;

    align-items: center;
    column-gap: 10px;

    min-width: 0;
    min-height: 40px;

    padding: 3px 8px;

    background: var(--hv-surface);

    border-bottom: 1px solid var(--hv-border);
}

.hv-kontaktweg-zeile:last-child {
    border-bottom: 0;
}

.hv-kontaktweg-aktionen {
    display: flex;
    gap: 4px;
}

.hv-kontaktweg-aktion {
    width: 34px;
    height: 34px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--hv-surface);
    color: var(--hv-accent);

    border: 1px solid var(--hv-border);

    text-decoration: none;
    cursor: pointer;
}

.hv-kontaktweg-aktion:hover {
    background: #e2e2e6;
    border-color: var(--hv-accent);
    color: var(--hv-accent-dark);
}

.hv-kontaktweg-aktion svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hv-kontaktweg-aktion-inaktiv {
    opacity: 0.45;
    cursor: default;
}

.hv-kontaktweg-aktion-inaktiv:hover {
    background: var(--hv-surface);
    border-color: var(--hv-border);
    color: var(--hv-accent);
}

.hv-kontaktweg-text {
    min-width: 0;

    font-size: 14px;
    line-height: 1.4;

    overflow-wrap: anywhere;
}

.hv-kontaktweg-art {
    color: var(--hv-accent);
    font-weight: 600;
}

.hv-kontaktweg-gueltigkeit {
    display: contents;

    color: var(--hv-muted);

    font-size: 12px;

    white-space: nowrap;
}

.hv-kontaktweg-gueltigkeit > span {
    padding-left: 10px;

    border-left: 1px solid var(--hv-border);

    color: var(--hv-muted);
}

.hv-kontaktweg-gueltigkeit strong {
    color: var(--hv-text);
    font-weight: 600;
}

.hv-kontaktwege-inaktiv .hv-kontaktweg-zeile {
    background: #eeeeF1;
}

.hv-kontaktwege-inaktiv .hv-kontaktweg-text,
.hv-kontaktwege-inaktiv .hv-kontaktweg-gueltigkeit {
    color: var(--hv-muted);
}

.hv-inaktive-telefonnummern-aktion,
.hv-inaktive-emailadressen-aktion {
    margin: 14px 0;
}



@media (max-width: 1050px) {

    .hv-kontaktweg-zeile {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }

    .hv-kontaktweg-gueltigkeit {
        display: flex;
        grid-column: 2;

        gap: 14px;

        margin-top: 2px;
    }

    .hv-kontaktweg-gueltigkeit > span {
        padding-left: 0;
        border-left: 0;
    }
}

/* =========================================================
   Kontaktwege - gemeinsames Formular
   ========================================================= */

.hv-kontaktweg-neu-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 0.85fr);

    gap: 18px;
    align-items: start;
}

.hv-kontaktweg-neu-adresse {
    min-width: 0;
}

.hv-kontaktweg-neu-rechts {
    display: flex;
    flex-direction: column;
    gap: 18px;

    min-width: 0;
}

.hv-kontaktweg-neu-bereich {
    border: 1px solid var(--hv-border);
    background: var(--hv-surface);
}

.hv-kontaktweg-neu-bereich > h2 {
    margin: 0;
    padding: 12px 14px;

    border-bottom: 1px solid var(--hv-border);

    background: var(--hv-bg);
    color: var(--hv-accent);

    font-size: 18px;
    font-weight: 600;
}

.hv-kontaktweg-neu-inhalt {
    padding: 14px;
}

@media (max-width: 950px) {

    .hv-kontaktweg-neu-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Personen - Kontaktbereiche / Neu-Shortcuts
   ========================================================= */

/*
 * Überschrift und Neu-Shortcut stehen
 * kompakt nebeneinander.
 */

.hv-kontaktbereich-kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 30px;
    margin: 18px 0 10px;
}


/*
 * Die Überschrift erhält ihren Abstand jetzt
 * über den gemeinsamen Kopf.
 */

.hv-kontaktbereich-kopf h2,
.hv-kontaktbereich-kopf h3 {
    margin: 0;
    line-height: 30px;
}


/*
 * Kompakter Link zum Anlegen eines neuen
 * Kontaktwegs.
 */

.hv-kontaktbereich-neu {
    display: inline-flex;
    align-items: center;

    height: 30px;

    border: 1px solid var(--hv-border);

    background: var(--hv-surface);
    color: var(--hv-accent);

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;
}


/*
 * Quadratischer Plus-Bereich.
 */

.hv-kontaktbereich-plus {
    width: 29px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-right: 1px solid var(--hv-border);

    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}


/*
 * Text rechts neben dem Plus.
 */

.hv-kontaktbereich-neu span:last-child {
    padding: 0 10px;
}


/*
 * Maus darüber.
 */

.hv-kontaktbereich-neu:hover {
    background: #e2e2e6;

    border-color: var(--hv-accent);

    color: var(--hv-accent-dark);
}

.hv-kontaktbereich-neu:hover
.hv-kontaktbereich-plus {
    border-right-color: var(--hv-accent);
}

/* =========================================================
   Personen - Mietverhältnis
   ========================================================= */

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

    width: 100%;
    margin-top: 10px;
}


/* ---------------------------------------------------------
   Gemeinsame Karte
   --------------------------------------------------------- */

.hv-mietkarte {
    min-width: 0;

    border: 1px solid var(--hv-border);
    background: var(--hv-surface);
}

.hv-mietkarte > h3 {
    margin: 0;
    padding: 9px 12px;

    border-bottom: 1px solid var(--hv-border);

    color: var(--hv-accent);

    font-size: 14px;
    font-weight: 600;
}


/* ---------------------------------------------------------
   Kompakte Informationsbereiche
   --------------------------------------------------------- */

.hv-mietkarte-inhalt {
    padding: 8px 12px;
}

.hv-mietinfo-zeile {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    column-gap: 10px;

    align-items: center;

    min-height: 28px;
}

.hv-mietinfo-label {
    color: var(--hv-accent);

    font-size: 12px;
    font-weight: 600;
}

.hv-mietinfo-wert {
    min-width: 0;

    color: var(--hv-text);

    font-size: 13px;

    overflow-wrap: anywhere;
}

.hv-mietinfo-wert a {
    color: var(--hv-accent);
    font-weight: 600;
}

.hv-mietinfo-abstand {
    height: 10px;
}


/* ---------------------------------------------------------
   Noch nicht angebundene Funktionen
   --------------------------------------------------------- */

.hv-platzhalter,
.hv-mietdetails-platzhalter {
    color: #77777f;
    font-style: italic;
}

.hv-mietdetails-platzhalter {
    min-height: 28px;

    display: flex;
    align-items: center;

    font-size: 13px;
}


/* ---------------------------------------------------------
   Personentabelle innerhalb der Karte
   --------------------------------------------------------- */

.hv-mietkarte-tabelle {
    width: 100%;
    overflow-x: auto;
}

.hv-mietverhaeltnis-personen {
    border: 0;
}

.hv-mietverhaeltnis-personen th:nth-child(1) {
    width: 34%;
}

.hv-mietverhaeltnis-personen th:nth-child(2) {
    width: 30%;
}

.hv-mietverhaeltnis-personen th:nth-child(3),
.hv-mietverhaeltnis-personen th:nth-child(4) {
    width: 18%;
}

.hv-mietverhaeltnis-personen th,
.hv-mietverhaeltnis-personen td {
    padding: 8px 10px;
}


/* ---------------------------------------------------------
   Mehrere Mietverhältnisse
   --------------------------------------------------------- */

.hv-mietverhaeltnis-trenner {
    grid-column: 1 / -1;

    margin: 24px 0;

    border: 0;
    border-top: 2px solid var(--hv-border);
}


/* ---------------------------------------------------------
   Kleinere Bildschirme
   --------------------------------------------------------- */

@media (max-width: 1050px) {

    .hv-mietraster {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .hv-mietinfo-zeile {
        grid-template-columns: 115px minmax(0, 1fr);
    }

    .hv-mietkarte-inhalt {
        padding: 8px 10px;
    }
}

/* =========================================================
   Personen - Mietakte / Übersicht
   ========================================================= */


/* ---------------------------------------------------------
   Reiter innerhalb des Aktenblatts Mietverhältnis
   --------------------------------------------------------- */

.hv-mietakte-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;

    margin: 0 0 18px;

    border-bottom: 2px solid #d8d3df;
}

.hv-mietakte-tab {
    display: inline-block;

    margin-right: 4px;
    padding: 8px 14px;

    border: 1px solid #d8d3df;
    border-bottom: 0;

    background: var(--hv-surface);
    color: var(--hv-text);

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
}

.hv-mietakte-tab:hover {
    background: #e8e5eb;
    color: var(--hv-accent);
}

.hv-mietakte-tab-aktiv {
    background: #f3f0f6;
    color: #49375f;
    border-color: #b7abc5;
}

/* =========================================================
   Personen - zeitlicher Status eines einzelnen Mietverhältnisses
   ========================================================= */

.hv-mietstatus {
    margin: 0 0 14px 0;
    padding: 10px 14px;
    border: 1px solid var(--hv-border);
    background: var(--hv-surface);
    color: var(--hv-text);
    font-size: 14px;
}

.hv-mietstatus strong {
    color: var(--hv-accent);
    font-weight: 600;
}

/* ---------------------------------------------------------
   Finanzübersicht über alle Mietverträge
   --------------------------------------------------------- */

.hv-mietakte-finanzgesamt {
    position: relative;

    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 10px 65px;

    margin: 0 0 16px;
    padding: 2px 0 10px;

    color: var(--hv-text);
    font-size: 14px;
}


/*
 * Dezente Linie nur unter dem Wertebereich.
 * Links bleibt "ALLE VERTRÄGE" optisch frei.
 */

.hv-mietakte-finanzgesamt::after {
    content: "";

    position: absolute;
    left: 145px;
    bottom: 0;

    width: 650px;
    max-width: calc(100% - 145px);

    border-bottom: 1px solid var(--hv-border);
}


.hv-mietakte-finanzgesamt-titel {
    color: var(--hv-accent);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}


.hv-mietakte-finanzgesamt span {
    white-space: nowrap;
}


.hv-mietakte-finanzgesamt span strong {
    color: var(--hv-accent);
    font-weight: 600;
}


.hv-mietakte-finanzgesamt em {
    color: var(--hv-muted);
    font-style: italic;
}

/* ---------------------------------------------------------
   Übersicht
   --------------------------------------------------------- */

.hv-mietakte-uebersicht > h3 {
    margin: 0 0 10px;

    color: var(--hv-accent);
    font-size: 15px;
}

.hv-mietakte-kurzliste {
    margin-bottom: 16px;
    border: 1px solid var(--hv-border);
    background: var(--hv-surface);
}


/* ---------------------------------------------------------
   Eine kompakte Vertragszeile
   --------------------------------------------------------- */

.hv-mietakte-kurzzeile {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);

    min-width: 0;
    min-height: 54px;

    border-bottom: 1px solid var(--hv-border);
}

.hv-mietakte-kurzzeile:last-child {
    border-bottom: 0;
}


/* ---------------------------------------------------------
   Lupe
   Selbst gezeichnetes inline SVG.
   Keine Bilddatei / keine externe Icon-Bibliothek.
   --------------------------------------------------------- */

.hv-mietakte-lupe {
    width: 34px;
    height: 34px;

    align-self: center;
    justify-self: center;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--hv-border);

    background: var(--hv-surface);
    color: var(--hv-accent);

    text-decoration: none;
}

.hv-mietakte-lupe:hover {
    background: #e2e2e6;
    border-color: var(--hv-accent);
    color: var(--hv-accent-dark);
}

.hv-mietakte-lupe svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ---------------------------------------------------------
   Informationen der Kurzansicht
   --------------------------------------------------------- */

.hv-mietakte-kurzinfo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    min-width: 0;

    gap: 6px 28px;
}


.hv-mietakte-kurzinfo-haupt,
.hv-mietakte-kurzinfo-neben {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px 20px;

    min-width: 0;

    padding: 8px 0;

    font-size: 13px;
}


/*
 * Linke Informationsgruppe beginnt mit einem
 * kleinen Abstand zum vorherigen Element.
 */

.hv-mietakte-kurzinfo-haupt {
    padding-left: 12px;
}


/*
 * Keine künstliche Trennlinie und keine
 * feste zweite Spalte mehr.
 */

.hv-mietakte-kurzinfo-neben {
    padding-right: 12px;
    border-left: 0;
}


.hv-mietakte-kurzinfo-haupt strong {
    color: var(--hv-accent);
}


.hv-mietakte-kurzinfo em,
.hv-mietakte-gesamtsaldo em {
    color: var(--hv-muted);
    font-style: italic;
}


/* ---------------------------------------------------------
   Beendete Mietverhältnisse
   --------------------------------------------------------- */

.hv-mietakte-beendet {
    margin-top: 0;

    border: 1px solid var(--hv-border);
    background: #eeeeF1;
}

.hv-mietakte-beendet-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 44px;
    padding: 8px 12px;

    color: var(--hv-accent);

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.hv-mietakte-beendet-kopf::marker {
    color: var(--hv-accent);
}

.hv-mietakte-gesamtsaldo {
    color: var(--hv-text);
    font-weight: 600;
}


/* ---------------------------------------------------------
   Liste alter Verträge
   --------------------------------------------------------- */

.hv-mietakte-beendet-inhalt {
    border-top: 1px solid var(--hv-border);
}

.hv-mietakte-altvertrag {
    background: var(--hv-surface);
    border-bottom: 1px solid var(--hv-border);
}

.hv-mietakte-altvertrag:last-child {
    border-bottom: 0;
}

.hv-mietakte-altvertrag-kopf {
    cursor: pointer;
    color: var(--hv-text);
}

.hv-mietakte-altvertrag-kopf::marker {
    color: var(--hv-accent);
}

.hv-mietakte-altvertrag-details {
    padding: 6px 14px 16px;

    border-top: 1px solid var(--hv-border);
    background: var(--hv-bg);
}


/* ---------------------------------------------------------
   Kleinere Bildschirme
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .hv-mietakte-kurzinfo {
        grid-template-columns: 1fr;
    }

    .hv-mietakte-kurzinfo-neben {
        border-left: 0;
        border-top: 1px solid var(--hv-border);
    }

}


@media (max-width: 650px) {

    .hv-mietakte-beendet-kopf {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .hv-mietakte-tab {
        margin-bottom: 4px;
        border-bottom: 1px solid #d8d3df;
    }

}

/* =========================================================
   Personenübersicht - Rollen und Zuordnungen
   ========================================================= */

/*
 * Rolle und Zuordnung enthalten jetzt mehrere
 * einzelne Links.
 *
 * Deshalb dürfen hier nicht die allgemeinen
 * Vollflächen-Links der hv-table-links greifen.
 */

.hv-table-links td.hv-personen-rolle,
.hv-table-links td.hv-personen-zuordnung {
    padding: 10px 12px;
    vertical-align: middle;
}


/*
 * Einzelne Links innerhalb dieser beiden Zellen.
 */

.hv-table-links td.hv-personen-rolle a,
.hv-table-links td.hv-personen-rolle a:visited,
.hv-table-links td.hv-personen-rolle a:hover,
.hv-table-links td.hv-personen-rolle a:active,
.hv-table-links td.hv-personen-zuordnung a,
.hv-table-links td.hv-personen-zuordnung a:visited,
.hv-table-links td.hv-personen-zuordnung a:hover,
.hv-table-links td.hv-personen-zuordnung a:active {
    display: inline;
    width: auto;
    padding: 0;

    color: var(--hv-text);
    text-decoration: none;
}


/*
 * Links bleiben bewusst unauffällig.
 * Erst beim Überfahren wird die Akzentfarbe sichtbar.
 */

.hv-table-links td.hv-personen-rolle a:hover,
.hv-table-links td.hv-personen-zuordnung a:hover {
    color: var(--hv-accent);
}


/*
 * Hauptrolle
 */

.hv-personen-rolle-name {
    line-height: 1.35;
}


/*
 * Vertragsnummer bzw. zusätzliche Rolleninformation.
 */

.hv-personen-rolle-zusatz {
    margin-top: 3px;

    color: var(--hv-muted);

    font-size: 12px;
    line-height: 1.3;
}

.hv-personen-rolle-zusatz a,
.hv-personen-rolle-zusatz a:visited {
    color: var(--hv-muted) !important;
}

.hv-personen-rolle-zusatz a:hover {
    color: var(--hv-accent) !important;
}


/*
 * Normale Zuordnung eines einzelnen Mietvertrags.
 */

.hv-personen-zuordnung-haupt {
    line-height: 1.35;
}

.hv-personen-zuordnung-neben {
    margin-top: 3px;

    color: var(--hv-muted);

    font-size: 12px;
    line-height: 1.3;
}

.hv-personen-zuordnung-neben a,
.hv-personen-zuordnung-neben a:visited {
    color: var(--hv-muted) !important;
}

.hv-personen-zuordnung-neben a:hover {
    color: var(--hv-accent) !important;
}


/*
 * Punkt zwischen fachlich zusammengehörenden Angaben.
 */

.hv-personen-trenner {
    margin: 0 4px;
    color: var(--hv-muted);
}


/* =========================================================
   Personenübersicht - mehrere Mietverträge
   ========================================================= */

.hv-personen-mietdetails {
    margin: 0;
    padding: 0;
}


/*
 * Browser-Standardmarker entfernen.
 * Unser eigener kleine Pfeil übernimmt die Anzeige.
 */

.hv-personen-mietdetails-kopf {
    display: block;

    margin: 0;
    padding: 0;

    cursor: pointer;
    list-style: none;
}

.hv-personen-mietdetails-kopf::-webkit-details-marker {
    display: none;
}


/*
 * Zusammenfassung:
 * z.B. 2 Liegenschaften · 3 Gebäude · 4 Einheiten
 */

.hv-personen-mietdetails-zusammenfassung {
    display: block;
    line-height: 1.35;
}


/*
 * Öffnen / Schließen.
 */

.hv-personen-mietdetails-schalter {
    display: block;

    margin-top: 3px;

    color: var(--hv-muted);

    font-size: 12px;
    line-height: 1.3;
}

.hv-personen-mietdetails-schalter::before {
    content: '▶';

    display: inline-block;

    margin-right: 5px;

    color: var(--hv-accent);

    font-size: 10px;
}

.hv-personen-mietdetails[open]
.hv-personen-mietdetails-schalter::before {
    content: '▼';
}


/*
 * Aufgeklappter Bereich.
 */

.hv-personen-mietdetails-inhalt {
    margin-top: 8px;
    padding-top: 7px;

    border-top: 1px solid var(--hv-border);
}


/*
 * Ein Vertrag innerhalb der aufgeklappten Liste.
 */

.hv-personen-mietdetails-vertrag {
    margin-bottom: 8px;
    padding-bottom: 8px;

    border-bottom: 1px solid #ddddE1;
}

.hv-personen-mietdetails-vertrag:last-child {
    margin-bottom: 0;
    padding-bottom: 0;

    border-bottom: 0;
}


/*
 * Vertragsnummer
 */

.hv-personen-mietdetails-vertragskopf {
    margin-bottom: 2px;

    font-weight: 600;
}


/*
 * Liegenschaft / Gebäude
 */

.hv-personen-mietdetails-objekt {
    line-height: 1.35;
}


/*
 * Einheit
 */

.hv-personen-mietdetails-einheit {
    margin-top: 2px;

    color: var(--hv-muted);

    font-size: 12px;
    line-height: 1.3;
}

.hv-personen-mietdetails-einheit a,
.hv-personen-mietdetails-einheit a:visited {
    color: var(--hv-muted) !important;
}

.hv-personen-mietdetails-einheit a:hover {
    color: var(--hv-accent) !important;
}


/* =========================================================
   Personenübersicht - Haushaltsangehörige
   ========================================================= */

.hv-personen-haushalt {
    line-height: 1.35;
}

.hv-personen-haushalt-zeile + .hv-personen-haushalt-zeile {
    margin-top: 3px;
}

.hv-personen-haushalt-zeile span {
    color: var(--hv-muted);
}


/*
 * Sonstige bestehende Zuordnungen.
 */

.hv-personen-sonstige-zuordnung {
    line-height: 1.35;
}


/*
 * Leere Tabellenangabe.
 */

.hv-personen-leer {
    color: var(--hv-muted);
}


/* =========================================================
   Personenübersicht - kompakte Anpassung
   ========================================================= */

/*
 * Rolle und Zuordnung dürfen bei längeren Angaben
 * umbrechen, ohne die restliche Tabelle unnötig
 * auseinanderzuziehen.
 */

.hv-personen-rolle {
    min-width: 125px;
}

.hv-personen-zuordnung {
    min-width: 260px;
    max-width: 520px;

    overflow-wrap: anywhere;
}
/* =========================================================
   Personenübersicht - Mietverträge in der Rollenspalte
   ========================================================= */

.hv-personen-vertragsdetails {
    margin-top: 3px;
}

.hv-personen-vertragsdetails-kopf {
    display: block;

    margin: 0;
    padding: 0;

    color: var(--hv-muted);

    font-size: 12px;
    line-height: 1.3;

    cursor: pointer;
    list-style: none;
}

.hv-personen-vertragsdetails-kopf::-webkit-details-marker {
    display: none;
}

.hv-personen-vertragsdetails-kopf::before {
    content: '▶';

    display: inline-block;

    margin-right: 5px;

    color: var(--hv-accent);

    font-size: 9px;
}

.hv-personen-vertragsdetails[open]
.hv-personen-vertragsdetails-kopf::before {
    content: '▼';
}

.hv-personen-vertragsdetails-inhalt {
    margin-top: 5px;
    padding-left: 14px;
}

.hv-personen-vertragsdetails-vertrag {
    margin-top: 2px;

    font-size: 12px;
    line-height: 1.3;
}

.hv-table-links td.hv-personen-rolle
.hv-personen-vertragsdetails-vertrag a,
.hv-table-links td.hv-personen-rolle
.hv-personen-vertragsdetails-vertrag a:visited {
    color: var(--hv-muted);
}

.hv-table-links td.hv-personen-rolle
.hv-personen-vertragsdetails-vertrag a:hover {
    color: var(--hv-accent);
}

/* =========================================================
   Personenakte - neuer Personenkopf
   ========================================================= */

/* =========================================================
   Personenakte - Personenkopf
   ========================================================= */

.hv-personenkopf-neu {
    display: flex;
    align-items: center;

    width: 100%;
    margin-bottom: 20px;
}


/* ---------------------------------------------------------
   Name
   --------------------------------------------------------- */

.hv-personenkopf-name {
    flex: 0 0 280px;
    min-width: 280px;

    padding-right: 20px;
}

.hv-personenkopf-nachname {
    color: var(--hv-text);

    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
}

.hv-personenkopf-vorname {
    margin-top: 3px;

    color: var(--hv-text);

    font-size: 18px;
    line-height: 1.15;
}


/* ---------------------------------------------------------
   Finanz-Gesamtsicht
   --------------------------------------------------------- */

.hv-personenkopf-finanzen {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1 1 auto;
    min-width: 0;

    gap: 32px;

    padding: 0 25px;
}

.hv-personenkopf-alle {
    flex: 0 0 auto;

    white-space: nowrap;

    color: var(--hv-accent);

    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.hv-personenkopf-finanzwert {
    flex: 0 0 auto;

    min-width: 90px;
}

.hv-personenkopf-finanzlabel {
    white-space: nowrap;

    color: var(--hv-text);

    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.hv-personenkopf-finanzzahl {
    margin-top: 4px;

    color: var(--hv-text);

    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}


/* ---------------------------------------------------------
   Aktionen
   --------------------------------------------------------- */

.hv-personenkopf-aktionen {
    display: flex;
    align-items: stretch;
    margin-left: auto;

    flex: 0 0 auto;

    gap: 6px;
}

.hv-personenkopf-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 100px;
    min-height: 48px;

    padding: 6px 10px;

    text-align: center;
    line-height: 1.15;
}

.hv-personenkopf-button span {
    display: block;
}


/* Der Zurück-Button darf etwas ruhiger / kleiner sein */

.hv-personenkopf-aktionen .hv-button-secondary {
    font-size: 14px;
}

/* =========================================================
   DMS – Posteingang / Postbearbeitung
   ========================================================= */


/* =========================================================
   Sidebar
   ========================================================= */

.hv-sidebar-dms-kopf,
.hv-sidebar-dms-inhalt > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hv-sidebar-dms-kopf.active {
    padding-left: 14px;
    border-left: 4px solid var(--hv-accent);
}

.hv-sidebar-dms-anzahl {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: #817b85;
}

.dms-posteingang-filter {
    padding: 8px 10px;
    border-bottom: 1px solid var(--hv-border);
}

.dms-posteingang-filter__feld {
    position: relative;
    margin-bottom: 6px;
}

.dms-posteingang-filter__feld label {
    display: block;
    margin-bottom: 2px;

    font-size: 11px;
    font-weight: 600;
}

.dms-posteingang-filter__feld select,
.dms-posteingang-filter__feld input[type="search"] {
    box-sizing: border-box;

    width: 100%;
    min-width: 0;

    padding: 4px 6px;

    border: 1px solid var(--hv-border);
    background: var(--hv-surface);

    color: var(--hv-text);

    font: inherit;
    font-size: 12px;
}

.dms-posteingang-filter__feld input[type="search"]:focus,
.dms-posteingang-filter__feld select:focus {
    outline: none;

    border-color: var(--hv-accent);

    box-shadow: 0 0 0 2px rgba(117, 101, 128, .10);
}

.dms-posteingang-filter__suchen {
    margin: 8px -4px 7px;
    padding: 8px 4px 2px;

    border-top: 1px solid #d8d3dc;
    background: #f4f2f5;
}

.dms-posteingang-filter__suchen input[type="search"] {
    background: #ffffff;
    border-color: #cbc6cf;
}

.dms-posteingang-filter__suchen input[type="search"]:hover {
    border-color: #aaa1ad;
}

.dms-posteingang-filter__suchen input[type="search"]:focus {
    outline: none;
    border-color: #8d7a99;
    box-shadow: 0 0 0 2px rgba(117, 101, 128, .10);
}

.dms-posteingang-filter__suchen select {
    background: #ffffff;
    border-color: #cbc6cf;
}

.dms-posteingang-filter__suchergebnisse {
    position: absolute;
    z-index: 100;

    top: 100%;
    right: 0;
    left: 0;

    max-height: 260px;
    overflow-y: auto;

    border: 1px solid var(--hv-border);
    border-top: 0;

    background: var(--hv-surface);

    box-shadow: 0 5px 12px rgba(0, 0, 0, .12);
}

.dms-posteingang-filter__suchergebnisse[hidden] {
    display: none;
}

.dms-posteingang-filter__suchergebnis {
    width: 100%;
    padding: 7px 8px;

    display: block;

    border: 0;
    border-bottom: 1px solid var(--hv-border);
    background: var(--hv-surface);

    color: var(--hv-text);

    font: inherit;
    font-size: 12px;
    line-height: 1.35;
    text-align: left;

    cursor: pointer;
}

.dms-posteingang-filter__suchergebnis:last-child {
    border-bottom: 0;
}

.dms-posteingang-filter__suchergebnis:hover {
    background: #f1eff3;
}

.dms-posteingang-filter__button {
    width: 100%;
    padding: 5px 8px;

    border: 1px solid #6e5c79;
    background: #756580;

    color: #ffffff;

    font: inherit;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

.dms-posteingang-filter__button:hover {
    border-color: #685773;
    background: #685773;
}

#dmsFilterVerknuepfung {
    margin-top: 4px;
}

/* =========================================================
   DMS – Dokumentauswahl / zweite Sidebar
   ========================================================= */

.dms-dokumentauswahl {
    width: 220px;
    flex: 0 0 220px;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    background: #f7f6f8;
    border-right: 1px solid #d8d5dc;
}


.dms-dokumentauswahl__kopf {
    flex: 0 0 auto;
    padding: 13px 14px 11px;

    border-bottom: 1px solid #d8d5dc;
    background: #f1eff3;
}


.dms-dokumentauswahl__titel {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 13px;
    font-weight: 700;
    color: #4f4953;
}


.dms-dokumentauswahl__anzahl {
    margin-top: 3px;

    font-size: 11px;
    color: #85808a;
}


.dms-dokumentauswahl__liste {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: #c4c0c7 transparent;
}


.dms-dokumentauswahl__liste::-webkit-scrollbar {
    width: 7px;
}


.dms-dokumentauswahl__liste::-webkit-scrollbar-thumb {
    background: #c4c0c7;
}


.dms-dokumentauswahl__liste::-webkit-scrollbar-track {
    background: transparent;
}


.dms-dokumentauswahl__leer {
    padding: 14px;

    font-size: 12px;
    line-height: 1.45;
    color: #77727d;
}


.dms-dokumentauswahl__dokument {
    min-width: 0;
    padding: 10px 14px;

    display: flex;
    flex-direction: column;
    gap: 3px;

    border-bottom: 1px solid #e5e2e7;

    color: inherit;
    text-decoration: none;
}


.dms-dokumentauswahl__dokument:hover {
    background: #efedf1;
}


.dms-dokumentauswahl__dokument.ausgewaehlt {
    padding-left: 11px;

    background: #e8e3ed;
    border-left: 3px solid #756580;
}


.dms-dokumentauswahl__datum {
    font-size: 12px;
    font-weight: 700;
    color: #59525d;
}


.dms-dokumentauswahl__name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 12px;
    color: #77717b;
}

/* =========================================================
   DMS – Navigation in der normalen Sidebar
   ========================================================= */

.hv-sidebar-dms-inhalt a {
    padding-left: 28px;
}

.hv-subnav a.active {
    padding-left: 14px;
    background: var(--hv-surface);
    color: var(--hv-accent);
    border-left: 4px solid var(--hv-accent);
    font-weight: 600;
}

/* =========================================================
   DMS - Startseite
   ========================================================= */

.dms-start-bereich {
    margin-bottom: 30px;
}

.dms-start-bereich h2 {
    margin: 0 0 14px;
}

.dms-start-kennzahlen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 900px;
}

.dms-start-kennzahl {
    min-height: 125px;
    padding: 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;

    background: var(--hv-surface);
    border: 1px solid var(--hv-border);

    color: var(--hv-text);
    text-decoration: none;
}

.dms-start-kennzahl:hover {
    background: #e2e2e6;
    border-color: var(--hv-accent);
}

.dms-start-kennzahl-zahl {
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    color: var(--hv-accent);
}

.dms-start-kennzahl-text {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.dms-start-schnellzugriff {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* =========================================================
   Grundbereich Posteingang
   ========================================================= */

.dms-posteingang {
    width: 100%;
}

.dms-posteingang__kopf {
    margin-bottom: 18px;
}

.dms-posteingang__kopf h1 {
    margin: 0 0 4px 0;
    font-size: 24px;
}

.dms-posteingang__kopf p {
    margin: 0;
    color: #6b6b6b;
}


/* =========================================================
   Kein Dokument ausgewählt
   ========================================================= */

.dms-keine-auswahl {
    min-height: 680px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border: 1px solid #d9d9df;
    background: #ffffff;

    color: #77727e;
    text-align: center;
}

.dms-keine-auswahl strong {
    color: #4d4952;
    font-size: 15px;
}

.dms-keine-auswahl span {
    max-width: 420px;
    font-size: 13px;
    line-height: 1.5;
}

.dms-keine-auswahl__symbol {
    width: 38px;
    margin-bottom: 8px;
    color: #aaa5af;
}

.dms-keine-auswahl__symbol svg {
    display: block;
    width: 100%;
    height: auto;
}


/* =========================================================
   Arbeitsplatz
   Standard: Vorschau 70 % / Daten 30 %
   ========================================================= */

.dms-arbeitsplatz {
    --daten-breite: 30%;

    width: 100%;
    min-width: 0;

    height: calc(100vh - 190px);
    min-height: 680px;

    display: flex;

    overflow: hidden;

    border: 1px solid #d9d9df;
    background: #ffffff;
}


/* =========================================================
   Gemeinsame Bereichsköpfe
   ========================================================= */

.dms-bereichskopf {
    flex: 0 0 auto;

    min-height: 46px;
    padding: 0 14px;

    display: flex;
    align-items: center;
    gap: 14px;

    border-bottom: 1px solid #d9d9df;
    background: #f4f3f7;
}

.dms-bereichskopf h2 {
    margin: 0;

    color: #5a5361;

    font-size: 14px;
    font-weight: 600;
}


/* =========================================================
   Vorschau links
   ========================================================= */

.dms-vorschau {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    background: #ececef;
}

.dms-vorschau__inhalt {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    padding: 12px;

    display: flex;
    flex-direction: column;
}

.dms-vorschau__platzhalter {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border: 1px solid #d3d3d8;
    background: #f8f8f9;

    color: #77727e;
    text-align: center;
}

.dms-vorschau__platzhalter strong {
    color: #4d4952;
    font-size: 15px;
}

.dms-vorschau__platzhalter span {
    max-width: 70%;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 13px;
}

.dms-vorschau__platzhalter small {
    max-width: 430px;

    font-size: 12px;
    line-height: 1.45;
    color: #92909a;
}

.dms-vorschau__symbol {
    width: 42px;
    margin-bottom: 8px;
    color: #aaa5af;
}

.dms-vorschau__symbol svg {
    display: block;
    width: 100%;
    height: auto;
}


/* =========================================================
   Echte Dokumentvorschau
   ========================================================= */

.dms-vorschau__flaeche {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    display: flex;

    padding: 10px;
    background: #ededf0;
}

.dms-vorschau__pdf {
    flex: 1 1 auto;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    border: 1px solid #d3d3d8;
    background: #ffffff;
}

.dms-vorschau__bildbereich {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: auto;

    border: 1px solid #d3d3d8;
    background: #dcdcdf;
}

.dms-vorschau__bild {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;
}

/* =========================================================
   Verschiebbarer Trenner
   ========================================================= */

.dms-trenner {
    position: relative;

    flex: 0 0 7px;
    width: 7px;

    cursor: col-resize;

    background: #e3e1e6;

    border-left: 1px solid #d1ced5;
    border-right: 1px solid #d1ced5;

    user-select: none;
}

.dms-trenner:hover,
.dms-trenner.aktiv {
    background: #d6d0dc;
}

.dms-trenner__griff {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 3px;
    height: 42px;

    transform: translate(-50%, -50%);

    border-left: 1px solid #8c8492;
    border-right: 1px solid #8c8492;
}


/* =========================================================
   Rechte Dokumentdaten
   ========================================================= */

.dms-daten {
    flex: 0 0 var(--daten-breite);
    width: var(--daten-breite);

    min-width: 280px;
    max-width: 55%;

    display: flex;
    flex-direction: column;

    background: #ffffff;
}

.dms-daten__inhalt {
    flex: 1 1 auto;
    min-height: 0;

    padding: 16px;

    overflow-y: auto;
}

.dms-daten__nummer {
    margin-bottom: 18px;
    padding-bottom: 12px;

    border-bottom: 1px solid #e3e1e5;

    color: #756580;
    font-size: 13px;
    font-weight: 700;
}


/* =========================================================
   Abschnitte
   ========================================================= */

.dms-abschnitt {
    margin-bottom: 24px;
    padding-bottom: 22px;

    border-bottom: 1px solid #e3e1e5;
}

.dms-abschnitt--letzter {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.dms-abschnitt__kopf {
    margin-bottom: 13px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dms-abschnitt__titel {
    margin-bottom: 13px;

    color: #514858;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .03em;
    text-transform: uppercase;
}

.dms-abschnitt__kopf .dms-abschnitt__titel {
    margin-bottom: 0;
}


/* =========================================================
   Formulare
   ========================================================= */

/* Ausgeblendete Elemente der Sollstellungsgrundlagen */
#dmsSollrelevanzBereich [hidden] {
    display: none !important;
}

/* Sollstellungsgrundlagen: Formular und Abstände */
#dmsSollrelevanzFormular .dms-daten__feld {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.4;
}

#dmsSollrelevanzFormular .dms-daten__feld > span {
    display: block;
    margin-bottom: 5px;
}

#dmsSollrelevanzFormular .dms-daten__feld:has(> input[type="checkbox"]),
#dmsSollrelevanzFormular .dms-daten__feld > span:has(> input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

#dmsSollrelevanzFormular input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 3px 0 0;
}

#dmsSollrelevanzFormular .dms-eingabe {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#dmsSollrelevanzZeilen .dms-abschnitt {
    margin-bottom: 14px;
    padding-bottom: 12px;
}

#dmsSollrelevanzFormular .dms-button {
    max-width: 100%;
    margin: 4px 6px 6px 0;
    white-space: normal;
    text-align: left;
}

/* Leseansicht: Art und Zeitraum untereinander */
#dmsSollrelevanzAnzeige .dms-erfassungsdaten__zeile {
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    row-gap: 3px;
    padding: 6px 0;
}

#dmsSollrelevanzAnzeige .dms-erfassungsdaten__wert {
    grid-column: 2;
}

#dmsSollrelevanzAnzeige .dms-erfassungsdaten__bezeichnung {
    overflow-wrap: break-word;
}

/* Entscheidung bei bereits hinterlegten Dokumentgrundlagen */
#dmsSollrelevanzKonflikte {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e3e1e5;
}

.dms-sollkonflikt {
    margin: 14px 0;
    padding: 12px;
    border: 1px solid #d8d2dc;
    background: #f8f6f9;
    color: #514858;
    font-size: 12px;
    line-height: 1.45;
}

.dms-sollkonflikt__vertrag,
.dms-sollkonflikt__dokumenttitel {
    overflow-wrap: anywhere;
}

.dms-sollkonflikt__vertrag {
    margin-bottom: 5px;
    font-weight: 600;
}

.dms-sollkonflikt__art {
    margin-bottom: 10px;
    color: #6e5c79;
    font-weight: 700;
}

.dms-sollkonflikt__label {
    margin-top: 12px;
    font-weight: 600;
}

.dms-sollkonflikt__dokument {
    margin: 6px 0 10px;
    padding: 8px 10px;
    border-left: 3px solid #cbc6cf;
    background: #fff;
}

.dms-sollkonflikt__zeitraum {
    margin: 4px 0;
}

.dms-sollkonflikt > .dms-eingabe {
    margin-top: 8px;
}

.dms-sollkonflikt__erklaerung:empty {
    display: none;
}

.dms-sollkonflikt__erklaerung {
    margin-bottom: 0;
    color: #6b6570;
    font-size: 12px;
}

.dms-erfassungsdaten:not([hidden]) {
    display: flex;
    flex-direction: column;
}

.dms-erfassungsdaten__zeile {
    display: grid;
    grid-template-columns: 22px 105px minmax(0, 1fr);
    align-items: center;
    gap: 5px;

    min-height: 28px;
    padding: 3px 0;
}

.dms-erfassungsdaten--zusatzangaben .dms-erfassungsdaten__zeile {
    grid-template-columns: 22px 135px minmax(0, 1fr);
}

.dms-erfassungsdaten--zusatzangaben .dms-erfassungsdaten__bezeichnung {
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.35;
}

.dms-erfassungsdaten__bezeichnung {
    min-width: 0;

    color: #6b6570;

    font-size: 12px;
    font-weight: 600;

    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.dms-erfassungsdaten__wert {
    min-width: 0;

    color: #3f3b42;

    font-size: 13px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dms-erfassungsdaten__bearbeiten:not([hidden]) {
    width: 22px;
    height: 22px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    background: transparent;

    cursor: pointer;

    font-size: 14px;
    line-height: 1;
}

.dms-erfassungsdaten__bearbeiten:hover {
    background: #f3f4f6;
    border-radius: 4px;
}


/* =========================================================
   Zuweisung / Eingabefelder
   ========================================================= */

.dms-daten__feld {
    margin-bottom: 15px;
}

.dms-zuweisung {
    margin-bottom: 8px;
}

.dms-zuweisung #dmsBearbeiter {
    width: 100%;
}

#dmsZuweisungFormular {
    margin-top: 8px;
}

.dms-daten__feld label,
.dms-neue-bemerkung > label,
.dms-bemerkung__abschlussformular label {
    display: block;
    margin-bottom: 5px;

    color: #77727e;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
}

.dms-bemerkung__abschlussformular label span {
    font-weight: 400;
    text-transform: none;
}

.dms-eingabe {
    box-sizing: border-box;

    width: 100%;
    min-width: 0;

    padding: 8px 9px;

    border: 1px solid #cbc8cf;
    border-radius: 0;

    background: #ffffff;

    color: #3f3b42;

    font: inherit;
    font-size: 13px;
}

.dms-eingabe:focus {
    outline: none;

    border-color: #8d7a99;

    box-shadow: 0 0 0 2px rgba(117, 101, 128, .10);
}

.dms-eingabe:disabled {
    background: #f3f3f4;
    color: #88838c;
    cursor: not-allowed;
}

.dms-eingabe--textarea {
    min-height: 86px;
    resize: vertical;
    line-height: 1.45;
}

.dms-eingabe--klein {
    min-height: 62px;
}

.dms-formular__zweispaltig {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dms-feldhinweis {
    margin-top: 5px;

    color: #918b95;

    font-size: 11px;
    line-height: 1.4;
}

.dms-daten__wert {
    min-width: 0;

    color: #3f3b42;
    font-size: 13px;
    line-height: 1.45;
}

.dms-daten__dateiname {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   Buttons
   ========================================================= */

.dms-button {
    min-height: 34px;
    padding: 7px 12px;

    border: 1px solid transparent;
    border-radius: 0;

    cursor: pointer;
    text-decoration: none;

    font: inherit;
    font-size: 12px;
    font-weight: 600;
}

.dms-button--primaer {
    border-color: #6e5c79;
    background: #756580;
    color: #ffffff;
}

.dms-button--primaer:hover {
    background: #685773;
}

.dms-button--sekundaer {
    border-color: #cbc6cf;
    background: #f5f3f6;
    color: #514858;
}

.dms-button--sekundaer:hover {
    background: #ece8ef;
}

.dms-button--text {
    min-height: auto;
    padding: 4px 0;

    border: 0;
    background: transparent;

    color: #6e5c79;

    font-weight: 600;
}

.dms-button--text:hover {
    text-decoration: underline;
}


/* =========================================================
   Zusatzfelder
   ========================================================= */

#dmsZusatzbereich[hidden] {
    display: none;
}

.dms-zusatzfeld--optional {
    padding: 9px;

    border: 1px dashed #d3cfd6;
    background: #faf9fb;
}

.dms-zusatzfeld__anzeigen {
    padding: 0;

    border: 0;
    background: transparent;

    color: #6e5c79;

    cursor: pointer;

    font: inherit;
    font-size: 12px;
    font-weight: 600;
}

.dms-zusatzfeld__anzeigen:hover {
    text-decoration: underline;
}

/* =========================================================
   Bemerkungen
   ========================================================= */

.dms-bemerkungen-bereich__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    cursor: pointer;
    list-style: none;
}

.dms-bemerkungen-bereich__kopf::-webkit-details-marker {
    display: none;
}

.dms-bemerkungen-bereich__kopf .dms-abschnitt__titel {
    margin-bottom: 0;
}

.dms-bemerkungen-bereich__rechts {
    display: flex;
    align-items: center;
    gap: 7px;
}

.dms-bemerkungen-bereich__pfeil {
    color: #77727e;
    font-size: 12px;
    transition: transform 0.15s ease;
}

.dms-bemerkungen-bereich[open]
.dms-bemerkungen-bereich__pfeil {
    transform: rotate(180deg);
}

.dms-bemerkungen-bereich__kopf + * {
    margin-top: 13px;
}

.dms-bemerkungen__anzahl {
    padding: 3px 7px;

    background: #f1eef3;

    color: #6e5c79;

    font-size: 11px;
    font-weight: 600;
}

.dms-bemerkungen {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.dms-bemerkung {
    padding: 10px 11px;

    border: 1px solid #ddd9e0;
    background: #fbfafb;
}

.dms-bemerkung__kopf {
    margin-bottom: 7px;

    display: flex;
    align-items: center;
    gap: 7px;
}

.dms-bemerkung__statuspunkt {
    flex: 0 0 auto;

    width: 7px;
    height: 7px;

    background: #756580;
}

.dms-bemerkung__statuspunkt--erledigt {
    background: #aaa6ad;
}

.dms-bemerkung__meta {
    color: #89848c;
    font-size: 11px;
}

.dms-bemerkung__text {
    color: #454148;

    font-size: 13px;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

.dms-bemerkung__erledigen {
    margin-top: 9px;
}

.dms-bemerkung__erledigen > summary,
.dms-erledigte > summary {
    color: #6e5c79;

    cursor: pointer;

    font-size: 12px;
    font-weight: 600;

    user-select: none;
}

.dms-bemerkung__abschlussformular {
    margin-top: 10px;
    padding-top: 10px;

    border-top: 1px solid #e6e2e7;
}

.dms-bemerkung__abschlussformular .dms-button {
    margin-top: 7px;
}

.dms-neue-bemerkung {
    margin-top: 14px;
    padding-top: 14px;

    border-top: 1px solid #e7e4e8;
}

.dms-neue-bemerkung .dms-button {
    margin-top: 7px;
}

.dms-leerhinweis {
    padding: 10px;

    border: 1px dashed #d9d5dc;

    color: #918c94;

    font-size: 12px;
    text-align: center;
}

.dms-erledigte {
    margin-top: 14px;
}

.dms-bemerkungen--erledigt {
    margin-top: 10px;
}

.dms-bemerkung--erledigt {
    background: #f4f4f4;

    border-color: #dfdfdf;

    color: #8b888d;

    opacity: .78;
}

.dms-bemerkung--erledigt .dms-bemerkung__text {
    color: #777479;
}

.dms-bemerkung__erledigtmeta {
    margin-top: 8px;

    color: #929096;

    font-size: 11px;
    font-weight: 600;
}

.dms-bemerkung__abschluss {
    margin-top: 7px;
    padding: 7px 8px;

    border-left: 2px solid #bbb7be;
    background: #eeeeef;

    color: #77747a;

    font-size: 12px;
    line-height: 1.45;
}

/* Keine zusätzliche Abschlusslinie innerhalb der Sollstellungsanzeige. */
#dmsSollrelevanzAnzeige > .dms-abschnitt:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* Der vorherige Sollstellungsbereich liefert bereits die Trennlinie. */
#dmsSollrelevanzBereich + .dms-verknuepfungen-kompakt--abgesetzt {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* =========================================================
   Während des Ziehens
   ========================================================= */

body.dms-trenner-wird-gezogen {
    cursor: col-resize;
    user-select: none;
}


/*
 * Schutzfläche während des Ziehens.
 * Dadurch kann das PDF-iframe die Maus nicht mehr
 * "verschlucken", wenn schnell gezogen wird.
 */
.dms-ziehschutz {
    position: fixed;
    z-index: 99999;

    inset: 0;

    cursor: col-resize;

    background: transparent;
}


/* =========================================================
   Kleinere Fenster
   ========================================================= */

@media (max-width: 1050px) {

    .dms-arbeitsplatz {
        --daten-breite: 35%;
    }

    .dms-daten {
        min-width: 260px;
    }

    .dms-formular__zweispaltig {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* =========================================================
   DMS – Posteingang Übersicht
   ========================================================= */

.dms-posteingang-uebersicht {
    padding: 26px 30px 35px;
}

.dms-posteingang-uebersicht__kopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 18px;
    padding-bottom: 10px;

    border-bottom: 1px solid var(--hv-border);
}

.dms-posteingang-uebersicht__kopf h1 {
    margin: 0;

    color: #65576d;
    font-size: 22px;
    font-weight: 600;
}

.dms-posteingang-uebersicht__untertitel,
.dms-posteingang-uebersicht__seiteninfo {
    margin-top: 3px;

    color: #77717b;
    font-size: 12px;
}

.dms-posteingang-uebersicht__liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dms-posteingang-karte {
    min-height: 190px;

    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);

    overflow: hidden;

    border: 1px solid var(--hv-border);
    background: #fff;
}

.dms-posteingang-karte__vorschau {
    position: relative;

    min-width: 0;
    height: 190px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-right: 1px solid var(--hv-border);
    background: #ededf0;

    text-decoration: none;
}

.dms-posteingang-karte__pdf {
    width: 100%;
    height: 100%;

    border: 0;
    background: #fff;

    pointer-events: none;
}

.dms-posteingang-karte__vorschau-klick {
    position: absolute;
    inset: 0;
}

.dms-posteingang-karte__bild {
    display: block;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}

.dms-posteingang-karte__datei {
    color: #77717b;
    font-size: 12px;
}

.dms-posteingang-karte__inhalt {
    min-width: 0;

    display: grid;
    grid-template-columns:
        minmax(230px, 1.15fr)
        minmax(150px, .7fr)
        minmax(280px, 1.55fr);
}

.dms-posteingang-karte__hauptdaten,
.dms-posteingang-karte__klassifikation,
.dms-posteingang-karte__verknuepfungsbereich {
    min-width: 0;
    padding: 14px 16px;
}

.dms-posteingang-karte__klassifikation,
.dms-posteingang-karte__verknuepfungsbereich {
    border-left: 1px solid #ece9ee;
}


.dms-posteingang-karte__hauptdaten {
    display: flex;
    flex-direction: column;
}


.dms-posteingang-karte__datumswerte {
    display: flex;
    gap: 26px;

    margin-top: auto;
    padding-top: 14px;
}

.dms-posteingang-karte__datumswerte span,
.dms-posteingang-karte__label {
    display: block;

    margin-bottom: 3px;

    color: #88828b;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
}

.dms-posteingang-karte__datumswerte strong {
    color: #55505a;
    font-size: 12px;
    font-weight: 500;
}


.dms-posteingang-karte__klassifikation {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.dms-posteingang-karte__infoblock {
    min-width: 0;
}

.dms-posteingang-karte__infoblock strong {
    display: block;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #55505a;
    font-size: 12px;
    font-weight: 600;
}


.dms-posteingang-karte__verknuepfungsbereich {
    display: flex;
    flex-direction: column;
}

.dms-posteingang-karte__verknuepfungen {
    display: flex;
    flex-direction: column;
    gap: 5px;

    min-width: 0;
}

.dms-posteingang-karte__verknuepfung {
    min-width: 0;

    display: grid;
    grid-template-columns: 85px minmax(0, 1fr);
    gap: 8px;

    font-size: 11px;
}

.dms-posteingang-karte__verknuepfung span {
    color: #88828b;
}

.dms-posteingang-karte__verknuepfung strong {
    min-width: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #55505a;
    font-weight: 500;
}

.dms-posteingang-karte__keine-verknuepfung {
    color: #99939c;
    font-size: 11px;
}

.dms-posteingang-karte__aktion {
    margin-top: auto;
    padding-top: 10px;

    text-align: right;
}

.dms-posteingang-karte__status {
    margin-bottom: 5px;

    color: #756580;

    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.dms-posteingang-karte__titel {
    min-width: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #4f4953;

    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.dms-posteingang-karte__titel:hover {
    color: #756580;
    text-decoration: underline;
}

.dms-posteingang-karte__aktion {
    margin-top: auto;
    padding-top: 12px;

    text-align: right;
}

.dms-posteingang-karte__aktion a {
    display: inline-block;

    padding: 5px 10px;

    border: 1px solid #756580;
    background: #756580;

    color: #fff;

    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.dms-posteingang-karte__aktion a:hover {
    border-color: #685773;
    background: #685773;
}

.dms-posteingang-uebersicht__leer {
    padding: 24px;

    border: 1px solid var(--hv-border);
    background: #fff;

    color: #66616a;
}

.dms-posteingang-uebersicht__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    margin-top: 18px;
}

.dms-posteingang-uebersicht__pagination > a,
.dms-posteingang-uebersicht__pagination > span,
.dms-posteingang-uebersicht__seiten a,
.dms-posteingang-uebersicht__seiten span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 28px;
    height: 28px;
    padding: 0 7px;

    box-sizing: border-box;

    border: 1px solid var(--hv-border);
    background: #fff;

    color: #5f5763;

    font-size: 12px;
    text-decoration: none;
}

.dms-posteingang-uebersicht__seiten {
    display: flex;
    gap: 4px;
}

.dms-posteingang-uebersicht__pagination a:hover {
    border-color: #756580;
}

.dms-posteingang-uebersicht__seiten .aktiv {
    border-color: #756580;
    background: #756580;

    color: #fff;
    font-weight: 600;
}

.dms-posteingang-uebersicht__pagination .deaktiviert {
    opacity: .45;
}

/* =========================================================
   DMS – kompakte Anzeige gespeicherter Verknüpfungen
   ========================================================= */

.dms-verknuepfungen-kompakt--abgesetzt {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e3e1e5;
}

.dms-verknuepfungen-kompakt__liste {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.dms-verknuepfung-kompakt {
    display: flex;
    align-items: baseline;
    gap: 6px;

    width: fit-content;
    max-width: 100%;

    padding: 2px 4px;

    color: #4f4654;
    text-decoration: none;

    font-size: 0.75rem;
    line-height: 1.25;

    border-radius: 4px;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.dms-verknuepfung-kompakt:hover {
    background: #f3eff5;
    color: #2f2533;
    text-decoration: none;
}

.dms-verknuepfung-kompakt__typ {
    flex: 0 0 auto;

    min-width: 68px;

    font-weight: 600;
    color: #665b6a;
}

.dms-verknuepfung-kompakt__pfad {
    min-width: 0;
}

.dms-verknuepfung-kompakt__trenner {
    margin: 0 4px;
    color: #aaa1ad;
}

.dms-verknuepfungen-kompakt__leer {
    margin-bottom: 10px;

    color: #8b838d;
    font-size: 0.82rem;
    font-style: italic;
}

.dms-verknuepfungen-kompakt .dms-verknuepfungen-start {
    margin-top: 10px;
}

.dms-verknuepfungen__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.dms-verknuepfungen__button:hover {
    text-decoration: none;
}

/* =========================================================
   DMS – temporär noch benötigter Bezeichnungs-Editor
   ========================================================= */

.dms-erfassungsdaten__editor {
    grid-column: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dms-erfassungsdaten__editor[hidden] {
    display: none;
}

.dms-erfassungsdaten__editor-eingabe {
    flex: 1 1 auto;
    min-width: 0;
}

.dms-erfassungsdaten__editor-button {
    flex: 0 0 auto;
}

/*
 * ============================================================
 * DMS – virtuelle Dokumentenablage
 * ============================================================
 */

.dms-ablage {
    max-width: 900px;
}

.dms-ablage-ordner {
    border: 1px solid #d8d4dc;
    background: #ffffff;
}

.dms-ablage-ordner__kopf {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 11px 14px;

    border-bottom: 1px solid #ddd9e1;

    background: #f2f0f4;
    color: #55485f;

    font-size: 13px;
}

.dms-ablage-ordner__symbol,
.dms-ablage-liegenschaft__symbol {
    width: 16px;
    flex: 0 0 16px;

    color: #756580;
    text-align: center;
}

.dms-ablage-ordner__inhalt {
    padding: 5px 0;
}

.dms-ablage-liegenschaft {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 8px 14px 8px 30px;

    border-bottom: 1px solid #eeeaf0;

    color: #403b43;
    text-decoration: none;
}

.dms-ablage-liegenschaft:last-child {
    border-bottom: 0;
}

.dms-ablage-liegenschaft:hover {
    background: #f6f4f7;
}

.dms-ablage-liegenschaft__text {
    display: flex;
    align-items: baseline;
    gap: 8px;

    min-width: 0;
}

.dms-ablage-liegenschaft__text strong {
    color: #55485f;
    font-size: 12px;
}

.dms-ablage-liegenschaft__text span {
    overflow: hidden;

    color: #59545c;
    font-size: 12px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.dms-ablage-leer {
    padding: 14px;

    color: #88828b;
    font-size: 12px;
}

/* =========================================================
   DMS – Virtuelle Dokumentenablage / Baumstruktur
   ========================================================= */

.dms-ablage-baumordner {
    margin: 0;
}

.dms-ablage-baumordner > summary {
    cursor: pointer;
}

.dms-ablage-baumebene {
    margin-left: 24px;
    padding-left: 12px;
    border-left: 1px solid var(--hv-border);
}

.dms-ablage-baumzeile {
    min-height: 24px;
    line-height: 24px;
}

/* Persönliche Ereignisbenachrichtigungen */
.hv-benachrichtigungen {
    position: relative;
    width: 42px;
    height: 30px;
}
.hv-benachrichtigungen > summary {
    list-style: none;
    cursor: pointer;
}
.hv-benachrichtigungen > summary::-webkit-details-marker {
    display: none;
}
.hv-benachrichtigungen[open] > summary {
    background: #d8d8de;
    color: var(--hv-accent-dark);
    border-color: var(--hv-accent);
}
.hv-benachrichtigungen-dropdown {
    position: absolute;
    z-index: 1000;
    top: 36px;
    right: 0;
    width: 360px;
    max-height: 430px;
    overflow: hidden;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.hv-benachrichtigungen-kopf {
    min-height: 42px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--hv-border);
    box-sizing: border-box;
}
.hv-benachrichtigungen-kopf form, .hv-benachrichtigung-form {
    margin: 0;
}
.hv-benachrichtigungen-alle {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hv-accent);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.hv-benachrichtigungen-alle:hover {
    text-decoration: underline;
}
.hv-benachrichtigungen-liste {
    max-height: 386px;
    overflow-y: auto;
}
.hv-benachrichtigung-form + .hv-benachrichtigung-form {
    border-top: 1px solid var(--hv-border);
}
.hv-benachrichtigung {
    position: relative;
    width: 100%;
    padding: 10px 12px 9px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    border: 0;
    background: var(--hv-surface);
    color: var(--hv-text);
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.hv-benachrichtigung:hover {
    background: #f0f0f3;
}
.hv-benachrichtigung.ungelesen::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 15px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hv-accent);
}
.hv-benachrichtigung-titel {
    font-size: 13px;
    font-weight: 600;
}
.hv-benachrichtigung-text {
    font-size: 12px;
    line-height: 1.35;
}
.hv-benachrichtigung-zeit {
    margin-top: 2px;
    color: #666;
    font-size: 11px;
}
.hv-benachrichtigungen-leer {
    padding: 18px 12px;
    color: #666;
    font-size: 12px;
    text-align: center;
}

/* =========================================================
   Administration – Objektsachkonten bearbeiten
   ========================================================= */

.hv-objektkonten-editor {
    border-color: var(--hv-border) !important;
    background: var(--hv-surface) !important;
}


/*
 * Hauptkopf des Editors
 */

.hv-objektkonten-editor > summary {
    color: var(--hv-accent);
    background: var(--hv-surface) !important;

    font-size: 16px;
    font-weight: 600;

    border-bottom-color: var(--hv-border) !important;
}


/*
 * Kontenlisten
 */

.hv-objektkonten-liste {
    background: var(--hv-surface);
}


/*
 * Einzelne Sach- und Objektsachkonten
 */

.hv-objektkonten-liste > label {
    position: relative;

    margin: 2px 0;
    padding-left: 8px !important;
    padding-right: 8px !important;

    border-radius: 5px;

    transition:
        background 0.15s ease,
        box-shadow 0.15s ease;
}


/*
 * Dezente HV26-Markierung beim Darüberfahren
 */

.hv-objektkonten-liste > label:hover {
    background: rgba(0, 0, 0, 0.035);
    box-shadow: inset 3px 0 0 var(--hv-accent);
}


/*
 * Kontonummer als optischer Anker
 */

.hv-objektkonten-liste > label strong {
    color: var(--hv-accent);
    font-weight: 600;
}


/*
 * Checkboxen etwas sauberer integrieren
 */

.hv-objektkonten-liste input[type="checkbox"] {
    accent-color: var(--hv-accent);
    margin-top: 3px;
}


/*
 * Vom JavaScript erzeugte Gruppenüberschriften.
 *
 * Damit verschwinden die derzeitigen einfachen
 * schwarzen Fettüberschriften und werden zu echten
 * HV26-Abschnitten.
 */

.hv-objektkonten-liste
.objektkonten-kosten-untergruppe {
    margin: 8px 0 5px;
    padding: 7px 8px 5px !important;

    color: var(--hv-accent);

    font-size: 13px;
    font-weight: 600 !important;

    background: transparent;
    border-bottom: 1px solid var(--hv-border) !important;
}


/*
 * Erste Gruppenüberschrift braucht oben weniger Abstand.
 */

.hv-objektkonten-liste
.objektkonten-kosten-untergruppe:first-child {
    margin-top: 0;
}

/* =========================================================
   Buchhaltung - Geldkonten kompakt
   ========================================================= */

.hv-geldkonto-karte {
    padding: 12px 14px;

    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
}

.hv-geldkonto-karte + .hv-geldkonto-karte {
    margin-top: 8px;
}

.hv-geldkonto-karte-inaktiv {
    opacity: 0.72;
    background: #eeeeF1;
}


/* Kopf */

.hv-geldkonto-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 10px;
}

.hv-geldkonto-titel {
    min-width: 0;

    font-size: 14px;
    font-weight: 600;
}

.hv-geldkonto-status {
    margin-left: 6px;

    color: var(--hv-muted);

    font-size: 12px;
    font-weight: 600;
}

.hv-geldkonto-funktion {
    flex: 0 0 auto;

    color: var(--hv-accent);

    font-size: 13px;
    font-weight: 600;
}


/* Kontodaten */

.hv-geldkonto-daten {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.hv-geldkonto-zeile {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);

    align-items: center;

    gap: 18px;

    min-height: 34px;
}

.hv-geldkonto-information {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);

    align-items: baseline;

    gap: 8px;

    min-width: 0;

    font-size: 13px;
}

.hv-geldkonto-label {
    font-weight: 600;
}

.hv-geldkonto-wert {
    min-width: 0;

    overflow-wrap: anywhere;
}


/* Aktionsbuttons - Personenstil */

.hv-geldkonto-aktion {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    padding: 0;

    background: var(--hv-surface);
    color: var(--hv-accent);

    border: 1px solid var(--hv-border);
    border-radius: 0;

    cursor: pointer;
}

.hv-geldkonto-aktion:hover {
    background: #e2e2e6;
    border-color: var(--hv-accent);
    color: var(--hv-accent-dark);
}

.hv-geldkonto-aktion svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hv-geldkonto-aktion-platzhalter {
    display: block;

    width: 34px;
    height: 34px;
}

.hv-geldkonto-aktionsform {
    margin: 0;
    padding: 0;
}


/* Bearbeitung */

.hv-geldkonto-bearbeitung {
    margin-top: 16px;
    padding: 18px;

    background: #f7f7f9;

    border: 1px solid var(--hv-border);
}

.geldkonto-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px 20px;
}

#geldkonto_anlegen .geldkonto-form,
#geldkonto_zuordnen form {
    margin-top: 1.25rem;
}

.hv-geldkonto-formfeld {
    display: flex;
    flex-direction: column;

    gap: 6px;
    margin: 0;

    min-width: 0;
}

.hv-geldkonto-formfeld > span {
    display: block;

    margin: 0;

    color: var(--hv-text);

    font-size: 13px;
    font-weight: 600;
}

.hv-geldkonto-formfeld input,
.hv-geldkonto-formfeld select {
    width: 100%;
    min-height: 38px;

    padding: 7px 9px;

    box-sizing: border-box;

    background: var(--hv-surface);
    color: var(--hv-text);

    border: 1px solid var(--hv-border);
    border-radius: 0;

    font: inherit;
}

.hv-geldkonto-formfeld input:focus,
.hv-geldkonto-formfeld select:focus {
    outline: none;

    border-color: var(--hv-accent);
}

.hv-geldkonto-bankdaten-hinweis {
    grid-column: 1 / -1;

    margin: -4px 0 0;

    color: var(--hv-muted);

    font-size: 13px;
    line-height: 1.4;
}

.hv-geldkonto-bearbeitung .geldkonto-form > button[type="submit"] {
    grid-column: 1 / -1;

    justify-self: start;

    margin-top: 4px;
}

.hv-geldkonto-bank-hinzufuegen {
    align-self: flex-start;

    width: auto;
    min-height: auto;

    margin-top: 2px;
    padding: 7px 12px;

    box-sizing: border-box;

    text-decoration: none;
}

/* =========================================================
   Administration – Navigation in der normalen Sidebar
   ========================================================= */

.hv-sidebar-group {
    margin: 0;
    padding: 0;
}


/* Oberbegriffe wie normale HV26-Navigationszeilen */

.hv-sidebar-group > summary {
    position: relative;

    padding: 11px 38px 11px 18px;

    color: var(--hv-text);
    font-size: 14px;
    font-weight: 400;

    border-bottom: 1px solid #d3d3d7;

    cursor: pointer;
    list-style: none;
}

.hv-sidebar-group > summary::-webkit-details-marker {
    display: none;
}

.hv-sidebar-group > summary:hover {
    background: #d9d9de;
    color: var(--hv-accent);
}


/* Auf-/Zuklapp-Pfeil nur rechts */

.hv-sidebar-group > summary::after {
    content: "›";

    position: absolute;
    top: 50%;
    right: 18px;

    transform: translateY(-50%);

    color: var(--hv-muted);
    font-size: 16px;
    line-height: 1;
}

.hv-sidebar-group[open] > summary::after {
    transform: translateY(-50%) rotate(90deg);
}


/* Unterpunkte analog zu vorhandenen Untereinträgen */

.hv-sidebar-group-items {
    background: #dddde1;
    border-bottom: 1px solid #d3d3d7;
}

.hv-subnav .hv-sidebar-group-items > a {
    display: block;

    padding: 8px 12px 8px 34px;

    color: var(--hv-muted);
    text-decoration: none;
    font-size: 13px;

    border-bottom: 1px solid #d0d0d5;
}

.hv-subnav .hv-sidebar-group-items > a:last-child {
    border-bottom: 0;
}

.hv-subnav .hv-sidebar-group-items > a:hover {
    background: #d4d4d9;
    color: var(--hv-accent);
}

.hv-subnav .hv-sidebar-group-items > a.active {
    padding-left: 30px;

    background: var(--hv-surface);
    color: var(--hv-accent);

    border-left: 4px solid var(--hv-accent);

    font-weight: 600;
}

.hv-sidebar-group > summary.active {
    padding-left: 14px;

    background: var(--hv-surface);
    color: var(--hv-accent);

    border-left: 4px solid var(--hv-accent);

    font-weight: 600;
}

/* =========================================================
   Buchhaltung - Modul
   ========================================================= */

/* =========================================================
   Buchhaltung – zusätzliche Kontext-Sidebar
   ========================================================= */

.buchhaltung-kontextsidebar {
    width: 220px;
    flex: 0 0 220px;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    background: #f7f6f8;
    border-right: 1px solid #d8d5dc;
}

.buchhaltung-kontextsidebar__kopf {
    flex: 0 0 auto;
    padding: 13px 14px 11px;

    border-bottom: 1px solid #d8d5dc;
    background: #f1eff3;
}

.buchhaltung-kontextsidebar__titel {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 13px;
    font-weight: 700;
    color: #4f4953;
}

.buchhaltung-kontextsidebar__untertitel {
    margin-top: 3px;

    font-size: 11px;
    color: #85808a;
}

.buchhaltung-kontextsidebar__inhalt {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.buchhaltung-kontextsidebar__eintrag {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 14px;

    border-bottom: 1px solid #e5e2e7;

    color: inherit;
    text-decoration: none;
}

.buchhaltung-kontextsidebar__eintrag:hover {
    background: #efedf1;
}

.buchhaltung-kontextsidebar__eintrag.ausgewaehlt {
    padding-left: 10px;
    border-left: 4px solid var(--hv-accent);

    background: #e8e3eb;
    font-weight: 600;
}

/* Bereichsüberschrift innerhalb der Buchhaltungs-Kontextsidebar */
.buchhaltung-kontextsidebar__bereichstitel {
    padding: 16px 12px 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Hinweis bei leerem Bereich */
.buchhaltung-kontextsidebar__leer {
    padding: 6px 12px 12px;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.7;
}

.buchhaltung-sollstellung-kontierung {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.buchhaltung-sollstellung-kontierungsbetrag {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
}

.buchhaltung-sollstellung-buchungen {
    width: 100%;
    table-layout: fixed;
}

.buchhaltung-sollstellung-buchungen th:nth-child(1),
.buchhaltung-sollstellung-buchungen td:nth-child(1) {
    width: 8%;
}

.buchhaltung-sollstellung-buchungen th:nth-child(2),
.buchhaltung-sollstellung-buchungen td:nth-child(2) {
    width: 20%;
}

.buchhaltung-sollstellung-buchungen th:nth-child(3),
.buchhaltung-sollstellung-buchungen td:nth-child(3) {
    width: 21%;
}

.buchhaltung-sollstellung-buchungen th:nth-child(4),
.buchhaltung-sollstellung-buchungen td:nth-child(4) {
    width: 21%;
}

.buchhaltung-sollstellung-buchungen th:nth-child(5),
.buchhaltung-sollstellung-buchungen td:nth-child(5) {
    width: 7%;
}

.buchhaltung-sollstellung-buchungen th:nth-child(6),
.buchhaltung-sollstellung-buchungen td:nth-child(6) {
    width: 7%;
}

.buchhaltung-sollstellung-buchungen th:nth-child(7),
.buchhaltung-sollstellung-buchungen td:nth-child(7) {
    width: 7%;
}

.buchhaltung-sollstellung-buchungen th:nth-child(8),
.buchhaltung-sollstellung-buchungen td:nth-child(8) {
    width: 8%;
}

.buchhaltung-sollstellung-buchungen th:nth-child(9),
.buchhaltung-sollstellung-buchungen td:nth-child(9) {
    width: 5%;
}
.buchhaltung-sollstellung-buchungen td:nth-child(1),
.buchhaltung-sollstellung-buchungen td:nth-child(5),
.buchhaltung-sollstellung-buchungen td:nth-child(6),
.buchhaltung-sollstellung-buchungen td:nth-child(7),
.buchhaltung-sollstellung-buchungen td:nth-child(8),
.buchhaltung-sollstellung-buchungen td:nth-child(9) {
    white-space: nowrap;
}

.buchhaltung-sollstellung-kopf-kontierung {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.buchhaltung-sollstellung-buchungen th,
.buchhaltung-sollstellung-buchungen td {
    border-right: 1px solid #d2d2d8;
}

.buchhaltung-sollstellung-buchungen th:last-child,
.buchhaltung-sollstellung-buchungen td:last-child {
    border-right: none;
}

/* =========================================================
   Buchhaltung – kontextabhängige zweite Sidebar
   ========================================================= */

.buchhaltung-kontextsidebar {
    width: 205px;
    flex: 0 0 205px;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    background: #f7f6f8;
    border-right: 1px solid #d8d5dc;
}

.buchhaltung-kontextsidebar__kopf {
    flex: 0 0 auto;
    padding: 13px 14px 11px;

    background: #f1eff3;
    border-bottom: 1px solid #d8d5dc;
}

.buchhaltung-kontextsidebar__titel {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 13px;
    font-weight: 700;
    color: #4f4953;
}

.buchhaltung-kontextsidebar__untertitel {
    margin-top: 3px;

    font-size: 11px;
    color: #85808a;
}

.buchhaltung-kontextsidebar__inhalt {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: #c4c0c7 transparent;
}

.buchhaltung-kontextsidebar__eintrag {
    min-width: 0;
    padding: 10px 14px;

    display: block;

    border-bottom: 1px solid #e5e2e7;

    color: #59525d;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.35;
}

.buchhaltung-kontextsidebar__eintrag:hover {
    background: #efedf1;
    color: #4f4953;
}

.buchhaltung-kontextsidebar__eintrag.ausgewaehlt {
    padding-left: 11px;

    background: #e8e3ed;
    border-left: 3px solid #756580;

    color: #4f4953;
    font-weight: 700;
}

.buchhaltung-kontextsidebar__bereichstitel {
    padding: 14px 14px 7px;

    font-size: 10px;
    line-height: 1.25;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #77717b;
}

.buchhaltung-kontextsidebar__leer {
    padding: 8px 14px 14px;

    font-size: 12px;
    line-height: 1.4;
    color: #85808a;
}

/* Status der gebuchten Sollstellungsmonate */

.buchhaltung-kontextsidebar__eintrag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.buchhaltung-kontextsidebar__monat {
    min-width: 0;
}

.buchhaltung-kontextsidebar__status {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

.buchhaltung-kontextsidebar__status--vollstaendig {
    color: #2f7d32;
    background: #e8f3e8;
}

.buchhaltung-kontextsidebar__status--offen {
    color: #9a6700;
    background: #fff2cc;
}

/* =========================================================
   Buchhaltung – Aktionen bei fehlendem Debitor
   ========================================================= */

.buchhaltung-debitor-aktionen {
    margin-top: 8px;

    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.buchhaltung-debitor-aktionen form {
    margin: 0;
}

.buchhaltung-debitor-aktionen .hv-button-primary,
.buchhaltung-debitor-aktionen .hv-button-secondary {
    height: 38px;
    padding: 0 14px;
    box-sizing: border-box;

    font-size: 13px;
    line-height: 1;
}

.buchhaltung-kontextsidebar__bereichstitel {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 2px solid #b8b6bf;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.buchhaltung-kontextsidebar__eintrag--hauptfilter {
    font-weight: 600;
}

.buchhaltung-kontextsidebar__klappkopf {
    display: block;
    width: 100%;

    background: transparent;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;

    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.buchhaltung-kontextsidebar__pfeil {
    display: inline-block;
    width: 14px;
}

.buchhaltung-kontextsidebar__klappbereich[hidden] {
    display: none;
}

/* =========================================================
   Buchhaltung - Liegenschaftskonten
   ========================================================= */

.buchhaltung-kontenfilter {
    margin-bottom: 8px;
    padding: 4px 10px;
}

.buchhaltung-kontenfilter__zeile {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.buchhaltung-kontenfilter__feld {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.buchhaltung-kontenfilter__feld label {
    color: var(--hv-muted);
    font-size: 12px;
    font-weight: 600;
}

.buchhaltung-kontenfilter__feld select,
.buchhaltung-kontenfilter__feld input {
    width: auto;
    height: 32px;
}

.buchhaltung-kontenfilter__feld select {
    min-width: 170px;
    height: auto;
    min-height: 32px;
    padding: 4px 10px;
    line-height: normal;
    box-sizing: border-box;
}

.buchhaltung-kontenfilter__feld input[type="number"] {
    width: 80px;
}

.buchhaltung-kontenfilter__feld input[type="date"] {
    width: 140px;
}

.buchhaltung-kontenfilter__aktion .hv-button-primary {
    height: 32px;
    padding: 0 14px;
}

.buchhaltung-konten-gruppentitel {
    margin-top: 24px;
    padding: 10px 12px;

    border-top: 2px solid var(--hv-border);

    color: var(--hv-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 1000px) {

    .buchhaltung-kontenfilter__zeile {
        align-items: stretch;
    }
}

/* ---------------------------------------------------------
 * Buchhaltung – Buchungsjournal
 * --------------------------------------------------------- */

.buchhaltung-buchungsjournal {
    table-layout: fixed;
    width: 100%;
}

/* Buchungsnummer */
.buchhaltung-buchungsjournal th:nth-child(1),
.buchhaltung-buchungsjournal td:nth-child(1) {
    width: 7%;
}

/* Buchungsdatum */
.buchhaltung-buchungsjournal th:nth-child(2),
.buchhaltung-buchungsjournal td:nth-child(2) {
    width: 6%;
}

/* Wertstellung */
.buchhaltung-buchungsjournal th:nth-child(3),
.buchhaltung-buchungsjournal td:nth-child(3) {
    width: 6%;
}

/* Abgrenzung von */
.buchhaltung-buchungsjournal th:nth-child(4),
.buchhaltung-buchungsjournal td:nth-child(4) {
    width: 6%;
}

/* Abgrenzung bis */
.buchhaltung-buchungsjournal th:nth-child(5),
.buchhaltung-buchungsjournal td:nth-child(5) {
    width: 6%;
}

/* Buchungstext */
.buchhaltung-buchungsjournal th:nth-child(6),
.buchhaltung-buchungsjournal td:nth-child(6) {
    width: 17%;
}

/* Konto Soll */
.buchhaltung-buchungsjournal th:nth-child(7),
.buchhaltung-buchungsjournal td:nth-child(7) {
    width: 13%;
}

/* Betrag Soll */
.buchhaltung-buchungsjournal th:nth-child(8),
.buchhaltung-buchungsjournal td:nth-child(8) {
    width: 7%;
}

/* Konto Haben */
.buchhaltung-buchungsjournal th:nth-child(9),
.buchhaltung-buchungsjournal td:nth-child(9) {
    width: 13%;
}

/* Betrag Haben */
.buchhaltung-buchungsjournal th:nth-child(10),
.buchhaltung-buchungsjournal td:nth-child(10) {
    width: 7%;
}

/* Summe */
.buchhaltung-buchungsjournal th:nth-child(11),
.buchhaltung-buchungsjournal td:nth-child(11) {
    width: 6%;
}

/* Buchungsart */
.buchhaltung-buchungsjournal th:nth-child(12),
.buchhaltung-buchungsjournal td:nth-child(12) {
    width: 6%;
}

.buchhaltung-buchungsjournal tbody td {
    vertical-align: top;
}

/*
 * Datums- und Betragswerte möglichst zusammenhalten.
 */
.buchhaltung-buchungsjournal td:nth-child(2),
.buchhaltung-buchungsjournal td:nth-child(3),
.buchhaltung-buchungsjournal td:nth-child(4),
.buchhaltung-buchungsjournal td:nth-child(5),
.buchhaltung-buchungsjournal td:nth-child(8),
.buchhaltung-buchungsjournal td:nth-child(10),
.buchhaltung-buchungsjournal td:nth-child(11) {
    white-space: nowrap;
}

/* ---------------------------------------------------------
 * Buchhaltung – Kontoeinzelansicht
 * --------------------------------------------------------- */

.buchhaltung-kontokopf {
    padding: 0;
    overflow: hidden;
}

.buchhaltung-kontokopf__titel {
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 700;
    border-bottom: 1px solid var(--hv-border);
}

.buchhaltung-kontokopf__inhalt {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: start;
    padding: 10px 12px;
}

.buchhaltung-kontokopf__informationen {
    display: grid;
    grid-template-columns: 320px 260px;
    gap: 40px;
    align-content: start;
}

.buchhaltung-kontokopf__info {
    display: grid;
    grid-template-columns: 105px auto;
    gap: 10px;
    padding: 3px 0;
}

.buchhaltung-kontokopf__info span {
    font-weight: 600;
}

.buchhaltung-kontokopf__info strong {
    font-weight: 400;
}

.buchhaltung-kontokopf__filter {
    min-width: 620px;
}

.buchhaltung-kontokopf__zurueck {
    margin-top: 5px;
    text-align: right;
    font-size: 12px;
}

.buchhaltung-konto-einzelansicht__navigation {
    margin: 6px 0 12px;
}

.buchhaltung-konto-einzelansicht__buchungskopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin: 12px 0 6px;
}

.buchhaltung-konto-einzelansicht__buchungskopf > strong {
    font-size: 15px;
}

.buchhaltung-konto-einzelansicht__buchungskopf > span {
    color: var(--hv-muted);
    font-size: 12px;
}

.buchhaltung-konto-einzelansicht__summen {
    margin-top: 8px;
    padding: 10px 12px;
    border-top: 2px solid var(--hv-border);
}

.buchhaltung-konto-einzelansicht__summen-titel {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
}

.buchhaltung-konto-einzelansicht__summen-werte {
    display: flex;
    justify-content: flex-end;
    gap: 40px;
}

.buchhaltung-konto-einzelansicht__summen-werte > div {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.buchhaltung-konto-einzelansicht__summen-werte span {
    color: var(--hv-muted);
    font-size: 12px;
}

.buchhaltung-konto-einzelansicht__pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    margin-top: 8px;
    font-size: 12px;
}

.buchhaltung-konto-einzelansicht__pagination > div:nth-child(2) {
    color: var(--hv-muted);
}

.buchhaltung-konto-einzelansicht__pagination > div:last-child {
    text-align: right;
}

/* =========================================================
 * Buchhaltung – Kontenblatt / Buchungstabelle
 * ========================================================= */

.buchhaltung-kontenblatt-tabelle {
    width: 100%;
    table-layout: fixed;
}

/* Buchungsnummer */
.buchhaltung-kontenblatt-tabelle th:nth-child(1),
.buchhaltung-kontenblatt-tabelle td:nth-child(1) {
    width: 7%;
}

/* Buchungsdatum */
.buchhaltung-kontenblatt-tabelle th:nth-child(2),
.buchhaltung-kontenblatt-tabelle td:nth-child(2) {
    width: 6%;
}

/* Wertstellung */
.buchhaltung-kontenblatt-tabelle th:nth-child(3),
.buchhaltung-kontenblatt-tabelle td:nth-child(3) {
    width: 6%;
}

/* Abgrenzung von */
.buchhaltung-kontenblatt-tabelle th:nth-child(4),
.buchhaltung-kontenblatt-tabelle td:nth-child(4) {
    width: 6%;
}

/* Abgrenzung bis */
.buchhaltung-kontenblatt-tabelle th:nth-child(5),
.buchhaltung-kontenblatt-tabelle td:nth-child(5) {
    width: 6%;
}

/* Buchungstext */
.buchhaltung-kontenblatt-tabelle th:nth-child(6),
.buchhaltung-kontenblatt-tabelle td:nth-child(6) {
    width: 22%;
}

/* Gegenkonto */
.buchhaltung-kontenblatt-tabelle th:nth-child(7),
.buchhaltung-kontenblatt-tabelle td:nth-child(7) {
    width: 22%;
}

/* Soll */
.buchhaltung-kontenblatt-tabelle th:nth-child(8),
.buchhaltung-kontenblatt-tabelle td:nth-child(8) {
    width: 8%;
    text-align: right;
}

/* Haben */
.buchhaltung-kontenblatt-tabelle th:nth-child(9),
.buchhaltung-kontenblatt-tabelle td:nth-child(9) {
    width: 8%;
    text-align: right;
}

/* Buchungsart */
.buchhaltung-kontenblatt-tabelle th:nth-child(10),
.buchhaltung-kontenblatt-tabelle td:nth-child(10) {
    width: 9%;
}

/*
 * Datums- und Betragswerte möglichst zusammenhalten.
 */
.buchhaltung-kontenblatt-tabelle td:nth-child(2),
.buchhaltung-kontenblatt-tabelle td:nth-child(3),
.buchhaltung-kontenblatt-tabelle td:nth-child(4),
.buchhaltung-kontenblatt-tabelle td:nth-child(5),
.buchhaltung-kontenblatt-tabelle td:nth-child(8),
.buchhaltung-kontenblatt-tabelle td:nth-child(9) {
    white-space: nowrap;
}

.buchhaltung-kontenblatt-tabelle tbody td {
    vertical-align: top;
}

/* ---------------------------------------------------------
   Buchhaltung – Sollstellungen / Protokoll
   --------------------------------------------------------- */

.buchhaltung-sollstellung-protokoll details {
    margin-bottom: 8px;
    border: 1px solid var(--hv-border);
    border-radius: 4px;
    overflow: hidden;
}

.buchhaltung-sollstellung-protokoll summary {
    padding: 12px 14px;
    background: #f7f6f8;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
}

.buchhaltung-sollstellung-protokoll summary:hover {
    background: #efedf1;
}

.buchhaltung-sollstellung-protokoll details[open] summary {
    background: #e8e3ed;
    border-bottom: 1px solid var(--hv-border);
}

.buchhaltung-sollstellung-protokoll details > table {
    margin: 0;
    width: 100%;
    table-layout: fixed;
}

.buchhaltung-sollstellung-protokoll details > table th:nth-child(1) {
    width: 10%;
}

.buchhaltung-sollstellung-protokoll details > table th:nth-child(2) {
    width: 10%;
}

.buchhaltung-sollstellung-protokoll details > table th:nth-child(3) {
    width: 10%;
}

.buchhaltung-sollstellung-protokoll details > table th:nth-child(4) {
    width: 15%;
}

.buchhaltung-sollstellung-protokoll details > table th:nth-child(5) {
    width: 55%;
}

.buchhaltung-sollstellung-protokoll details > table th,
.buchhaltung-sollstellung-protokoll details > table td {
    vertical-align: top;
    overflow-wrap: anywhere;
}

.buchhaltung-sollstellung-protokoll details > table td ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.buchhaltung-sollstellung-protokoll details > p {
    padding: 12px 14px;
    margin: 0;
}

/* =========================================================
   Buchhaltung – Buchungsdaten und Dokument nebeneinander
   ========================================================= */

.hv-belegarbeitsplatz {
    --beleg-links: 50fr;
    --beleg-rechts: 50fr;

    display: grid;
    grid-template-columns:
        minmax(0, var(--beleg-links))
        12px
        minmax(0, var(--beleg-rechts));
    align-items: stretch;

    height: clamp(480px, calc(100vh - 230px), 1000px);
    min-width: 0;
}

.hv-belegarbeitsplatz__daten {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable;
    padding-right: 12px;
}

.hv-belegarbeitsplatz__daten .hv-card {
    min-width: 0;
    overflow-x: auto;
}

.hv-belegarbeitsplatz__daten .hv-table td,
.hv-belegarbeitsplatz__daten .hv-table th {
    overflow-wrap: anywhere;
}

/* Buchungsdetails: kompakte Karten und Tabellen. */
#buchungBelegarbeitsplatz .hv-belegarbeitsplatz__daten .hv-card {
    padding: 12px;
    margin-bottom: 12px;
}

#buchungBelegarbeitsplatz .hv-belegarbeitsplatz__daten .hv-card h2 {
    margin: 0 0 10px;
    font-size: 17px;
    line-height: 1.3;
}

#buchungBelegarbeitsplatz .hv-belegarbeitsplatz__daten .hv-card p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.4;
}

#buchungBelegarbeitsplatz .hv-belegarbeitsplatz__daten .hv-table th,
#buchungBelegarbeitsplatz .hv-belegarbeitsplatz__daten .hv-table td {
    padding: 6px 8px;
    vertical-align: top;
    line-height: 1.4;
}

/* Buchungskopf: stabile Spalten auch bei geöffneter Historie. */
#buchungBelegarbeitsplatz .hv-belegarbeitsplatz__daten > .hv-card > table.hv-table:not(.hv-buchungspositionen) {
    width: 100%;
    table-layout: fixed;
}

#buchungBelegarbeitsplatz .hv-belegarbeitsplatz__daten > .hv-card > table.hv-table:not(.hv-buchungspositionen) > tbody > tr > th:first-child {
    width: 25%;
}

/* Dokumentenliste neben dem Plus-Button. */
#buchungBelegarbeitsplatz td > .hv-belegaktionen {
    display: flex;
    align-items: flex-start;
    white-space: normal;
    min-width: 0;
}

#buchungBelegarbeitsplatz .hv-buchung-dokumenthinweise {
    flex: 1 1 0;
    min-width: 0;
}

#buchungBelegarbeitsplatz .hv-buchungspositionen tbody td:last-child,
#buchungBelegarbeitsplatz .hv-buchungspositionen tfoot th:last-child {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#buchungBelegarbeitsplatz .hv-buchungspositionen tfoot th {
    padding-top: 9px;
    padding-bottom: 9px;
    border-top: 2px solid var(--hv-border);
}

.hv-belegarbeitsplatz__trenner {
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: col-resize;
    touch-action: none;
    user-select: none;
    background: #f3f4f6;
}

.hv-belegarbeitsplatz__trenner > span {
    width: 3px;
    height: 46px;
    border-radius: 3px;
    background: #c1bdc6;
}

.hv-belegarbeitsplatz__trenner:hover > span,
.hv-belegarbeitsplatz__trenner.ist-aktiv > span {
    background: #746582;
}

.hv-belegarbeitsplatz__trenner:focus-visible {
    outline: 2px solid #746582;
    outline-offset: -2px;
}

.hv-belegarbeitsplatz__vorschau {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 0;

    border: 1px solid #e3e1e5;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
}

.hv-belegarbeitsplatz__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;

    padding: 12px;
    border-bottom: 1px solid #e3e1e5;
}

.hv-belegarbeitsplatz__titel {
    flex: 1 1 180px;
    min-width: 0;
}

.hv-belegarbeitsplatz__titel strong,
.hv-belegarbeitsplatz__titel span {
    display: block;
}

.hv-belegarbeitsplatz__titel span {
    margin-top: 4px;
    font-size: 12px;
    overflow-wrap: anywhere;
}

#buchungBelegarbeitsplatz .hv-buchung-dokumenthinweise summary {
    cursor: pointer;
    color: var(--hv-accent);
}

#buchungBelegarbeitsplatz .hv-buchung-dokumenthinweise ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

#buchungBelegarbeitsplatz .hv-buchung-dokumenthinweise li {
    display: flow-root;
    position: relative;
    padding: 6px 152px 6px 0;
    min-height: 44px;
    border-top: 1px solid var(--hv-border);
}

#buchungBelegarbeitsplatz .hv-buchung-dokumenthinweise__aktionen {
    position: absolute;
    top: 6px;
    right: 0;
    margin: 0;
}

#buchungBelegarbeitsplatz .hv-buchung-dokumenthinweise li > div {
    margin-top: 2px;
}

/* Buchungsdetails: Angaben und Navigation zum aktuellen Dokument. */
#buchungBelegarbeitsplatz .hv-belegarbeitsplatz__titel {
    min-width: 0;
    flex: 1;
}

#buchungVorschauTitel,
#buchungVorschauMetadaten {
    white-space: normal;
    overflow-wrap: anywhere;
}

#buchungVorschauMetadaten {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--hv-accent);
}

#buchungBelegarbeitsplatz .hv-belegnavigation {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

#buchungVorschauZaehler {
    font-size: 13px;
    white-space: nowrap;
}

#buchungBelegarbeitsplatz .hv-belegnavigation button {
    font-size: 22px;
    line-height: 1;
}

#buchungBelegarbeitsplatz .hv-belegnavigation button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Vorschaukopf: Dokumentangaben oben, Bedienung darunter. */
#buchungBelegarbeitsplatz .hv-belegarbeitsplatz__kopf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 16px;
}

#buchungBelegarbeitsplatz .hv-belegarbeitsplatz__titel {
    display: contents;
}

#buchungBelegarbeitsplatz .hv-belegarbeitsplatz__titel > strong,
#buchungVorschauTitel,
#buchungVorschauMetadaten {
    grid-column: 1 / -1;
    margin: 0;
}

#buchungVorschauTitel {
    font-size: 14px;
    line-height: 1.4;
}

#buchungVorschauMetadaten {
    line-height: 1.4;
}

#buchungBelegarbeitsplatz .hv-belegnavigation {
    grid-column: 1;
    grid-row: 4;
    margin: 0;
}

#buchungBelegarbeitsplatz .hv-belegarbeitsplatz__aktionen {
    grid-column: 2;
    grid-row: 4;
    justify-content: flex-end;
    align-items: center;
}

#buchungVorschauZaehler {
    margin: 0;
}

@media (max-width: 600px) {
    #buchungBelegarbeitsplatz .hv-belegarbeitsplatz__kopf {
        grid-template-columns: minmax(0, 1fr);
    }

    #buchungBelegarbeitsplatz .hv-belegarbeitsplatz__aktionen {
        grid-column: 1;
        grid-row: 5;
        justify-content: flex-start;
    }
}

.hv-belegarbeitsplatz__aktionen {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hv-belegarbeitsplatz__flaeche {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: #e5e7eb;
}

.hv-belegarbeitsplatz__pdf {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff;
}

.hv-belegarbeitsplatz__bildbereich {
    min-height: 100%;
    padding: 16px;
    box-sizing: border-box;
}

.hv-belegarbeitsplatz__bildbereich img {
    display: block;
    width: 100%;
    height: auto;
}

.hv-belegarbeitsplatz__hinweis {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100%;
    padding: 24px;
    box-sizing: border-box;

    text-align: center;
    color: #64748b;
}

/* Verhindert, dass display-Regeln versteckte Elemente einblenden. */
.hv-belegarbeitsplatz [hidden] {
    display: none !important;
}

.hv-belegarbeitsplatz [data-buchung-vorschau].ist-aktiv,
.hv-belegarbeitsplatz [data-buchung-dokument-id].ist-aktiv {
    background: #eee8f3;
    border-color: #746582;
}

.hv-belegarbeitsplatz__ziehschutz {
    position: fixed;
    inset: 0;
    z-index: 9999;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}

@media (max-width: 1100px) {
    .hv-belegarbeitsplatz {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        gap: 16px;
    }

    .hv-belegarbeitsplatz__daten {
        overflow: visible;
        padding-right: 0;
    }

    .hv-belegarbeitsplatz__trenner {
        display: none;
    }

    .hv-belegarbeitsplatz__vorschau {
        height: 70vh;
        min-height: 400px;
    }
}

/* Dokumentaktionen als kompakte Symbole in einer Zeile. */
.hv-belegaktionen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.hv-belegaktionen .hv-belegaktion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    box-sizing: border-box;
    appearance: none;
    border: 1px solid #dfe6ee;
    border-radius: 4px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.hv-belegaktion svg {
    display: block;
}

/* Buchungspositionen: gleich breite Kontospalten. */
.hv-buchungspositionen {
    width: 100%;
    table-layout: fixed;
    min-width: 660px;
}

.hv-belegarbeitsplatz .hv-buchungspositionen th,
.hv-belegarbeitsplatz .hv-buchungspositionen td {
    vertical-align: top;
}

.hv-belegarbeitsplatz .hv-buchungspositionen tbody td:nth-child(3),
.hv-belegarbeitsplatz .hv-buchungspositionen tbody td:nth-child(4),
.hv-belegarbeitsplatz .hv-buchungspositionen tbody td:nth-child(5),
.hv-belegarbeitsplatz .hv-buchungspositionen tfoot th:last-child {
    white-space: nowrap;
    overflow-wrap: normal;
}

.hv-buchungspositionen tbody td:last-child,
.hv-buchungspositionen tfoot th:last-child {
    text-align: right;
}

/* ---------------------------------------------------------
 * Buchhaltung – Offene Posten Debitoren
 * --------------------------------------------------------- */

.buchhaltung-opos-tabelle {
    width: 100%;
    table-layout: fixed;
}

.buchhaltung-opos-tabelle th,
.buchhaltung-opos-tabelle td {
    padding: 8px;
    vertical-align: top;
}

/* Einheitliche Spaltenbreiten für alle Debitorentabellen */

.buchhaltung-opos-tabelle th:nth-child(1) {
    width: 8%;
}

.buchhaltung-opos-tabelle th:nth-child(2) {
    width: 25%;
}

.buchhaltung-opos-tabelle th:nth-child(3),
.buchhaltung-opos-tabelle th:nth-child(4) {
    width: 7%;
}

.buchhaltung-opos-tabelle th:nth-child(5) {
    width: 8%;
}

.buchhaltung-opos-tabelle th:nth-child(6),
.buchhaltung-opos-tabelle th:nth-child(7) {
    width: 7%;
}

.buchhaltung-opos-tabelle th:nth-child(8) {
    width: 6%;
}

.buchhaltung-opos-tabelle th:nth-child(9) {
    width: 9%;
}

.buchhaltung-opos-tabelle th:nth-child(10),
.buchhaltung-opos-tabelle th:nth-child(11) {
    width: 8%;
}

/* Gemeinsame Buchungsdaten */

.buchhaltung-opos-tabelle .buchhaltung-opos-buchung > td {
    background: #e8e5ec;
    border-top: 2px solid var(--hv-border);
    border-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

.buchhaltung-opos-tabelle .buchhaltung-opos-buchung > td:first-child {
    white-space: nowrap;
}

.buchhaltung-opos-tabelle .buchhaltung-opos-buchung > td:nth-child(2) {
    overflow-wrap: anywhere;
}

/* Zugehörige Positionen */

.buchhaltung-opos-tabelle .buchhaltung-opos-position > td {
    padding-top: 6px;
    padding-bottom: 6px;
}

.buchhaltung-opos-tabelle .buchhaltung-opos-position > td:nth-child(2) {
    padding-left: 18px;
    overflow-wrap: anywhere;
}

/* Beträge rechts ausrichten.
 * Von hinten zählen, da die Positionszeile colspan verwendet.
 */

.buchhaltung-opos-tabelle thead th:nth-last-child(-n + 3),
.buchhaltung-opos-tabelle .buchhaltung-opos-position > td:nth-last-child(-n + 3) {
    text-align: right;
}

.buchhaltung-opos-tabelle .buchhaltung-opos-position > td:nth-last-child(-n + 3) {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Summen je Debitor */

.buchhaltung-opos-tabelle tfoot td {
    text-align: right;
    background: #e8e5ec;
    border-top: 2px solid var(--hv-border);
    padding: 10px 12px;
}

.buchhaltung-opos-debitorentitel {
    font-size: 15px;
    color: var(--hv-accent-dark);
}

/* ---------------------------------------------------------
 * OPOS – AJAX-Debitorensuche
 * --------------------------------------------------------- */

.opos-debitorensuche {
    position: relative;
    width: 420px;
    max-width: 100%;
    min-width: 0;
}

.opos-debitorensuche .opos-debitorensuche__eingabe {
    position: relative;
    width: 100%;
}

.opos-debitorensuche input[type="text"] {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 5px 36px 5px 8px;
    border: 1px solid var(--hv-border);
    background: var(--hv-surface);
    color: var(--hv-text);
    font: inherit;
}

.opos-debitorensuche input[type="text"]:focus {
    outline: 2px solid var(--hv-accent);
    outline-offset: 1px;
}

.opos-debitorensuche .opos-debitorensuche__entfernen {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hv-muted);
    font-size: 22px;
    cursor: pointer;
}

.opos-debitorensuche .opos-debitorensuche__entfernen:hover {
    color: var(--hv-accent-dark);
    background: #e8e5ec;
}

.opos-debitorensuche .opos-debitorensuche__treffer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--hv-border);
    background: var(--hv-surface);
    box-shadow: 0 5px 12px rgb(0 0 0 / 12%);
}

.opos-debitorensuche .opos-debitorensuche__treffer[hidden] {
    display: none;
}

.opos-debitorensuche .opos-debitorensuche__trefferbutton {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--hv-border);
    background: var(--hv-surface);
    color: var(--hv-text);
    font: inherit;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.opos-debitorensuche .opos-debitorensuche__trefferbutton:last-child {
    border-bottom: 0;
}

.opos-debitorensuche .opos-debitorensuche__trefferbutton:hover,
.opos-debitorensuche .opos-debitorensuche__trefferbutton:focus-visible {
    background: #e8e5ec;
    outline: 2px solid var(--hv-accent);
    outline-offset: -2px;
}

.opos-debitorensuche small {
    display: block;
    color: var(--hv-muted);
    font-size: 12px;
}

.opos-debitorensuche small:empty {
    display: none;
}

.opos-debitorensuche input[type="text"][aria-invalid="true"] {
    border-color: var(--hv-error-border);
}

.bankliste .bankliste__filter, .bankliste .bankliste__navigation {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:end;
}
.bankliste .bankliste__filter label {
    display:flex;
    flex-direction:column;
    gap:5px;
}
.bankliste .bankliste__filter input, .bankliste .bankliste__filter select {
    max-width:100%;
    padding:7px 9px;
    border:1px solid var(--hv-border);
    border-radius:4px;
}
.bankliste .bankliste__suche {
    flex:1;
    min-width:200px;
}
.bankliste .hv-card {
    margin-top:12px;
}
.bankliste .bankliste__tabelle {
    overflow-x:auto;
}
.bankliste .bankliste__umsatzliste {
    width:100%;
    table-layout:fixed;
    font-size:12px;
}
.bankliste .bankliste__umsatzliste th, .bankliste .bankliste__umsatzliste td {
    padding:6px 8px;
    vertical-align:top;
    white-space:nowrap;
}
.bankliste .bankliste__kurz {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.bankliste .bankliste__zweck summary {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.bankliste .bankliste__zweck[open] summary {
    white-space:normal;
    overflow-wrap:anywhere;
}
.bankliste .bankliste__zweck[open] {
    white-space:normal;
}
.bankliste .bankliste__zweck p {
    margin:6px 0;
}
.bankliste .bankliste__umsatzliste {
    min-width:1220px;
}
.bankliste .bankliste__betrag {
    text-align:right;
    white-space:nowrap;
}
.bankliste .bankliste__muted {
    font-size:12px;
    color:var(--hv-muted);
}
.bankliste .bankliste__text {
    white-space:pre-line;
    overflow-wrap:anywhere;
}
.bankliste .bankliste__daten {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:12px 20px;
}
.bankliste .bankliste__daten dt {
    font-size:12px;
    color:var(--hv-muted);
}
.bankliste .bankliste__daten dd {
    margin:3px 0 0;
    overflow-wrap:anywhere;
}
.bankliste .bankliste__navigation {
    justify-content:space-between;
    align-items:center;
    margin-top:14px;
}
.bankliste details > summary {
    cursor:pointer;
}
.bankliste .bankliste__baum {
    margin:6px 0 6px 16px;
    overflow-wrap:anywhere;
}
.bankliste .bankliste__fehler {
    border-left:4px solid #b68b47;
    padding:10px 12px;
    background:#fff5e4;
    color:#67460e;
}
.bankliste .bankliste__zwecktext {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.35;
    min-height:2.7em;
}
.bankliste .bankliste__aufklappen {
    padding:0;
    margin:3px 0 0;
    border:0;
    background:none;
    color:inherit;
    font:inherit;
    text-decoration:underline;
    cursor:pointer;
}
.bankliste .bankliste__infozeile[hidden] {
    display:none;
}
.bankliste .bankliste__infozeile td {
    white-space:normal;
    padding:12px 16px;
    background:var(--hv-bg, #f4f5f7);
}
.bankliste .bankliste__infokopf {
    font-weight:600;
}

/* Bankbewegungen: Ergänzung in css/hv26.css */
.bankliste [hidden] {
    display:none !important;
}
.bankliste .hv-card {
    padding:16px;
    border:1px solid var(--hv-border);
    background:var(--hv-surface);
}
.bankliste button {
    font:inherit;
    cursor:pointer;
}
.bankliste button:disabled {
    opacity:.55;
    cursor:default;
}
.bankliste .bankliste__filter input,
.bankliste .bankliste__filter select {
    background:var(--hv-surface);
    color:var(--hv-text);
}
.bankliste .bankliste__umsatzliste col:nth-child(1),
.bankliste .bankliste__umsatzliste col:nth-child(2) {
    width:8%;
}
.bankliste .bankliste__umsatzliste col:nth-child(3) {
    width:10%;
}
.bankliste .bankliste__umsatzliste col:nth-child(4) {
    width:16%;
}
.bankliste .bankliste__umsatzliste col:nth-child(5) {
    width:12%;
}
.bankliste .bankliste__umsatzliste col:nth-child(6) {
    width:22%;
}
.bankliste .bankliste__umsatzliste col:nth-child(7) {
    width:12%;
}
.bankliste .bankliste__umsatzliste col:nth-child(8) {
    width:12%;
}
.bankliste .bankliste__sortierung {
    color:inherit;
    text-decoration:none;
    display:inline-flex;
    gap:5px;
    align-items:center;
}
.bankliste .bankliste__sortierung:hover {
    color:var(--hv-accent-dark);
    text-decoration:underline;
}
.bankliste .bankliste__sortierung:focus-visible {
    outline:2px solid var(--hv-accent);
    outline-offset:3px;
}
.bankliste .bankliste__sortierung span {
    color:var(--hv-muted);
}
.bankliste .bankliste__eingang {
    color:#008b45;
}
.bankliste .bankliste__ausgang {
    color:#b42318;
}
.bankliste .bankliste__aktive-bewegung td {
    background:var(--hv-bg);
    border-top:2px solid var(--hv-accent);
}
.bankliste .bankliste__maskenzeile > td {
    padding:0;
    white-space:normal;
    background:var(--hv-surface);
}
.bankliste .bankliste__zahlungsbereich {
    position:sticky;
    left:0;
    width:var(--bankliste-breite,100%);
    max-width:100%;
    padding:20px 16px;
    border:1px solid var(--hv-border);
}
.bankliste .bankliste__maskenkopf {
    display:flex;
    flex-wrap:wrap;
    gap:8px 20px;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}
.bankliste .bankliste__maskenkopf h2 {
    margin:0;
    font-size:16px;
}
.bankliste .bankliste__formulargrid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}
.bankliste .bankliste__formulargrid label {
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
}
.bankliste .bankliste__formulargrid .form-input {
    width:100%;
    min-width:0;
    margin:0;
}
.bankliste .bankliste__formulargrid .bankliste__ganze-breite {
    grid-column:1 / -1;
}
.bankliste .bankliste__formulargrid .bankliste__debitorfeld {
    grid-column:span 2;
}
.bankliste .bankliste__debitorwahl {
    display:flex;
    gap:8px;
    align-items:end;
    min-width:0;
}
.bankliste .bankliste__debitorwahl .form-input {
    flex:1;
}
.bankliste .bankliste__kontierung {
    margin:18px 0;
}
.bankliste .bankliste__optabelle {
    width:100%;
    table-layout:auto;
    font-size:12px;
}
.bankliste .bankliste__optabelle th,
.bankliste .bankliste__optabelle td {
    white-space:normal;
    padding:10px 8px;
}
.bankliste .bankliste__optabelle .bankliste__betrag {
    white-space:nowrap;
}
.bankliste .bankliste__opbetrag {
    width:100px;
    max-width:100%;
    text-align:right;
}
.bankliste .bankliste__opaktionen {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:12px 0 18px;
}
.bankliste .bankliste__zahlungssummen {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin:16px 0 20px;
    padding:16px 0;
    border-top:1px solid var(--hv-border);
    border-bottom:1px solid var(--hv-border);
}
.bankliste .bankliste__zahlungssummen dt {
    font-size:12px;
    color:var(--hv-muted);
}
.bankliste .bankliste__zahlungssummen dd {
    margin:8px 0 0;
    font-size:18px;
}
.bankliste .bankliste__restzeitraum {
    border:0;
    padding:0;
    margin:0 0 20px;
    min-width:0;
}
.bankliste .bankliste__restzeitraum legend {
    font-weight:600;
    margin-bottom:12px;
}
.bankliste .bankliste__maskenaktionen {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
    align-items:center;
    padding-top:14px;
    border-top:1px solid var(--hv-border);
}
.bankliste .bankliste__schliessen {
    font-size:20px;
    line-height:1;
    min-width:36px;
    text-align:center;
}
.bankliste .bankliste__buchungsaktion {
    margin-top:8px;
}
.bankliste .bankliste__formularfehler {
    color:var(--hv-error-text);
    padding:10px;
    border:1px solid var(--hv-error-border);
    background:var(--hv-error-bg);
}
.bankliste .bankliste__opbetrag[aria-invalid="true"] {
    border-color:var(--hv-error-border);
}
@media (max-width:800px) {
    .bankliste .bankliste__formulargrid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .bankliste .bankliste__formulargrid .bankliste__debitorfeld {
        grid-column:1 / -1;
    }
    .bankliste .bankliste__zahlungssummen {
        gap:8px;
    }
    .bankliste .bankliste__zahlungssummen dd {
        font-size:16px;
    }
}
@media (max-width:500px) {
    .bankliste .bankliste__formulargrid, .bankliste .bankliste__zahlungssummen {
        grid-template-columns:minmax(0,1fr);
    }
    .bankliste .bankliste__debitorwahl {
        flex-wrap:wrap;
    }
}

/* Bankbewegungen: Aktion hinter dem Saldo, Schließen oben rechts. */
.bankliste .bankliste__umsatzliste {
    min-width:1450px;
}
.bankliste .bankliste__umsatzliste col:nth-child(1),
.bankliste .bankliste__umsatzliste col:nth-child(2) {
    width:7%;
}
.bankliste .bankliste__umsatzliste col:nth-child(3) {
    width:8%;
}
.bankliste .bankliste__umsatzliste col:nth-child(4) {
    width:15%;
}
.bankliste .bankliste__umsatzliste col:nth-child(5) {
    width:10%;
}
.bankliste .bankliste__umsatzliste col:nth-child(6) {
    width:21%;
}
.bankliste .bankliste__umsatzliste col:nth-child(7) {
    width:11%;
}
.bankliste .bankliste__umsatzliste col:nth-child(8) {
    width:8%;
}
.bankliste .bankliste__umsatzliste col:nth-child(9) {
    width:13%;
}
.bankliste .bankliste__umsatzliste > tbody > tr:not(.bankliste__maskenzeile):not(.bankliste__infozeile) > td {
    vertical-align:middle;
}
.bankliste .bankliste__zwecktext {
    min-height:0;
}
.bankliste .bankliste__aktion {
    text-align:right;
    white-space:nowrap;
}
.bankliste .bankliste__buchungsaktion {
    margin:0;
}
.bankliste .bankliste__buchungsaktion .hv-button-secondary {
    height:32px;
    padding:0 10px;
    font-size:12px;
}
.bankliste .bankliste__maskenkopf-rechts {
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:auto;
}
.bankliste .bankliste__maskenkopf-rechts .bankliste__schliessen {
    height:32px;
    padding:0 10px;
    flex-shrink:0;
}

.bankliste .bankliste__optabelle .bankliste__opgruppe td {
    background: var(--hv-bg);
    border-top: 2px solid var(--hv-border);
    padding: 10px 8px;
}

.bankliste .bankliste__opgruppeninfo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
}

/* Offene Forderungen – kompakte Darstellung */
.bankliste .bankliste__optabelle th,
.bankliste .bankliste__optabelle td {
    padding: 5px 8px;
    vertical-align: middle;
    line-height: 1.3;
}

.bankliste .bankliste__optabelle .bankliste__opbetrag {
    width: 90px;
    height: 28px;
    padding: 3px 7px;
    font-size: 12px;
}

.bankliste .bankliste__optabelle .bankliste__opgruppe td {
    padding: 6px 8px;
    border-top: 2px solid var(--hv-border);
    background: var(--hv-bg);
}

.bankliste .bankliste__opgruppeninfo {
    gap: 4px 14px;
    font-size: 12px;
    line-height: 1.3;
}

.bankliste .bankliste__opaktionen {
    gap: 6px;
    margin: 8px 0 12px;
}

.bankliste .bankliste__opaktionen .hv-button-secondary {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

/* Kontenblatt: Beträge und gespeicherte OP-Verrechnungen */
.buchhaltung-kontenblatt-tabelle .hv-betrag-rot,
.buchhaltung-konto-einzelansicht__summen .hv-betrag-rot {
    color: #b42318;
}

.buchhaltung-kontenblatt-tabelle .hv-betrag-gruen,
.buchhaltung-konto-einzelansicht__summen .hv-betrag-gruen {
    color: #008b45;
}

.hv-op-verrechnung {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.35;
}

.hv-op-verrechnung summary {
    cursor: pointer;
    color: var(--hv-accent-dark);
}

.hv-op-verrechnung__gruppe {
    margin: 8px 0;
}

.hv-op-verrechnung__gruppe > span {
    display: block;
    color: var(--hv-muted);
}

.hv-op-verrechnung__position {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    padding: 5px 0;
}

.hv-op-verrechnung__position strong {
    white-space: nowrap;
}

.hv-op-verrechnung__position small {
    grid-column: 1 / -1;
    color: var(--hv-muted);
}

.hv-op-verrechnung-detail {
    margin-top: 16px;
}

.hv-op-verrechnung-detail__tabelle {
    width: 100%;
    font-size: 12px;
}

.hv-op-verrechnung-detail__tabelle th,
.hv-op-verrechnung-detail__tabelle td {
    padding: 6px 8px;
    overflow-wrap: anywhere;
}

.hv-op-verrechnung-detail__gruppe td {
    background: var(--hv-bg);
    border-top: 2px solid var(--hv-border);
}

.hv-op-verrechnung-detail__tabelle th:last-child,
.hv-op-verrechnung-detail__betrag {
    text-align: right;
    white-space: nowrap;
}

.buchhaltung-kontenblatt-tabelle .hv-gegenkonto-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 12px;
    align-items: start;
}

.buchhaltung-kontenblatt-tabelle .hv-gegenkonto-bezeichnung {
    min-width: 0;
    overflow-wrap: anywhere;
}

.buchhaltung-kontenblatt-tabelle .hv-gegenkonto-teilbetrag {
    margin: 0;
    font-weight: 400;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Gesamtbeträge in Soll und Haben hervorheben */
.buchhaltung-kontenblatt-tabelle tbody td:nth-child(8) > span,
.buchhaltung-kontenblatt-tabelle tbody td:nth-child(9) > span {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Buchungshistorie direkt im Buchungskopf */
.hv-buchungshistorie > summary {
    cursor: pointer;
    color: var(--hv-muted);
    font-size: 12px;
    line-height: 1.5;
}

.hv-buchungshistorie > summary:hover {
    color: var(--hv-text);
}

.hv-buchungshistorie__inhalt {
    margin-top: 10px;
    font-size: 12px;
}

.hv-buchungshistorie__inhalt > p {
    margin: 0 0 10px;
}

.hv-buchungshistorie__inhalt > .hv-table {
    width: 100%;
    table-layout: fixed;
    margin: 0;
}

.hv-buchungshistorie__inhalt > .hv-table th,
.hv-buchungshistorie__inhalt > .hv-table td {
    padding: 7px 8px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.hv-buchungshistorie__inhalt > .hv-table th:nth-child(1),
.hv-buchungshistorie__inhalt > .hv-table td:nth-child(1) {
    width: 24%;
}

.hv-buchungshistorie__inhalt > .hv-table th:nth-child(2),
.hv-buchungshistorie__inhalt > .hv-table td:nth-child(2) {
    width: 58%;
}

.hv-buchungshistorie__inhalt > .hv-table th:nth-child(3),
.hv-buchungshistorie__inhalt > .hv-table td:nth-child(3) {
    width: 18%;
    text-align: right;
    white-space: nowrap;
}

.hv-buchungshistorie .hv-gegenkonto-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 10px;
    align-items: start;
    margin-top: 4px;
}

.hv-buchungshistorie .hv-gegenkonto-teilbetrag {
    margin: 0;
    font-weight: 400;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Zentrale Protokolle innerhalb der Buchungshistorie */
.hv-buchungsprotokoll {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--hv-border);
}

.hv-buchungsprotokoll > h4 {
    margin: 0 0 7px;
    font-size: 12px;
    font-weight: 700;
}

.hv-buchungsprotokoll > p {
    margin: 0;
    color: var(--hv-muted);
}

.hv-buchungsprotokoll > .hv-table {
    width: 100%;
    table-layout: fixed;
    margin: 0;
}

.hv-buchungsprotokoll > .hv-table th,
.hv-buchungsprotokoll > .hv-table td {
    padding: 7px 8px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

/* Zeitpunkt */
.hv-buchungsprotokoll > .hv-table th:nth-child(1),
.hv-buchungsprotokoll > .hv-table td:nth-child(1) {
    width: 12%;
}

/* Benutzer */
.hv-buchungsprotokoll > .hv-table th:nth-child(2),
.hv-buchungsprotokoll > .hv-table td:nth-child(2) {
    width: 12%;
}

/* Aktion */
.hv-buchungsprotokoll > .hv-table th:nth-child(3),
.hv-buchungsprotokoll > .hv-table td:nth-child(3) {
    width: 10%;
}

/* Beschreibung mit Buchungsnummer */
.hv-buchungsprotokoll > .hv-table th:nth-child(4),
.hv-buchungsprotokoll > .hv-table td:nth-child(4) {
    width: 26%;
}

/* Einzelposten und Begründungen */
.hv-buchungsprotokoll > .hv-table th:nth-child(5),
.hv-buchungsprotokoll > .hv-table td:nth-child(5) {
    width: 40%;
}

.hv-buchungsprotokoll td ul {
    margin: 5px 0 0;
    padding-left: 18px;
}

.hv-buchungsprotokoll td > div {
    margin-top: 5px;
    white-space: normal;
}

/* Verrechnungen innerhalb der monatlichen Sollstellungshistorie */
.buchhaltung-sollstellung-protokoll .hv-buchungshistorie__inhalt {
    padding: 10px 14px;
    margin-top: 0;
}

.buchhaltung-sollstellung-protokoll .hv-gegenkonto-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 10px;
    align-items: start;
    margin-top: 4px;
}

.buchhaltung-sollstellung-protokoll .hv-gegenkonto-teilbetrag {
    margin: 0;
    font-weight: 400;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Anklickbare Statusampel */
button.hv-ausgleichsstatus-button {
    appearance: none;
    min-width: 0;
    min-height: 0;
    width: 14px;
    height: 14px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 1;
    box-shadow: none;
}

button.hv-ausgleichsstatus-button:hover {
    outline: 3px solid var(--hv-border);
    outline-offset: 2px;
}

button.hv-ausgleichsstatus-button:focus-visible,
button.hv-ausgleichsstatus-button[aria-expanded="true"] {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Verrechnung direkt unter der Buchungszeile */
.buchhaltung-kontenblatt-tabelle > tbody > .hv-konto-verrechnung[hidden] {
    display: none;
}

.buchhaltung-kontenblatt-tabelle > tbody > .hv-konto-verrechnung > td {
    width: auto;
    padding: 0;
    white-space: normal;
    text-align: left;
}

.hv-konto-verrechnung__inhalt {
    padding: 12px 16px;
    background: var(--hv-surface);
    border-left: 3px solid var(--hv-border);
}

.hv-konto-verrechnung__kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 20px;
    margin-bottom: 10px;
    font-size: 12px;
}

.buchhaltung-kontenblatt-tabelle .hv-konto-verrechnung__tabelle {
    width: 100%;
    table-layout: fixed;
    margin: 0;
    font-size: 12px;
}

.buchhaltung-kontenblatt-tabelle .hv-konto-verrechnung__tabelle th,
.buchhaltung-kontenblatt-tabelle .hv-konto-verrechnung__tabelle td {
    padding: 7px 9px;
    text-align: left;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
}

.buchhaltung-kontenblatt-tabelle .hv-konto-verrechnung__tabelle th:nth-child(1),
.buchhaltung-kontenblatt-tabelle .hv-konto-verrechnung__tabelle td:nth-child(1) {
    width: 16%;
}

.buchhaltung-kontenblatt-tabelle .hv-konto-verrechnung__tabelle th:nth-child(2),
.buchhaltung-kontenblatt-tabelle .hv-konto-verrechnung__tabelle td:nth-child(2) {
    width: 30%;
}

.buchhaltung-kontenblatt-tabelle .hv-konto-verrechnung__tabelle th:nth-child(3),
.buchhaltung-kontenblatt-tabelle .hv-konto-verrechnung__tabelle td:nth-child(3) {
    width: 42%;
}

.buchhaltung-kontenblatt-tabelle .hv-konto-verrechnung__tabelle th:nth-child(4),
.buchhaltung-kontenblatt-tabelle .hv-konto-verrechnung__tabelle td:nth-child(4) {
    width: 12%;
    text-align: right;
    white-space: nowrap;
}

.hv-konto-verrechnung__inhalt > p {
    margin: 0;
    font-size: 12px;
}

/* Betragsfarben in der Offene-Posten-Ansicht */
.buchhaltung-opos-tabelle .hv-betrag-rot {
    color: #b42318;
}

.buchhaltung-opos-tabelle .hv-betrag-gruen {
    color: #008b45;
}

.buchhaltung-opos-tabelle .hv-betrag-neutral,
.hv-opos-summen .hv-betrag-neutral {
    color: #111;
}

.hv-opos-summen .hv-betrag-rot {
    color: #b42318;
}

.hv-opos-summen .hv-betrag-gruen {
    color: #008b45;
}

/* OPOS-Verlauf: kompakter Aufruf neben dem Debitor */
.buchhaltung-opos-debitorentitel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-height: 28px;
}

.hv-opos-verlauf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    margin-left: auto;
    line-height: 1;
}

.hv-opos-verlauf-button[aria-expanded="true"] {
    outline: 2px solid var(--hv-accent-dark);
    outline-offset: 2px;
}

/* Bereich unmittelbar oberhalb der OP-Tabelle */
.hv-opos-verlauf[hidden] {
    display: none;
}

.hv-opos-verlauf {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--hv-border);
    background: var(--hv-surface);
    font-size: 12px;
}

.hv-opos-verlauf__kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 10px;
}

.hv-opos-verlauf__kopf > span,
.hv-opos-verlauf__metadaten {
    color: var(--hv-muted);
}

.hv-opos-verlauf form > label,
.hv-opos-verlauf__aktionen label {
    display: block;
    margin-bottom: 4px;
}

.hv-opos-verlauf textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--hv-border);
    background: var(--hv-surface);
    color: inherit;
    font: inherit;
    line-height: 1.5;
    resize: vertical;
}

.hv-opos-verlauf__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 8px;
}

.hv-opos-verlauf__aktionen select {
    max-width: 100%;
    padding: 5px 7px;
    font: inherit;
}

.hv-opos-verlauf__status {
    margin: 8px 0;
}

.hv-opos-verlauf__status:empty {
    display: none;
}

.hv-opos-verlauf .ist-fehler {
    color: #b42318;
}

.hv-opos-verlauf__eintrag {
    padding: 10px 0;
    border-top: 1px solid var(--hv-border);
}

.hv-opos-verlauf__metadaten {
    margin-bottom: 3px;
}

.hv-opos-verlauf__text {
    margin: 6px 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hv-opos-verlauf__vergleich > summary {
    cursor: pointer;
    color: var(--hv-accent-dark);
    line-height: 1.5;
}

.hv-opos-verlauf__vergleich-inhalt {
    margin-top: 8px;
    overflow-x: auto;
}

.hv-opos-verlauf__vergleich-inhalt > p {
    margin: 8px 0;
}

.hv-opos-verlauf__vergleich-inhalt > h4 {
    margin: 12px 0 6px;
    font-size: 12px;
}

.hv-opos-verlauf .hv-opos-verlauf__tabelle {
    width: 100%;
    table-layout: fixed;
    margin: 6px 0;
    font-size: 12px;
}

.hv-opos-verlauf .hv-opos-verlauf__tabelle th,
.hv-opos-verlauf .hv-opos-verlauf__tabelle td {
    padding: 6px 8px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.hv-opos-verlauf .hv-opos-verlauf__tabelle th:first-child,
.hv-opos-verlauf .hv-opos-verlauf__tabelle td:first-child {
    width: 46%;
    text-align: left;
}

.hv-opos-verlauf .hv-opos-verlauf__tabelle th:nth-child(n+2),
.hv-opos-verlauf .hv-opos-verlauf__tabelle td:nth-child(n+2) {
    width: 18%;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.hv-opos-verlauf .hv-betrag-rot {
    color: #b42318;
}

.hv-opos-verlauf .hv-betrag-gruen {
    color: #008b45;
}

.hv-opos-verlauf .hv-betrag-neutral {
    color: #111;
}

.hv-opos-verlauf [data-opos-verlauf-mehr] {
    margin-top: 8px;
}

/* Nachträgliche OP-Verrechnung */

.hv-opos-verrechnung__zeile[hidden] {
    display: none !important;
}

.hv-opos-verrechnung__seite {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hv-opos-verrechnung__button,
.hv-opos-verrechnung__schliessen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
}

.hv-opos-verrechnung__schliessen {
    font-size: 22px;
    line-height: 1;
}

.hv-opos-verrechnung__zeile > td {
    padding: 10px 12px 16px;
    white-space: normal;
}

.hv-opos-verrechnung {
    padding: 14px 16px;
    border: 1px solid #d8e0e8;
    border-radius: 8px;
    background: #f7f9fb;
    text-align: left;
    font-size: 13px;
}

.hv-opos-verrechnung__kopf,
.hv-opos-verrechnung__fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hv-opos-verrechnung__kopf > strong {
    font-size: 14px;
}

.hv-opos-verrechnung__guthaben {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
}

.hv-opos-verrechnung__guthaben > strong {
    color: #18743b;
    font-size: 18px;
}

.hv-opos-verrechnung [data-opos-verrechnung-status] {
    margin: 8px 0;
}

.hv-opos-verrechnung [data-opos-verrechnung-status]:empty {
    display: none;
}

.hv-opos-verrechnung [data-opos-verrechnung-status][data-fehler] {
    color: #b42318;
}

.hv-opos-verrechnung__forderungen {
    margin-top: 12px;
    overflow-x: auto;
}

.hv-opos-verrechnung__tabelle {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.hv-opos-verrechnung__tabelle th,
.hv-opos-verrechnung__tabelle td {
    padding: 8px 10px;
    border-bottom: 1px solid #e2e7ed;
    text-align: left;
    vertical-align: middle;
    white-space: normal;
}

.hv-opos-verrechnung__tabelle th {
    color: #475467;
    font-size: 12px;
    font-weight: 600;
}

.hv-opos-verrechnung__tabelle .hv-opos-verrechnung__betrag {
    text-align: right;
    white-space: nowrap;
}

.hv-opos-verrechnung__offen {
    color: #b42318;
}

.hv-opos-verrechnung__eingabe {
    width: 120px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    text-align: right;
    font: inherit;
}

.hv-opos-verrechnung__eingabe[aria-invalid="true"] {
    border-color: #b42318;
}

.hv-opos-verrechnung__detail {
    display: block;
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
}

.hv-opos-verrechnung__fuss {
    flex-wrap: wrap;
    margin-top: 14px;
}

.hv-opos-verrechnung__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

@media (max-width: 640px) {
    .hv-opos-verrechnung {
        padding: 12px;
    }

    .hv-opos-verrechnung__aktionen {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
}

/* Einzelne OP-Verrechnung aufheben */

.hv-verrechnung-aufhebung {
    margin: 8px 0 12px;
    padding: 8px 10px;
    border: 1px solid #d8e0e8;
    border-radius: 6px;
    background: #f7f9fb;
    color: #344054;
    font-size: 12px;
    font-weight: normal;
    white-space: normal;
    overflow-wrap: anywhere;
}

details.hv-verrechnung-aufhebung > summary {
    cursor: pointer;
    color: #475467;
}

details.hv-verrechnung-aufhebung[open] > summary {
    margin-bottom: 10px;
}

.hv-verrechnung-aufhebung form {
    max-width: 480px;
}

.hv-verrechnung-aufhebung label {
    display: block;
    font-weight: 600;
}

.hv-verrechnung-aufhebung textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
    padding: 7px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    font: inherit;
    font-weight: normal;
    resize: vertical;
}

.hv-verrechnung-aufhebung p {
    margin: 8px 0;
}

.hv-verrechnung-aufhebung > div {
    margin-top: 4px;
}

/* AJAX-Debitorensuche in der Zahlungsmaske */

.bankliste__debitorfeld {
    min-width: 0;
}

.bankliste__debitorfeld > label {
    display: block;
    margin-bottom: 5px;
}

.bankliste__debitorwahl {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.bankliste__suchbereich {
    position: relative;
    flex: 1;
    min-width: 0;
}

.bankliste__suchbereich > input {
    width: 100%;
    box-sizing: border-box;
}

.bankliste__suchtreffer {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: 30;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 6px 18px rgb(16 24 40 / 14%);
}

.bankliste__suchtreffer[hidden] {
    display: none !important;
}

.bankliste__suchtreffer-button {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid #e4e7ec;
    background: #fff;
    color: #344054;
    font: inherit;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.bankliste__suchtreffer-button:last-child {
    border-bottom: 0;
}

.bankliste__suchtreffer-button:hover,
.bankliste__suchtreffer-button:focus-visible {
    background: #eef4ff;
    color: #1849a9;
}

.bankliste__suchtreffer-button:focus-visible {
    outline: 2px solid #84adff;
    outline-offset: -2px;
}

.bankliste__debitorfeld [data-bank-debitor-suchstatus] {
    display: block;
    margin-top: 5px;
    color: #667085;
    font-size: 12px;
    white-space: normal;
}

@media (max-width: 640px) {
    .bankliste__debitorwahl {
        flex-wrap: wrap;
    }

    .bankliste__suchbereich {
        flex-basis: 100%;
    }
}

/* Buchungstext und Positionsabgrenzungen bearbeiten */

.hv-buchung-bearbeitung > summary {
    cursor: pointer;
    color: #344054;
    font-weight: 600;
}

.hv-buchung-bearbeitung[open] > summary {
    margin-bottom: 16px;
}

.hv-buchung-bearbeitung form > label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
}

.hv-buchung-bearbeitung form > input[type="text"],
.hv-buchung-bearbeitung textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    font: inherit;
}

.hv-buchung-bearbeitung textarea {
    resize: vertical;
}

.hv-buchung-bearbeitung__positionen {
    margin: 16px 0;
    overflow-x: auto;
}

.hv-buchung-bearbeitung__positionen .hv-table {
    width: 100%;
    font-size: 12px;
}

.hv-buchung-bearbeitung__positionen th,
.hv-buchung-bearbeitung__positionen td {
    padding: 8px;
    vertical-align: middle;
}

.hv-buchung-bearbeitung__positionen td:first-child {
    min-width: 180px;
    white-space: normal;
}

.hv-buchung-bearbeitung__positionen td:nth-child(2) {
    text-align: right;
    white-space: nowrap;
}

.hv-buchung-bearbeitung__positionen small {
    display: block;
    margin-top: 3px;
    color: #667085;
}

.hv-buchung-bearbeitung__positionen input[type="date"] {
    width: 140px;
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    font: inherit;
}

.hv-buchung-bearbeitung__aktionen {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* Kautionsverwaltung – Übersicht */

.hv-kaution-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.hv-kaution-filter label {
    font-size: 13px;
    font-weight: 600;
}

.hv-kaution-filter select {
    min-width: 230px;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    font: inherit;
}

.hv-kaution-hinweis {
    margin: 8px 0 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}

.hv-kaution-tabelle {
    overflow-x: auto;
}

.hv-kaution-tabelle .hv-table {
    width: 100%;
    font-size: 13px;
}

.hv-kaution-tabelle th,
.hv-kaution-tabelle td {
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

.hv-kaution-tabelle td:first-child {
    min-width: 190px;
}

.hv-kaution-tabelle small {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
    line-height: 1.4;
}

.hv-kaution-tabelle .hv-kaution-betrag {
    text-align: right;
    white-space: nowrap;
}

.hv-kaution-tabelle .hv-kaution-altangabe {
    max-width: 210px;
    margin-left: auto;
    color: #805b10;
    white-space: normal;
}

@media (max-width: 640px) {
    .hv-kaution-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .hv-kaution-filter select {
        min-width: 0;
        width: 100%;
    }
}

/* Verwahrkonto der Kautionsverwaltung auswählen */

.hv-kaution-kontowahl > summary {
    cursor: pointer;
    color: #344054;
    font-weight: 600;
}

.hv-kaution-kontowahl form {
    max-width: 720px;
    margin-top: 14px;
}

.hv-kaution-kontowahl label {
    display: block;
    margin: 12px 0 5px;
    font-size: 13px;
    font-weight: 600;
}

.hv-kaution-kontowahl select,
.hv-kaution-kontowahl textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    font: inherit;
}

.hv-kaution-kontowahl textarea {
    resize: vertical;
}

.hv-kaution-kontowahl__aktionen {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* Kautionsverwaltung – HV26-Gestaltung und Abstände */

.hv-kaution-seite > .hv-card {
    margin: 0 0 18px;
    padding: 18px 20px;
    border: 1px solid var(--hv-border);
    background: var(--hv-surface);
}

.hv-kaution-seite .hv-page-header {
    margin-bottom: 22px;
}

.hv-kaution-seite .hv-kaution-filter {
    gap: 12px 16px;
}

.hv-kaution-seite .hv-kaution-filter select {
    min-width: 280px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--hv-border);
    border-radius: 0;
    background: #fff;
    color: var(--hv-text);
}

.hv-kaution-seite .hv-kaution-hinweis {
    margin-top: 10px;
    color: var(--hv-muted);
    line-height: 1.6;
}

.hv-kaution-seite .hv-kaution-kontowahl {
    border-left: 3px solid var(--hv-accent);
}

.hv-kaution-seite .hv-kaution-kontowahl > summary {
    padding: 3px 0;
    color: var(--hv-accent);
    line-height: 1.5;
}

.hv-kaution-seite .hv-kaution-kontowahl[open] > summary {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hv-border);
}

.hv-kaution-seite .hv-kaution-kontowahl form {
    max-width: 820px;
    margin-top: 18px;
}

.hv-kaution-seite .hv-kaution-kontowahl label {
    margin: 18px 0 7px;
    color: var(--hv-text);
}

.hv-kaution-seite .hv-kaution-kontowahl select,
.hv-kaution-seite .hv-kaution-kontowahl textarea {
    padding: 10px 12px;
    border-color: var(--hv-border);
    border-radius: 0;
    color: var(--hv-text);
}

.hv-kaution-seite .hv-kaution-kontowahl select {
    min-height: 42px;
}

.hv-kaution-seite .hv-kaution-kontowahl textarea {
    min-height: 90px;
}

.hv-kaution-seite select:focus-visible,
.hv-kaution-seite textarea:focus-visible {
    outline: 2px solid var(--hv-accent);
    outline-offset: 2px;
}

.hv-kaution-seite .hv-kaution-kontowahl__aktionen {
    margin-top: 18px;
}

.hv-kaution-seite > .hv-kaution-tabelle {
    padding: 0;
}

.hv-kaution-seite .hv-kaution-tabelle th,
.hv-kaution-seite .hv-kaution-tabelle td {
    padding: 14px 12px;
}

.hv-kaution-seite .hv-kaution-tabelle th {
    color: var(--hv-accent);
}

.hv-kaution-seite .hv-kaution-tabelle small {
    margin-top: 6px;
    color: var(--hv-muted);
}

.hv-kaution-seite .hv-kaution-tabelle .hv-kaution-altangabe {
    color: #805b10;
}

@media (max-width: 640px) {
    .hv-kaution-seite > .hv-card {
        padding: 14px;
    }

    .hv-kaution-seite > .hv-kaution-tabelle {
        padding: 0;
    }

    .hv-kaution-seite .hv-kaution-filter select {
        min-width: 0;
    }
}

/* Kautionsverwaltung – kompakte gemeinsame Bedienzeile */

.hv-kaution-seite {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    gap: 14px 20px;
}

.hv-kaution-seite > * {
    min-width: 0;
    grid-column: 1 / -1;
}

.hv-kaution-seite .hv-page-header {
    margin-bottom: 4px;
}

.hv-kaution-seite > .hv-kaution-kontowahl,
.hv-kaution-seite > .hv-kaution-anzahl,
.hv-kaution-seite > .hv-kaution-bereich {
    grid-row: 2;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.hv-kaution-seite > .hv-kaution-kontowahl {
    grid-column: 1;
    align-self: center;
}

.hv-kaution-seite > .hv-kaution-anzahl {
    grid-column: 2;
    align-self: center;
    font-size: 12px;
    color: var(--hv-muted);
}

.hv-kaution-seite > .hv-kaution-bereich {
    grid-column: 3;
    justify-self: end;
    align-self: center;
}

.hv-kaution-seite .hv-kaution-filter {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.hv-kaution-seite .hv-kaution-filter label {
    font-size: 12px;
}

.hv-kaution-seite .hv-kaution-filter select {
    width: auto;
    min-width: 0;
    min-height: 34px;
    padding: 6px 8px;
    font-size: 12px;
}

.hv-kaution-seite .hv-kaution-filter .hv-button-secondary {
    padding: 7px 12px;
    font-size: 12px;
}

.hv-kaution-seite .hv-kaution-kontowahl > summary {
    padding: 7px 0;
    font-size: 13px;
}

.hv-kaution-seite .hv-kaution-kontowahl[open] > summary {
    padding-bottom: 10px;
}

.hv-kaution-seite .hv-kaution-kontowahl[open] form {
    margin: 12px 0 4px;
    padding: 14px;
    border: 1px solid var(--hv-border);
    background: var(--hv-surface);
}

@media (max-width: 1100px) {
    .hv-kaution-seite {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .hv-kaution-seite > .hv-kaution-anzahl {
        grid-column: 1;
        grid-row: 3;
    }

    .hv-kaution-seite > .hv-kaution-bereich {
        grid-column: 2;
    }
}

@media (max-width: 720px) {
    .hv-kaution-seite {
        grid-template-columns: minmax(0, 1fr);
    }

    .hv-kaution-seite > .hv-kaution-kontowahl,
    .hv-kaution-seite > .hv-kaution-anzahl,
    .hv-kaution-seite > .hv-kaution-bereich {
        grid-column: 1;
        grid-row: auto;
        justify-self: stretch;
    }

    .hv-kaution-seite .hv-kaution-filter {
        flex-wrap: wrap;
    }
}

/* Kautionsforderung – kompakte HV26-Maske */

.hv-kaution-seite > .hv-kaution-forderung {
    width: 100%;
    max-width: 1120px;
    justify-self: start;
    padding: 16px 18px;
}

.hv-kaution-forderung h2 {
    margin: 0 0 8px;
    color: var(--hv-accent);
    font-size: 15px;
}

.hv-kaution-forderung > p {
    margin: 0 0 16px;
    font-size: 13px;
}

.hv-kaution-forderung > form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
}

.hv-kaution-forderung__felder {
    display: grid;
    grid-template-columns: 140px 140px 130px minmax(200px, 1fr);
    gap: 10px;
    min-width: 0;
}

.hv-kaution-forderung__felder label {
    display: block;
    min-width: 0;
    color: var(--hv-muted);
    font-size: 12px;
    font-weight: 600;
}

.hv-kaution-forderung__felder .form-input {
    height: 34px;
    margin-top: 5px;
    padding: 6px 8px;
    border: 1px solid var(--hv-border);
    border-radius: 0;
    background: #fff;
    color: var(--hv-text);
    font-size: 12px;
    font-weight: normal;
}

.hv-kaution-forderung__aktionen {
    margin: 0;
}

.hv-kaution-forderung__aktionen .hv-button-secondary {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 12px;
    white-space: nowrap;
}

.hv-kaution-forderung__vorschau {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--hv-border);
    overflow-x: auto;
}

.hv-kaution-forderung__vorschau h3 {
    margin: 0 0 8px;
    color: var(--hv-accent);
    font-size: 13px;
}

.hv-kaution-forderung__vorschau > p {
    margin: 6px 0;
    font-size: 12px;
    line-height: 1.5;
}

.hv-kaution-forderung__vorschau .hv-table {
    width: 100%;
    margin-top: 12px;
    font-size: 12px;
}

.hv-kaution-forderung__vorschau th,
.hv-kaution-forderung__vorschau td {
    padding: 8px 10px;
}

.hv-kaution-forderung__vorschau th:first-child {
    width: 50%;
}

.hv-kaution-forderung__vorschau th:last-child,
.hv-kaution-forderung__vorschau td:last-child {
    text-align: right;
    white-space: nowrap;
}

.hv-kaution-forderung__bestaetigung {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.hv-kaution-forderung__bestaetigung .hv-button-primary {
    padding: 8px 14px;
    font-size: 12px;
}

.hv-kaution-zeilenaktion {
    margin-top: 8px;
}

.hv-kaution-zeilenaktion .hv-button-secondary {
    padding: 6px 10px;
    font-size: 12px;
}

@media (max-width: 1200px) {
    .hv-kaution-forderung > form {
        grid-template-columns: minmax(0, 1fr);
    }

    .hv-kaution-forderung__aktionen {
        justify-self: end;
    }
}

@media (max-width: 850px) {
    .hv-kaution-forderung__felder {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .hv-kaution-forderung__felder {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   Kautionsakte
   ========================================================= */

.hv-kautionsakte-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.hv-kautionsakte-aktionen .hv-button-secondary {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

.hv-kautionsakte-deckel {
    margin: 0;
}

.hv-kautionsakte .hv-aktenkopf {
    margin: 12px 0 0;
}

.hv-kautionsakte > .hv-mietraster {
    margin-top: 10px;
    align-items: start;
}

.hv-kautionsakte .hv-mietinfo-zeile {
    grid-template-columns: 160px minmax(0, 1fr);
}

.hv-kautionsakte-deckel .hv-mietinfo-zeile {
    grid-template-columns: 130px minmax(0, 1fr);
}

.hv-kautionsakte-deckel .hv-mietinfo-zeile {
    grid-template-columns: 130px minmax(0, 1fr);
}

.hv-kautionsakte-zahl {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.hv-kautionsakte-summe {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--hv-border);
}

.hv-kautionsakte-hinweis {
    margin: 8px 0;
    font-size: 13px;
    color: var(--hv-accent);
}

.hv-kautionsakte-erklaerung {
    padding: 5px 0;
    font-size: 13px;
}

.hv-kautionsakte-erklaerung summary {
    cursor: pointer;
    color: var(--hv-accent);
    font-weight: 600;
}

.hv-kautionsakte-erklaerung p {
    margin: 10px 0 0;
    line-height: 1.5;
}

.hv-kautionsakte-bewegungen {
    margin-top: 10px;
}

.hv-kautionsakte-bewegungen .hv-table {
    width: 100%;
    margin: 0;
}

.hv-kautionsakte-bewegungen .hv-table th,
.hv-kautionsakte-bewegungen .hv-table td {
    padding: 9px 12px;
    vertical-align: top;
}

.hv-kautionsakte-bewegungen .hv-table .hv-kautionsakte-zahl {
    text-align: right;
}

.hv-kautionsakte-datum {
    white-space: nowrap;
}

.hv-kautionsakte-buchungstext {
    display: block;
    margin-top: 3px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.hv-kautionsakte-zugang {
    color: #287344;
}

.hv-kautionsakte-abgang {
    color: #a63232;
}

.hv-kautionsakte-neutral {
    color: var(--hv-text);
}

/* Kautionsakte: kompakter Abstand der Hauptbereiche */

.hv-kautionsakte {
    gap: 0;
}

.hv-kautionsakte > .hv-page-header {
    margin-bottom: 10px;
}

.hv-kautionsakte > .hv-kautionsakte-aktionen {
    margin: 0 0 12px;
}

.hv-kautionsakte > .hv-kautionsakte-bewegungen {
    margin-top: 10px;
}

/* Kautionsübersicht: mehr Platz und ruhigere Textaufteilung */

.hv-kaution-tabelle {
    overflow-x: auto;
}

.hv-kaution-tabelle > .hv-table {
    width: 100%;
    min-width: 1250px;
    table-layout: fixed;
}

.hv-kaution-tabelle > .hv-table th,
.hv-kaution-tabelle > .hv-table td {
    padding: 13px 14px;
    vertical-align: top;
    line-height: 1.5;
}

.hv-kaution-tabelle > .hv-table th:nth-child(1) {
    width: 22%;
}

.hv-kaution-tabelle > .hv-table th:nth-child(2) {
    width: 11%;
}

.hv-kaution-tabelle > .hv-table th:nth-child(3) {
    width: 16%;
}

.hv-kaution-tabelle > .hv-table th:nth-child(4) {
    width: 8%;
}

.hv-kaution-tabelle > .hv-table th:nth-child(5) {
    width: 8%;
}

.hv-kaution-tabelle > .hv-table th:nth-child(6) {
    width: 17%;
}

.hv-kaution-tabelle > .hv-table th:nth-child(7) {
    width: 9%;
}

.hv-kaution-tabelle > .hv-table th:nth-child(8) {
    width: 9%;
}

.hv-kaution-tabelle > .hv-table td {
    white-space: normal;
    overflow-wrap: anywhere;
}

.hv-kaution-tabelle > .hv-table td > small {
    display: block;
    margin-top: 5px;
    line-height: 1.5;
}

.hv-kaution-tabelle .hv-kaution-betrag {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.hv-kaution-tabelle .hv-kaution-betrag > strong {
    display: block;
    white-space: nowrap;
}

.hv-kaution-tabelle .hv-kaution-betrag > small,
.hv-kaution-tabelle .hv-kaution-betrag > details {
    text-align: left;
    white-space: normal;
}

.hv-kaution-tabelle .hv-kaution-betrag > details {
    margin-top: 6px;
}

.hv-kaution-tabelle details summary {
    cursor: pointer;
    line-height: 1.5;
}

.hv-kaution-tabelle td:last-child .hv-button-secondary {
    height: auto;
    min-height: 34px;
    padding: 7px 10px;
    white-space: normal;
    text-align: center;
}

/* Aufklappbare Übertragszuordnung */

.hv-kaution-werkzeug {
    margin: 0 0 16px;
    border: 1px solid var(--hv-border);
    background: var(--hv-surface);
}

.hv-kaution-werkzeug > summary {
    padding: 11px 14px;
    cursor: pointer;
    color: var(--hv-accent);
    font-size: 13px;
    font-weight: 600;
}

.hv-kaution-werkzeug > summary > span {
    display: inline-block;
    margin-left: 12px;
    font-size: 12px;
    font-weight: normal;
}

.hv-kaution-werkzeug[open] > summary {
    border-bottom: 1px solid var(--hv-border);
}

.hv-kaution-werkzeug-inhalt {
    padding: 12px 14px;
    font-size: 13px;
}

.hv-kaution-werkzeug-inhalt > p:first-child {
    margin-top: 0;
}

.hv-kaution-werkzeug-inhalt > form[method="get"] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.hv-kaution-werkzeug-inhalt > form[method="get"] > label {
    flex: 1 1 420px;
    min-width: 0;
}

.hv-kaution-werkzeug-inhalt > form[method="get"] select {
    width: 100%;
    margin-top: 5px;
}

.hv-kaution-werkzeug-inhalt > form[method="get"] > button {
    flex: 0 0 auto;
}

/* =========================================================
   Buchungsjournal – Suche, Seiten und fester Tabellenkopf
   ========================================================= */

.journal-werkzeuge,
.journal-seiten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0;
    font-size: 13px;
}

.journal-werkzeuge > div {
    display: flex;
    gap: 8px;
}

.journal-werkzeuge .hv-button-secondary,
.journal-seiten .hv-button-secondary {
    height: 34px;
    padding: 0 12px;
}

.buchhaltung-kontenfilter__feld.journal-suche {
    flex: 1 1 260px;
}

.journal-suche input {
    width: 100%;
    min-width: 180px;
    box-sizing: border-box;
}

.journal-scroll {
    max-height: 65vh;
    overflow: auto;
    border: 1px solid var(--hv-border);
    isolation: isolate;
}

.journal-scroll .buchhaltung-buchungsjournal {
    width: 100%;
    min-width: 1450px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.journal-scroll .buchhaltung-buchungsjournal thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #e2e2e6;
    box-shadow: 0 1px 0 var(--hv-border);
}

.journal-scroll .buchhaltung-buchungsjournal th,
.journal-scroll .buchhaltung-buchungsjournal td {
    box-sizing: border-box;
    padding: 9px 10px;
    overflow-wrap: anywhere;
}

.journal-scroll .buchhaltung-buchungsjournal th:nth-child(6) {
    width: 16%;
}

.journal-scroll .buchhaltung-buchungsjournal th:nth-child(12),
.journal-scroll .buchhaltung-buchungsjournal td:nth-child(12) {
    width: 8%;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
}

@media print {
    .journal-scroll {
        max-height: none;
        overflow: visible;
        border: 0;
    }

    .journal-scroll .buchhaltung-buchungsjournal {
        min-width: 0;
    }

    .journal-scroll .buchhaltung-buchungsjournal thead th {
        position: static;
    }

    .journal-werkzeuge,
    .journal-seiten {
        display: none;
    }
}

.hv-kaution-werkzeugleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.hv-kaution-werkzeugleiste > .hv-kaution-werkzeug {
    flex: 1 1 280px;
    min-width: 0;
    margin: 0;
}

.hv-kaution-werkzeugleiste > .hv-kaution-werkzeug[open] {
    flex-basis: 100%;
    order: 1;
}

.hv-kaution-werkzeugleiste > .hv-kaution-werkzeug > summary {
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

/*
 * Personenakte: Mietverhältnisse und Finanzangaben
 */

/* Kopfbereich: vollständige Angaben dürfen gemeinsam umbrechen. */
.hv-mietkopf .hv-mietkopf-vertrag {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 28px;
    padding: 10px 16px;
}

.hv-mietkopf .hv-mietkopf-gruppe {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 24px;
    max-width: 100%;
}

.hv-mietkopf .hv-mietkopf-vertragsgruppe {
    flex: 1 1 auto;
}

.hv-mietkopf .hv-mietkopf-finanzgruppe {
    flex: 1 1 620px;
    justify-content: flex-start;
}

.hv-mietkopf .hv-mietkopf-info {
    flex: 0 1 auto;
    max-width: 100%;
    gap: 8px;
}

.hv-mietkopf .hv-mietkopf-wert {
    overflow-wrap: normal;
    word-break: normal;
}

.hv-mietkopf .hv-mietkopf-finanzgruppe .hv-mietkopf-info {
    flex: 0 0 auto;
}

.hv-mietkopf .hv-mietkopf-finanzgruppe .hv-mietkopf-wert {
    white-space: nowrap;
}

/* Detailkarten: ausreichend Platz zwischen Beschriftung und Wert. */
.hv-mietraster .hv-mietinfo-zeile {
    grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 4px;
    align-items: baseline;
    padding: 3px 0;
}

.hv-mietraster .hv-mietinfo-label {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.hv-mietraster .hv-mietinfo-wert {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 750px) {
    .hv-mietkopf .hv-mietkopf-vertragsgruppe,
    .hv-mietkopf .hv-mietkopf-finanzgruppe {
        flex: 0 1 auto;
    }
}

@media (max-width: 600px) {
    .hv-mietraster .hv-mietinfo-zeile {
        grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
        column-gap: 12px;
    }

    .hv-mietkopf .hv-mietkopf-finanzgruppe .hv-mietkopf-info {
        flex: 0 1 100%;
        flex-wrap: wrap;
    }
}



/* Ausgleichsstatus als kompakte Ampel */
.hv-ausgleichsstatus {
    display: inline-block;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 50%;
    vertical-align: middle;
}

.hv-ausgleichsstatus--offen {
    background: #d92d20;
}

.hv-ausgleichsstatus--teilweise {
    background: #f5b800;
}

.hv-ausgleichsstatus--ausgeglichen {
    background: #079455;
}

/* Kontenblatt mit zusätzlicher Statusspalte:
   Buchungstext und Gegenkonto geben jeweils 2 % ab. */
.buchhaltung-kontenblatt-tabelle:has(th:nth-child(11)) th:nth-child(6),
.buchhaltung-kontenblatt-tabelle:has(th:nth-child(11)) td:nth-child(6),
.buchhaltung-kontenblatt-tabelle:has(th:nth-child(11)) th:nth-child(7),
.buchhaltung-kontenblatt-tabelle:has(th:nth-child(11)) td:nth-child(7) {
    width: 20%;
}

.buchhaltung-kontenblatt-tabelle th:nth-child(11),
.buchhaltung-kontenblatt-tabelle td:nth-child(11) {
    width: 4%;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}

/* Ampel in den gebuchten monatlichen Sollstellungen */
.buchhaltung-sollstellung-buchungen th:last-child,
.buchhaltung-sollstellung-buchungen td.buchhaltung-sollstellung-ausgleich {
    text-align: center;
}



/* Anbietervertraege – nutzt globale HV26-Formularelemente */
.hv-anbietervertrag .av-form fieldset {
    border:1px solid var(--hv-border);
    margin:0 0 18px;
    padding:14px;
    min-width:0;
}
.hv-anbietervertrag .av-form legend {
    padding:0 6px;
    font-weight:600;
}
.hv-anbietervertrag .av-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.hv-anbietervertrag .av-grid > label {
    display:block;
    min-width:0;
}
.hv-anbietervertrag .av-grid > label > .form-input {
    display:block;
    margin-top:6px;
    box-sizing:border-box;
}
.hv-anbietervertrag textarea.form-input {
    height:auto;
    min-height:90px;
}
.hv-anbietervertrag .av-search-field {
    position:relative;
    min-width:0;
}
.hv-anbietervertrag .av-search-field > label {
    display:block;
    margin-bottom:6px;
}
.hv-anbietervertrag .av-search-control {
    position:relative;
}
.hv-anbietervertrag .av-search-control .form-input {
    display:block;
    box-sizing:border-box;
    padding-right:40px;
}
.hv-anbietervertrag .av-search-clear {
    position:absolute;
    right:7px;
    top:50%;
    transform:translateY(-50%);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    padding:0;
    border:1px solid var(--hv-border);
    border-radius:5px;
    background:#fff;
    color:var(--hv-text);
    cursor:pointer;
}
.hv-anbietervertrag .av-search-clear:hover {
    background:#f1f5f9;
}
.hv-anbietervertrag .av-search-clear svg {
    pointer-events:none;
}
.hv-anbietervertrag .av-search-results {
    position:absolute;
    z-index:50;
    left:0;
    right:0;
    top:calc(100% + 3px);
    max-height:260px;
    overflow:auto;
    background:#fff;
    border:1px solid var(--hv-border);
    box-shadow:0 6px 16px #0002;
}
.hv-anbietervertrag .av-search-results[hidden] {
    display:none;
}
.hv-anbietervertrag .av-search-option {
    display:block;
    width:100%;
    padding:9px;
    border:0;
    border-bottom:1px solid var(--hv-border);
    background:#fff;
    text-align:left;
    cursor:pointer;
    color:var(--hv-text);
}
.hv-anbietervertrag .av-search-option:hover, .hv-anbietervertrag .av-search-option:focus {
    background:#eff6ff;
}
.hv-anbietervertrag .av-search-option small {
    display:block;
    margin-top:3px;
    opacity:.7;
}
.hv-anbietervertrag .av-search-message {
    padding:9px;
    opacity:.75;
}
.hv-anbietervertrag .av-invalid .form-input {
    border-color:#dc2626;
}
@media(max-width:900px) {
    .hv-anbietervertrag .av-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:600px) {
    .hv-anbietervertrag .av-grid {
        grid-template-columns:minmax(0,1fr);
    }
}

/* DMS – einheitliches Schriftbild der Verknüpfungsauswahl */

.dms-verknuepfungsmodus .dms-global-suche-ergebnisse,
.dms-verknuepfungsmodus .dms-verknuepfungen-liste {
    font-size: 12px;
    line-height: 1.45;
}

.dms-verknuepfungsmodus .dms-verknuepfung-suchergebnis-gruppe__titel,
.dms-verknuepfungsmodus .dms-verknuepfungen-spalte > h4 {
    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
}

.dms-verknuepfungsmodus .dms-verknuepfung-suchbaum__titel strong,
.dms-verknuepfungsmodus .dms-verknuepfungen-liste strong {
    font-weight: 500;
}

/* Ausgewählte Verknüpfungen: Entfernen vor dem Text */

.dms-verknuepfungsmodus
#dms-verknuepfungen-arbeitsstand > .dms-verknuepfung {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.dms-verknuepfungsmodus
#dms-verknuepfungen-arbeitsstand
.dms-verknuepfung-arbeitsstand-entfernen {
    order: -1;
    flex: 0 0 auto;
}

.dms-verknuepfungsmodus
#dms-verknuepfungen-arbeitsstand
.dms-verknuepfung__inhalt {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* DMS – gemeinsame Verknüpfungssuche */

.dms-verknuepfungsmodus .dms-verknuepfung-suchergebnis-gruppe {
    margin-top: 12px;
}

.dms-verknuepfungsmodus .dms-verknuepfung-suchergebnis-gruppe__titel {
    margin-bottom: 4px;
}

.dms-verknuepfungsmodus .dms-verknuepfung-suchbaum {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dms-verknuepfungsmodus .dms-verknuepfung-suchbaum__zeile {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
}

.dms-verknuepfungsmodus .dms-verknuepfung-suchbaum__inhalt {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.dms-verknuepfungsmodus .dms-verknuepfung-suchbaum__pfeil {
    flex: 0 0 auto;
    color: #777;
}

.dms-verknuepfungsmodus .dms-verknuepfung-suchbaum__titel {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dms-verknuepfungsmodus .dms-verknuepfung-suchbaum__hinzufuegen {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    padding: 0;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.dms-verknuepfungsmodus .dms-verknuepfung-suchbaum__hinzufuegen:hover {
    background: #f2f2f2;
}

.dms-verknuepfungsmodus .dms-verknuepfung-suchbaum__hinzufuegen:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.dms-verknuepfungsmodus .dms-verknuepfung-suche-status,
.dms-verknuepfungsmodus .dms-verknuepfung-suche-fehler {
    padding: 10px 0;
    color: #666;
}

.dms-verknuepfungsmodus .dms-verknuepfung-suche-fehler {
    color: #a40000;
}

/* DMS – Erfassung: Grundlayout und Dokumentvorschau */

.dms-erfassung {
    padding: 20px;
}

.dms-erfassung__kopf {
    margin-bottom: 18px;
}

.dms-erfassung__kopf h1 {
    margin: 0 0 5px 0;
}

.dms-erfassung__kopf p {
    margin: 0;
    color: #777;
}


/*
 * Vorschau links, Erfassung rechts
 */

.dms-erfassung__arbeitsplatz {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(360px, 0.6fr);
    gap: 18px;

    height: calc(100vh - 190px);
    min-height: 600px;
}


.dms-erfassung__vorschau,
.dms-erfassung__formular {
    min-width: 0;

    border: 1px solid #d3d3d8;
    border-radius: 6px;

    background: #fff;
}


/*
 * Vorschau
 */

.dms-erfassung__vorschau {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.dms-erfassung__bereichskopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 12px 15px;

    border-bottom: 1px solid #e2e2e5;
}

.dms-erfassung__bereichskopf span {
    min-width: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #777;
    font-size: 13px;
}

.dms-erfassung__vorschauflaeche {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    display: flex;

    padding: 10px;

    background: #ededf0;
}

.dms-erfassung__pdf {
    flex: 1 1 auto;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    border: 1px solid #d3d3d8;
    background: #fff;
}

.dms-erfassung__bildbereich {
    flex: 1 1 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 0;

    overflow: auto;
}

.dms-erfassung__bild {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;
}

.dms-erfassung__platzhalter {
    margin: auto;
    color: #777;
}


/*
 * Grunddaten
 */

.dms-erfassung__formular {
    align-self: start;
}

.dms-erfassung__formular form {
    padding: 18px;
}

.dms-erfassung__zweispaltig {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.dms-erfassung__hinweis {
    padding: 20px;

    border: 1px solid #ddd;
    background: #fff;
}


@media (max-width: 1000px) {

    .dms-erfassung__arbeitsplatz {
        grid-template-columns: 1fr;
        height: auto;
    }

    .dms-erfassung__vorschau {
        height: 600px;
    }

}

/* DMS – Dokumentinformationen in der Erfassung */

.dms-erfassung-dokumentinfo {
    padding: 0;
}

.dms-erfassung-dokumentinfo__untertitel {
    margin-top: 3px;
    font-size: 13px;
    color: #777;
}

.dms-erfassung-dokumentinfo__abschnitt {
    padding: 20px;
    border-bottom: 1px solid #e5e5e8;
}

.dms-erfassung-dokumentinfo__abschnitt[hidden] {
    display: none;
}

.dms-erfassung-dokumentinfo__hinweis {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.45;
    color: #777;
}

.dms-erfassung-dokumentinfo__aktionen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    padding: 20px;
}

.dms-erfassung-dokumentinfo__aktionen > .dms-button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
}

.dms-erfassung-dokumentinfo__optional {
    margin-top: 14px;
}

.dms-erfassung-dokumentinfo__optional-button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    color: #555;
    font: inherit;
    font-size: 12px;
    line-height: 1.45;
}

.dms-erfassung-dokumentinfo__optional-button:hover {
    text-decoration: underline;
}

/* Rechnungserfassung: einheitliche Beschriftungen und Feldinhalte */
.dms-rechnungsformular label,
.dms-rechnungsformular .dms-daten__feld label {
    display: block;
    margin-bottom: 6px;
    color: #625b69;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
}

.dms-rechnungsformular .dms-eingabe,
.dms-rechnungsformular .form-input {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
}

.dms-rechnungsformular .dms-abschnitt {
    margin-bottom: 14px;
    padding-bottom: 12px;
}

.dms-rechnungsformular .dms-abschnitt__titel {
    margin: 0 0 8px;
    color: #514858;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}

.dms-rechnungsformular .dms-daten__feld {
    margin-bottom: 8px;
}

.dms-rechnungsformular .dms-formular__zweispaltig {
    column-gap: 10px;
    row-gap: 0;
}

.dms-rechnungsformular .dms-eingabe,
.dms-rechnungsformular .form-input {
    padding: 6px 8px;
}

.dms-rechnungsformular > p {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.4;
}

.dms-rechnungsformular > .dms-abschnitt .hv-table th,
.dms-rechnungsformular > .dms-abschnitt .hv-table td {
    padding: 5px 8px;
}