/**
 * Mieter-App — eigene Gestaltung ergänzend zu AdminLTE 3.2
 *
 * Absichtlich sparsam: die App soll für Mieter aussehen wie ein ruhiges
 * Auskunftsportal, nicht wie ein Verwaltungswerkzeug. Alles, was AdminLTE
 * schon mitbringt, wird nicht überschrieben.
 */

:root {
    --mieter-ruhig:   #f4f6f9;
    --mieter-rahmen:  #dee2e6;
    --mieter-gedaempft: #6c757d;
}

body {
    font-size: 0.95rem;
}

/* ── Ladezustand ──────────────────────────────────────────────────── */
.lade-hinweis {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--mieter-gedaempft);
}

/* ── Auswahlseite ────────────────────────────────────────────────── */
.auswahl-seite {
    background: linear-gradient(160deg, #1f2d3d 0%, #3c8dbc 100%);
    min-height: 100vh;
    margin: 0;
}

.auswahl-huelle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.auswahl-karte {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
    padding: 2rem;
    width: 100%;
    max-width: 30rem;
}

.auswahl-karte .list-group-item-action {
    cursor: pointer;
}

/* ── Kennzahlen ──────────────────────────────────────────────────── */
.small-box h3 {
    font-size: 1.75rem;
    white-space: nowrap;
}

.small-box .inner small {
    display: block;
    margin-top: -0.4rem;
    font-size: 0.78rem;
}

.info-box-number {
    font-size: 1.15rem;
}

/* ── Tabellen ────────────────────────────────────────────────────── */
.table th {
    border-top: none;
    font-weight: 600;
}

.tabelle-verlauf td,
.tabelle-verlauf th {
    padding: 0.35rem 0.75rem;
    vertical-align: middle;
}

/* Zahlen rechtsbündig und in gleicher Zeichenbreite: so stehen Euro-Beträge
   in einer Spalte stellenrichtig untereinander und lassen sich vergleichen,
   ohne sie zu lesen. */
.betrag {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Fortschrittsbalken im Zahlungsverlauf ───────────────────────── */
.zahl-balken {
    height: 0.65rem;
    border-radius: 0.35rem;
    background: var(--mieter-ruhig);
    overflow: hidden;
}

.zahl-balken > div {
    height: 100%;
    transition: width 0.3s ease;
}

/* ── Mitteilungen ────────────────────────────────────────────────── */
.mitteilung {
    border-left: 4px solid var(--mieter-rahmen);
}

.mitteilung.ungelesen {
    border-left-color: #dc3545;
    background: #fff9f9;
}

.mitteilung.wichtig .card-title {
    font-weight: 700;
}

.mitteilung .card-text {
    white-space: pre-line;
}

/* ── Anliegen ────────────────────────────────────────────────────── */
.anliegen-eintrag + .anliegen-eintrag {
    border-top: 1px solid var(--mieter-rahmen);
    margin-top: 1rem;
    padding-top: 1rem;
}

.anliegen-antwort {
    background: var(--mieter-ruhig);
    border-left: 3px solid #28a745;
    padding: 0.6rem 0.9rem;
    margin-top: 0.6rem;
    border-radius: 0 0.25rem 0.25rem 0;
}

/* ── Druckausgabe ────────────────────────────────────────────────── */
/* Die Nebenkostenabrechnung wird erfahrungsgemäß ausgedruckt oder als PDF
   gesichert. Navigation und Bedienelemente gehören dann nicht aufs Blatt. */
@media print {
    .main-sidebar,
    .main-header,
    .main-footer,
    .card-tools,
    .callout,
    .btn {
        display: none !important;
    }

    .content-wrapper {
        margin-left: 0 !important;
    }

    .card {
        border: 1px solid #000 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }
}

/* ── Anklickbare Tabellenzeilen ──────────────────────────────────── */
/* Ein Klick auf die Zeile öffnet den Detail-Dialog mit allen Angaben.
   Der Zeiger und die Aufhellung machen sichtbar, dass die Zeile mehr kann,
   als sie zeigt — ohne diesen Hinweis findet die Funktion niemand. */
.zeilen-klickbar tr[data-detail] {
    cursor: pointer;
}

.zeilen-klickbar tr[data-detail]:hover {
    background-color: rgba(0, 123, 255, 0.06);
}

.zeilen-klickbar tr[data-detail]:active {
    background-color: rgba(0, 123, 255, 0.12);
}

/* Beschriftungsspalte im Detail-Dialog */
.w-40 { width: 40%; }

/* ── Konto-Dialog ────────────────────────────────────────────────── */
#profilDialog .nav-tabs .nav-link {
    font-size: 0.9rem;
}

/* ── PDF-Ausgabe ─────────────────────────────────────────────────── */
/* html2canvas rendert den Inhaltsbereich so, wie er im Browser steht.
   Ein waagerechter Scrollbalken würde dabei abgeschnitten — deshalb wird
   der Inhalt während der Aufnahme vollständig aufgeklappt. */
.pdf-aufnahme .table-responsive {
    overflow: visible !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Reparatur-Dialog: Verlauf
   ══════════════════════════════════════════════════════════════════════ */
/* Die beiden Seiten werden über Farbe und Einzug unterschieden, nicht über
   links/rechts wie in einem Chat: der Verlauf wird auch ausgedruckt und
   gelegentlich als Beleg verwendet — dort trägt ein farbiger Balken weiter
   als eine Position auf dem Bildschirm. */
.kommentar {
    border-left: 4px solid var(--mieter-rahmen);
    background: #fff;
    border-radius: 0 .35rem .35rem 0;
    padding: .7rem .9rem;
    margin-bottom: .7rem;
}

.kommentar-mieter {
    border-left-color: #007bff;
    background: #f7fbff;
}

.kommentar-vermieter {
    border-left-color: #28a745;
    background: #f6fdf8;
    margin-left: 1.5rem;
}

.kommentar .btn-link {
    font-size: .82rem;
}

.karte-schreiben {
    background: var(--mieter-ruhig);
    border: 1px solid var(--mieter-rahmen);
    border-radius: .35rem;
    padding: .9rem;
}

/* ══════════════════════════════════════════════════════════════════════
   Reparatur-Dialog: Anhänge
   ══════════════════════════════════════════════════════════════════════ */
.anhang-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .9rem;
}

.anhang-karte {
    border: 1px solid var(--mieter-rahmen);
    border-radius: .35rem;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.anhang-karte:hover {
    border-color: #007bff;
    box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .12);
}

.anhang-vorschau {
    height: 8rem;
    background: var(--mieter-ruhig);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.anhang-vorschau img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.anhang-symbol {
    font-size: 3rem;
    color: #dc3545;
}

.anhang-fuss {
    padding: .5rem .6rem;
    font-size: .82rem;
}

/* ══════════════════════════════════════════════════════════════════════
   Anhang-Anzeige (pdf.js / Bild)
   ══════════════════════════════════════════════════════════════════════ */
.anhang-buehne {
    background: #525659;          /* der Grauton, den PDF-Betrachter üblicherweise nutzen */
    min-height: 60vh;
    max-height: 78vh;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
}

.anhang-buehne canvas,
.anhang-buehne img {
    max-width: 100%;
    background: #fff;
    box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .4);
}

.anhang-buehne img {
    height: auto;
    object-fit: contain;
}

.anhang-buehne .alert,
.anhang-buehne > .text-muted {
    align-self: center;
    background: #fff;
    border-radius: .35rem;
    padding: 1.5rem 2rem;
}

/* Im PDF-Export der Ansicht haben Dialoge nichts verloren. */
@media print {
    .modal { display: none !important; }
}

/* Namensfeld in der Seitenleiste — öffnet denselben Kontodialog wie oben rechts */
.benutzer-anklickbar {
    cursor: pointer;
    border-radius: .35rem;
    transition: background-color .15s ease;
}

.benutzer-anklickbar:hover,
.benutzer-anklickbar:focus {
    background-color: rgba(255, 255, 255, .08);
    outline: none;
}

.benutzer-anklickbar:focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}

/* ══════════════════════════════════════════════════════════════════════
   Benachrichtigungen im Konto-Dialog
   ══════════════════════════════════════════════════════════════════════ */
.ben-bereich + .ben-bereich {
    margin-top: 1.1rem;
}

.ben-bereich-titel {
    font-weight: 600;
    color: var(--mieter-gedaempft);
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--mieter-rahmen);
    padding-bottom: .25rem;
    margin-bottom: .55rem;
}

/* NUR oben und unten Abstand geben.
   Die Kurzform `padding: .35rem 0` setzt auch padding-left auf 0 und hebt
   damit Bootstraps `padding-left: 2.25rem` der Klasse .custom-control auf —
   der Beschriftungstext rutschte unter den Schalter und war am linken Rand
   nicht mehr lesbar. */
.ben-eintrag {
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.ben-eintrag .custom-control-label {
    cursor: pointer;
    /* Etwas Luft zwischen Schalter und Text, damit die zweizeilige
       Beschriftung nicht am Schalter klebt. */
    padding-left: .25rem;
}

/* Der Schalter sitzt an der ersten Zeile, nicht mittig zum ganzen Block —
   sonst steht er bei zweizeiligen Einträgen neben der Beschreibung statt
   neben dem Titel. */
.ben-eintrag .custom-control-label::before,
.ben-eintrag .custom-control-label::after {
    top: .2rem;
}

/* ══════════════════════════════════════════════════════════════════════
   Zählerstände
   ══════════════════════════════════════════════════════════════════════ */
.zst-vorschau {
    width: 4.5rem;
    height: 3.4rem;
    object-fit: cover;
    border-radius: .25rem;
    border: 1px solid var(--mieter-rahmen);
    cursor: pointer;
    transition: border-color .15s ease;
}

.zst-vorschau:hover {
    border-color: #007bff;
}

#zstDialogBild {
    max-height: 22rem;
    width: 100%;
    object-fit: contain;
    background: var(--mieter-ruhig);
}

/* Geltender Stand und KI-Vorschlag stehen nebeneinander — der geltende Wert
   ist der, auf den es ankommt, und darf sich davon absetzen. */
.zst-stand {
    font-size: 1.05rem;
}

.zst-ki-wert {
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════
   Reiter „Mietvertrag" — Bühne für die PDF-Anzeige
   ══════════════════════════════════════════════════════════════════════ */

/* Der Scan wird auf die Breite eingepasst; bei hohem Zoom darf er in beide
   Richtungen laufen. Der Rollbalken gehört an die Bühne und NICHT an die
   Seite — sonst schöbe ein vergrößerter Vertrag das ganze Layout nach rechts. */
.dok-buehne {
    background: #4b545c;
    overflow: auto;
    max-height: 78vh;
    text-align: center;
    padding: 1rem;
}

.dok-buehne canvas {
    /* Der weiße Schatten hebt das Blatt vom dunklen Grund ab; ohne ihn
       verschwimmt der Rand eines gescannten Blattes mit der Bühne. */
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .4);
    background: #fff;
    display: inline-block;
}

.dok-buehne .alert,
.dok-buehne .text-muted {
    background: transparent;
}

/* Auf dem dunklen Grund muss der Hinweistext hell sein. */
.dok-buehne > .text-muted {
    color: #d8dbe0 !important;
}

.dok-eintrag.active {
    /* Bootstrap färbt einen aktiven list-group-item blau ein und macht die
       Schrift weiß. Beim Untertitel (text-muted) bliebe sie grau und wäre auf
       Blau kaum zu lesen. */
    color: #fff;
}
.dok-eintrag.active .text-muted {
    color: rgba(255, 255, 255, .8) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Reiter „Hausordnung" — gesetzter Fließtext
   ══════════════════════════════════════════════════════════════════════ */

.hausordnung {
    /* Etwas mehr Zeilenabstand als in Tabellen: das hier ist Lesetext, kein
       Zahlenwerk. */
    line-height: 1.65;
    max-width: 62rem;
}

.hausordnung .ho-titel {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.hausordnung .ho-kapitel {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 2rem 0 .75rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid #17a2b8;
    /* Sprungziel: ohne den Abstand nach oben verschwände die Überschrift beim
       Anspringen unter der festen Kopfleiste von AdminLTE. */
    scroll-margin-top: 4.5rem;
}

.hausordnung .ho-abschnitt {
    font-size: 1.12rem;
    font-weight: 600;
    margin: 1.4rem 0 .5rem;
    color: #495057;
}

.hausordnung p        { margin-bottom: .85rem; }
.hausordnung .ho-liste { margin-bottom: 1rem; padding-left: 1.4rem; }
.hausordnung .ho-liste li { margin-bottom: .35rem; }

.hausordnung .ho-linie {
    margin: 1.6rem 0;
    border-top: 1px solid #e3e6ea;
}

.hausordnung .ho-kasten {
    /* Die Hinweiskästen der Hausordnung sind Zitatblöcke im Markdown. Der
       Balken links macht sichtbar, dass sie zum vorangehenden Absatz gehören
       und keine eigenständige Meldung der Anwendung sind. */
    border-left: 4px solid rgba(0, 0, 0, .25);
    margin: 1rem 0 1.2rem;
}

.hausordnung .ho-tabelle {
    background: #fff;
    margin-bottom: 1.2rem;
}
.hausordnung .ho-tabelle th {
    background: #f4f6f9;
    font-weight: 600;
}

.hausordnung code {
    background: #f4f6f9;
    padding: .1rem .3rem;
    border-radius: .2rem;
}

/* ══════════════════════════════════════════════════════════════════════
   Vermieterkasten auf der Übersicht
   ══════════════════════════════════════════════════════════════════════ */

.vermieter-zeile {
    display: flex;
    align-items: flex-start;
    padding: .5rem 0;
    border-bottom: 1px solid #f0f2f4;
}
.vermieter-zeile:last-child { border-bottom: 0; }

.vermieter-zeile .vz-zeichen {
    /* Feste Breite, damit die Angaben trotz unterschiedlich breiter Emojis
       an derselben Kante beginnen. */
    flex: 0 0 2.1rem;
    font-size: 1.15rem;
    line-height: 1.4;
    text-align: center;
}

.vermieter-zeile .vz-text { flex: 1 1 auto; min-width: 0; }

.vermieter-zeile .vz-beschriftung {
    display: block;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #869099;
}

.vermieter-notfall {
    background: #fff5f5;
    border-radius: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
}

/* ══════════════════════════════════════════════════════════════════════
   Verwaltungsbereich
   ══════════════════════════════════════════════════════════════════════ */

/* Die Listen der Uebersicht koennen lang werden. Der Rollbalken gehoert an die
   Karte und nicht an die Seite — sonst muss man zum Vergleich zweier Karten
   jedes Mal an den Seitenanfang zurueck. */
.tabelle-scroll {
    max-height: 26rem;
    overflow-y: auto;
}

/* Auffaellige Protokollzeilen (abgewiesen, gesperrt, fehlgeschlagen). In 2.600
   Zeilen faende man sie sonst nicht. Bewusst nur ein zarter Ton: das Protokoll
   ist voll von abgewiesenen Zugriffen, die genau so gewollt sind — die
   Kennzeichnung soll auffallen, nicht alarmieren. */
.log-auffaellig {
    background: #fff8f8;
}
.log-auffaellig code {
    color: #b02a37;
}

/* Kleine Schaltflaechen in der Kontenliste: sechs Konten mit je drei Aktionen
   sprengen sonst die Spaltenbreite. */
.btn-xs {
    padding: .1rem .4rem;
    font-size: .78rem;
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════
   Verwaltung — Tabelle "Stand je Mietverhältnis"
   ══════════════════════════════════════════════════════════════════════ */

/* Wohnung und Mietername als Schaltfläche. Bewusst ein <button> ohne
   Knopf-Optik: es soll wie eine Tabellenzelle aussehen und sich wie ein Link
   verhalten. Ein echter Knopf zwischen lauter Zahlen zerrisse die Zeile. */
.knopf-wohnung {
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
}
.knopf-wohnung:hover strong,
.knopf-wohnung:focus strong { text-decoration: underline; }
.knopf-wohnung:hover .fa-right-to-bracket { color: #007bff; }
.knopf-wohnung .fa-right-to-bracket { color: #adb5bd; }
.knopf-wohnung:disabled { cursor: default; }

/* Anklickbare Zahlen. Der gestrichelte Unterstrich zeigt an, dass hier mehr
   passiert als beim Rest der Zeile, ohne wie ein Verweis auszusehen. */
.knopf-zahl {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    border-bottom: 1px dashed #adb5bd;
}
.knopf-zahl:hover, .knopf-zahl:focus {
    border-bottom-color: #007bff;
    color: #007bff;
}
.knopf-zahl .badge { cursor: pointer; }

.tabelle-stand td { vertical-align: middle; }

/* Filterschild im Kartenkopf: zeigt, dass die Liste darunter NICHT vollständig
   ist. Ohne diesen Hinweis sucht man den Rest an der falschen Stelle. */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #e9f5fb;
    border: 1px solid #a8d8ea;
    border-radius: 1rem;
    padding: .05rem .3rem .05rem .55rem;
    font-size: .78rem;
    font-weight: 600;
    color: #0c5460;
}
.filter-chip .close-chip {
    background: none;
    border: 0;
    padding: 0 .25rem;
    line-height: 1;
    font-size: 1rem;
    color: #0c5460;
    cursor: pointer;
}
.filter-chip .close-chip:hover { color: #dc3545; }

/* ══════════════════════════════════════════════════════════════════════
   Bescheinigungen (Vermieterbescheinigung und Mietschuldenfreiheit)

   Der Kasten ist der Papierfassung nachempfunden: mehr Zeilenabstand als im
   übrigen Portal, ein Serifensatz für den Fliesstext, unterlegte
   Abschnittsüberschriften. Wer die Bildschirmfassung mit dem PDF vergleicht,
   soll dasselbe Schriftstück wiedererkennen — sonst entsteht der Verdacht,
   das PDF zeige etwas anderes als die Anzeige.
   ══════════════════════════════════════════════════════════════════════ */
.bescheinigung {
    max-width: 46rem;
    line-height: 1.65;
}
.bescheinigung h4 {
    font-weight: 700;
    letter-spacing: .01em;
}
.bescheinigung-abschnitt {
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #495057;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: .3rem;
    margin-bottom: .75rem;
}
.bescheinigung code {
    background: #f1f3f5;
    color: #495057;
    padding: .05rem .3rem;
    border-radius: .2rem;
}

/* ── Monatsraster ──────────────────────────────────────────────────────
   Zwölf bis vierundzwanzig Monate auf einen Blick. Die Farbe trägt die
   Aussage, aber nie allein: der Kurzname des Monats steht daneben, und der
   vollständige Stand hängt im title-Attribut. Eine Anzeige, die sich nur
   über Farbe erklärt, ist für rund acht Prozent der Männer nicht lesbar. */
.msf-raster {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.msf-monat {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    padding: .3rem 0;
    border-radius: .25rem;
    border: 1px solid transparent;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.1;
    cursor: default;
}
.msf-monat small {
    font-size: .62rem;
    font-weight: 400;
    opacity: .75;
}
.msf-bezahlt      { background: #e8f5ec; border-color: #b7ddc3; color: #1c6b36; }
.msf-ueberzahlung { background: #e7f1fb; border-color: #b3d2f0; color: #17548c; }
.msf-teilzahlung  { background: #fdf3e3; border-color: #f0d5a3; color: #8a5a10; }
.msf-offen        { background: #fbeaea; border-color: #f0b5b5; color: #a32020; }
.msf-kein_mietverhaeltnis { background: #f1f3f5; border-color: #dee2e6; color: #868e96; }

/* Legende — dieselben Farben, nur als Punkt. */
.msf-punkt {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: .15rem;
    border: 1px solid transparent;
    vertical-align: -1px;
    margin-right: .2rem;
}

/* Bei der Aufnahme durch html2canvas (der allgemeine PDF-Knopf oben rechts)
   darf der Kasten nicht schmal bleiben — sonst steht die Bescheinigung auf
   dem Blatt in einer halben Spalte. */
.pdf-aufnahme .bescheinigung { max-width: none; }

/* ── Vermieterbescheinigung: Auswahl des Formulars ─────────────────────
   Zwei Karten statt einer Auswahlliste. Die beiden Papiere gehen an
   verschiedene Behörden und heissen ähnlich; wer sie in einer Klappliste
   nebeneinanderstellt, lädt zum Vergreifen ein. Auf der Karte steht die
   Rechtsgrundlage und wofür man sie braucht — das ist die Auskunft, die
   die Wahl überhaupt erst möglich macht. */
.vb-wahl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .75rem;
}
.vb-karte {
    display: block;
    margin: 0;
    padding: .85rem 1rem;
    border: 2px solid #dee2e6;
    border-radius: .35rem;
    cursor: pointer;
    transition: border-color .12s, background-color .12s;
}
.vb-karte:hover     { border-color: #adb5bd; }
.vb-karte.aktiv     { border-color: #007bff; background: #f2f8ff; }
.vb-karte input     { position: absolute; opacity: 0; pointer-events: none; }
.vb-karte-titel {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: #212529;
}
.vb-karte-recht {
    display: block;
    font-size: .76rem;
    font-style: italic;
    color: #6c757d;
    margin-bottom: .35rem;
}
.vb-karte-text {
    display: block;
    font-size: .82rem;
    line-height: 1.45;
    color: #495057;
}

/* Ankreuzfelder im Vorschautext — dieselbe Form wie auf dem Blatt. */
.vb-ankreuzen { margin-bottom: 1.25rem; }
.vb-kreuz {
    display: inline-block;
    margin-right: 2rem;
    color: #6c757d;
}
.vb-kreuz.gesetzt {
    color: #212529;
    font-weight: 600;
}

/* ── Leerstellen zum Eintragen ─────────────────────────────────────────
   Ein leeres Feld sieht auf dem Ausdruck aus wie ein vergessenes. Eine Linie
   sagt: hier ist von Hand einzutragen. Dieselbe Aussage macht das PDF mit
   einer Reihe Unterstriche. */
.vb-linie {
    border-bottom: 1px solid #868e96;
    height: 2.2rem;
    margin-bottom: .25rem;
}
.vb-linie-klein {
    display: inline-block;
    width: 60%;
    min-width: 8rem;
    border-bottom: 1px dotted #adb5bd;
    height: 1.1rem;
    vertical-align: bottom;
}
.vb-unterschrift {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-top: 2.5rem;
}

/* Handlungsanleitung in der Seitenleiste. */
.vb-schritte {
    margin: 0;
    padding: .75rem 1rem .75rem 2.25rem;
    font-size: .87rem;
    line-height: 1.5;
}
.vb-schritte li { margin-bottom: .4rem; }
.vb-schritte li:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════
   Zugriffsmatrix (Verwaltungsbereich)

   Eine Kreuztabelle: Ansichten und Reiter in den Zeilen, Portalkonten in
   den Spalten. Zwei Dinge machen sie erst lesbar, und beide sind hier
   geloest und nicht im Markup:

     1. Die erste Spalte bleibt beim seitlichen Scrollen stehen. Ohne sie
        wuesste man nach drei Spalten nicht mehr, in welcher Zeile man ist.
     2. Die Kopfzeile bleibt beim senkrechten Scrollen stehen. Neunzehn
        Zeilen passen nicht in den Dialog, und ein Haken ohne Spaltenkopf
        sagt nichts.
   ══════════════════════════════════════════════════════════════════════ */
.zugr-rahmen {
    max-height: 62vh;
    overflow: auto;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
}

.zugr-matrix {
    font-size: .85rem;
    /* separate statt collapse: bei collapse verschwinden die Raender der
       fixierten Zellen beim Scrollen unter den Nachbarzellen. */
    border-collapse: separate;
    border-spacing: 0;
}

.zugr-matrix th,
.zugr-matrix td {
    border: 1px solid #dee2e6;
    vertical-align: middle;
}

/* Kopfzeile stehen lassen. z-index 3, damit sie ueber der fixierten
   ersten Spalte liegt — sonst schiebt sich die Zeilenbeschriftung beim
   Scrollen ueber den Spaltenkopf. */
.zugr-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f4f6f9;
    white-space: nowrap;
}

/* Erste Spalte stehen lassen. */
.zugr-matrix .zugr-name {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    min-width: 17rem;
    max-width: 22rem;
}

.zugr-matrix thead th.zugr-name {
    /* Die Ecke oben links liegt in beiden Richtungen fest und muss ueber
       beidem liegen. */
    z-index: 4;
    background: #f4f6f9;
}

/* Ein Reiter gehoert zu seiner Ansicht — die Einrueckung sagt das ohne Worte. */
.zugr-matrix tr.zugr-reiter .zugr-name {
    padding-left: 2.25rem;
    color: #495057;
}
.zugr-matrix tr.zugr-ansicht .zugr-name {
    font-weight: 600;
    background: #fbfcfd;
}

.zugr-matrix td.zugr-zelle {
    text-align: center;
    padding: 0;
}
.zugr-matrix td.zugr-zelle:hover {
    background: #eef4ff;
}

/* Der Schalter selbst. Ein <button> statt eines anklickbaren <td>: eine
   Tabellenzelle ist mit der Tastatur nicht erreichbar. Er fuellt die Zelle
   ganz aus, damit der Klick weiterhin ueberall in der Zelle sitzt. */
.zugr-matrix .zugr-knopf {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    padding: .25rem;
    line-height: 1;
    cursor: pointer;
}
.zugr-matrix .zugr-knopf:disabled { cursor: not-allowed; }
.zugr-matrix .zugr-knopf:focus-visible {
    outline: 2px solid #0056b3;
    outline-offset: -2px;
}

/* Zustaende. Die Farbe allein traegt die Aussage NICHT — in jeder Zelle
   steht zusaetzlich ein Symbol. Wer Rot und Gruen nicht unterscheidet,
   liest den Haken und das Kreuz. */
.zugr-ja    { color: #28a745; }
.zugr-nein  { color: #dc3545; }
.zugr-erbt  { color: #adb5bd; }
.zugr-fest  { color: #6c757d; }

td.zugr-zelle.ist-nein { background: #fdf0f1; }
td.zugr-zelle.ist-erbt { background: #f6f7f8; }
td.zugr-zelle.ist-fest { background: #f1f3f5; }

/* Die Spalte des eigenen Kontos hervorheben: wer sich selbst gerade
   Bereiche nimmt, soll das sehen. */
.zugr-matrix .zugr-selbst { background: #fffdf3; }
.zugr-matrix thead th.zugr-selbst { background: #fdf6e3; }

/* Kopfknoepfe fuer Zeile und Spalte („alle freigeben/sperren"). */
.zugr-sammel {
    border: 0;
    background: transparent;
    padding: 0 .2rem;
    line-height: 1;
    font-size: .8rem;
    color: #6c757d;
}
.zugr-sammel:hover { color: #212529; }

.zugr-legende {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: .2rem;
    vertical-align: -1px;
}
.zugr-legende.zugr-ja   { background: #28a745; }
.zugr-legende.zugr-nein { background: #dc3545; }
.zugr-legende.zugr-erbt { background: #adb5bd; }
.zugr-legende.zugr-fest { background: #6c757d; }