/* Gestaltung nach docs/oberflaeche.md. Farben als Variablen; Bootstrap übernimmt sie über seine eigenen Variablen. */

/* Source Sans 3 (SIL Open Font License, siehe fonts/source-sans-3/OFL.txt), lokal ausgeliefert statt von Google */
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url('fonts/source-sans-3/source-sans-3-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url('fonts/source-sans-3/source-sans-3-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --tsc-bg: #F4F5F7;
    --tsc-surface: #FFFFFF;
    --tsc-surface-muted: #F7F8FA;
    --tsc-border: #DDE1E7;
    --tsc-border-strong: #CBD2DB;
    --tsc-control-border: #8B95A3;
    --tsc-divider: #EEF0F3;
    --tsc-text: #1B2430;
    --tsc-label: #3E4855;
    --tsc-muted: #5B6573;
    --tsc-accent: #1F5FAE;
    --tsc-accent-dark: #174A88;
    --tsc-accent-soft: #E8F0FA;
    --tsc-info-soft: #EEF4FC;
    --tsc-sidebar: #14325E;
    --tsc-yellow: #F2E33A;
    --tsc-stripe-blue: #3B78C9;
    --tsc-error: #C4320A;
    --tsc-error-soft: #FDECEC;
    --tsc-error-text: #9B1C14;
    --tsc-warning: #D19A00;
    --tsc-warning-soft: #FFF4D6;
    --tsc-warning-text: #6B4A00;
    --tsc-success: #2E8A4E;
    --tsc-success-soft: #E7F5EC;
    --tsc-success-text: #1E6B3A;
    --tsc-neutral-soft: #EEF0F3;
    /* Höchstbreite aller Seiten außer Bearbeitung mit Vorschau und Protokoll (docs/oberflaeche.md, Seitenbreite) */
    --tsc-page-max-width: 1200px;
    --tsc-radius: 12px;
    --tsc-radius-sm: 8px;

    --bs-body-font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-color: var(--tsc-text);
    --bs-body-bg: var(--tsc-bg);
    --bs-emphasis-color: var(--tsc-text);
    --bs-secondary-color: var(--tsc-muted);
    --bs-border-color: var(--tsc-border);
    --bs-border-radius: var(--tsc-radius-sm);
    --bs-primary: #1F5FAE;
    --bs-primary-rgb: 31, 95, 174;
    --bs-danger: #C4320A;
    --bs-danger-rgb: 196, 50, 10;
    --bs-warning: #D19A00;
    --bs-warning-rgb: 209, 154, 0;
    --bs-success: #2E8A4E;
    --bs-success-rgb: 46, 138, 78;
    --bs-link-color: #1F5FAE;
    --bs-link-color-rgb: 31, 95, 174;
    --bs-link-hover-color: #174A88;
    --bs-link-hover-color-rgb: 23, 74, 136;
    --bs-focus-ring-color: rgba(31, 95, 174, 0.25);
}

body {
    background: var(--tsc-bg);
    color: var(--tsc-text);
}

h1, .h1 {
    font-size: 2rem;
    font-weight: 700;
}

h2, .h2 {
    font-size: 1.25rem;
    font-weight: 700;
}

h3, .h3, h4, .h4 {
    font-size: 1.1rem;
    font-weight: 700;
}

h1:focus {
    outline: none;
}

.content {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* Seitenbreite: gemeinsame Höchstbreite, linksbündig; Seiten mit WideLayout nutzen die volle Breite */
.page-body {
    max-width: var(--tsc-page-max-width);
}

    .page-body:has(> .page-wide) {
        max-width: none;
    }

/* Mein Konto: Fußzeile am unteren Rand des Fensters (ManageLayout.razor.css). Dafür reichen main, .content und .page-body
   die volle Höhe als Flex-Spalte weiter; nur hier, damit sich der Fluss der übrigen Seiten nicht ändert. */
main:has(.account-layout) {
    display: flex;
    flex-direction: column;
}

    main:has(.account-layout) > .content,
    .page-body:has(> .account-layout) {
        display: flex;
        flex: 1;
        flex-direction: column;
    }

/* Kopf einer Seite: Titel und ein bis zwei Sätze Erklärung */
.page-lead {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--tsc-muted);
}

/* ---------- Flächen (Karten) ---------- */

.surface {
    background: var(--tsc-surface);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-radius);
    padding: 20px 22px;
}

.surface > :last-child {
    margin-bottom: 0;
}

/* Tabellen übernehmen den Grund ihrer Fläche statt des grauen Seitengrunds */
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--tsc-divider);
}

/*
 * Tabellen auf weißer Fläche; der Rahmen liegt außen, die Zeilen haben feine Trennlinien.
 * Smartphone-Regel (docs/oberflaeche.md): Die Tabelle scrollt seitlich nur innerhalb dieses Rahmens, nie die Seite.
 * position: relative, damit auch absolut positionierte Inhalte (z. B. „visually-hidden“) im Rahmen bleiben;
 * sonst ragen sie über den Bildschirm hinaus und Safari erlaubt das Herauszoomen unter 100 %.
 */
.table-surface {
    position: relative;
    max-width: 100%;
    background: var(--tsc-surface);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-radius);
    overflow-x: auto;
    margin-bottom: 1rem;
}

/* Zellen ohne Umbruch: Die Tabelle wird so breit wie nötig und scrollt im Rahmen. */
.table-nowrap th,
.table-nowrap td {
    white-space: nowrap;
}

/* Erste Spalte bleibt beim seitlichen Scrollen stehen; nur für sehr breite Tabellen (z. B. Mitgliederlisten). */
.table-sticky-first > :not(caption) > * > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--tsc-surface);
}

/* Spalten nach Wichtigkeit: weniger wichtige verschwinden auf schmalen Bildschirmen. */
@media (max-width: 767.98px) {
    .col-priority-medium {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .col-priority-low {
        display: none;
    }
}

.table-surface .table {
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--tsc-divider);
}

.table-surface .table th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tsc-muted);
    border-bottom-color: var(--tsc-border);
}

.table-surface .table > :not(caption) > * > * {
    padding: 0.75rem 0.75rem;
}

.table-surface .table > :not(caption) > * > :first-child {
    padding-left: 1.25rem;
}

.table-surface .table > :not(caption) > * > :last-child {
    padding-right: 1.25rem;
}

.table-surface .table tbody tr:last-child > * {
    border-bottom: 0;
}

/* ---------- Knöpfe ---------- */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--tsc-radius-sm);
}

.btn-primary {
    --bs-btn-bg: var(--tsc-accent);
    --bs-btn-border-color: var(--tsc-accent);
    --bs-btn-hover-bg: var(--tsc-accent-dark);
    --bs-btn-hover-border-color: var(--tsc-accent-dark);
    --bs-btn-active-bg: var(--tsc-accent-dark);
    --bs-btn-active-border-color: var(--tsc-accent-dark);
    --bs-btn-disabled-bg: #AAB6C6;
    --bs-btn-disabled-border-color: #AAB6C6;
    --bs-btn-focus-shadow-rgb: 31, 95, 174;
}

.btn-outline-primary {
    --bs-btn-color: var(--tsc-accent);
    --bs-btn-border-color: var(--tsc-accent);
    --bs-btn-hover-bg: var(--tsc-accent);
    --bs-btn-hover-border-color: var(--tsc-accent);
    --bs-btn-active-bg: var(--tsc-accent);
    --bs-btn-active-border-color: var(--tsc-accent);
    --bs-btn-focus-shadow-rgb: 31, 95, 174;
}

.btn-danger {
    --bs-btn-bg: var(--tsc-error);
    --bs-btn-border-color: var(--tsc-error);
    --bs-btn-hover-bg: #A32908;
    --bs-btn-hover-border-color: #A32908;
    --bs-btn-active-bg: #A32908;
    --bs-btn-active-border-color: #A32908;
}

.btn-outline-danger {
    --bs-btn-color: var(--tsc-error);
    --bs-btn-border-color: var(--tsc-error);
    --bs-btn-hover-bg: var(--tsc-error);
    --bs-btn-hover-border-color: var(--tsc-error);
    --bs-btn-active-bg: var(--tsc-error);
    --bs-btn-active-border-color: var(--tsc-error);
}

/* Zweitrangige Aktion: weiß mit grauem Rahmen, beim Überfahren blau */
.btn-secondary-quiet {
    --bs-btn-color: var(--tsc-text);
    --bs-btn-bg: var(--tsc-surface);
    --bs-btn-border-color: var(--tsc-border-strong);
    --bs-btn-hover-color: var(--tsc-accent);
    --bs-btn-hover-bg: var(--tsc-surface);
    --bs-btn-hover-border-color: var(--tsc-accent);
    --bs-btn-active-color: var(--tsc-accent);
    --bs-btn-active-bg: var(--tsc-surface);
    --bs-btn-active-border-color: var(--tsc-accent);
}

/* Unauffällige Aktion, z. B. „Verwerfen“: ohne Rahmen, beim Überfahren rot */
.btn-quiet {
    --bs-btn-color: var(--tsc-muted);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #B42318;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #B42318;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
}

/* Knopf mit Symbol vor dem Text, z. B. Herunterladen oder in neuem Tab öffnen */
.btn-with-icon {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

    .btn-with-icon > svg {
        flex-shrink: 0;
    }

/* Bestätigung eines Schritts, z. B. „E-Mail ist verschickt“: Akzentblau wie andere Knöpfe, aber mit gestricheltem Rahmen
   und leerem Kästchen, wie ein Feld zum Abhaken. Grün wird erst die gesetzte Bestätigung (Zeile mit Haken), damit Grün
   immer „erledigt“ bedeutet. */
.btn-confirm {
    --bs-btn-color: var(--tsc-accent);
    --bs-btn-bg: var(--tsc-surface);
    --bs-btn-border-color: var(--tsc-accent);
    --bs-btn-hover-color: var(--tsc-accent-dark);
    --bs-btn-hover-bg: var(--tsc-accent-soft);
    --bs-btn-hover-border-color: var(--tsc-accent-dark);
    --bs-btn-active-color: var(--tsc-accent-dark);
    --bs-btn-active-bg: var(--tsc-accent-soft);
    --bs-btn-active-border-color: var(--tsc-accent-dark);
    --bs-btn-disabled-color: var(--tsc-accent);
    --bs-btn-disabled-bg: var(--tsc-surface);
    --bs-btn-disabled-border-color: var(--tsc-accent);
    display: inline-flex;
    gap: 10px;
    align-items: center;
    border-style: dashed;
    font-weight: 600;
}

    .btn-confirm::before {
        content: "";
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        border: 2px solid currentColor;
        border-radius: 4px;
    }

/* Knopf nur mit Symbol, z. B. Kopieren neben einem Feld (CopyButton) */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.75rem;
}

/* Großer Knopf für die Hauptaktion einer Seite, z. B. „Neue Kündigung“ */
.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 10px;
    font-size: 1.0625rem;
}

/* Symbol ohne Rahmen, z. B. Löschen in einer Tabellenzeile */
.icon-btn {
    display: inline-flex;
    padding: 8px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--tsc-muted);
    cursor: pointer;
}

.icon-btn:hover {
    background: var(--tsc-neutral-soft);
    color: var(--tsc-text);
}

.icon-btn-danger:hover {
    background: var(--tsc-error-soft);
    color: #B42318;
}

/* Platzhalter im Editor markieren (Serienbrief, editor.js): Farben wie Textmarker, je Platzhalter eine; dieselben in der
   Auswahl „Platzhalter einfügen“. Unbekannte Platzhalter rot unterstrichen. Getrennte Regeln: Ein Browser ohne
   ::highlight verwürfe sonst auch die Farben der Auswahl. */
::highlight(tsc-ph-0) { background-color: #fff1a8; }
.ph-color-0 { background-color: #fff1a8; }
::highlight(tsc-ph-1) { background-color: #cdefc4; }
.ph-color-1 { background-color: #cdefc4; }
::highlight(tsc-ph-2) { background-color: #cfe3ff; }
.ph-color-2 { background-color: #cfe3ff; }
::highlight(tsc-ph-3) { background-color: #ffd3e6; }
.ph-color-3 { background-color: #ffd3e6; }
::highlight(tsc-ph-4) { background-color: #ffddb8; }
.ph-color-4 { background-color: #ffddb8; }
::highlight(tsc-ph-5) { background-color: #e3d7ff; }
.ph-color-5 { background-color: #e3d7ff; }
::highlight(tsc-ph-6) { background-color: #c8f0ec; }
.ph-color-6 { background-color: #c8f0ec; }
::highlight(tsc-ph-7) { background-color: #e6f5b5; }
.ph-color-7 { background-color: #e6f5b5; }
::highlight(tsc-ph-8) { background-color: #ffd9cf; }
.ph-color-8 { background-color: #ffd9cf; }
::highlight(tsc-ph-9) { background-color: #d2f0ff; }
.ph-color-9 { background-color: #d2f0ff; }
::highlight(tsc-ph-10) { background-color: #ead9f5; }
.ph-color-10 { background-color: #ead9f5; }
::highlight(tsc-ph-11) { background-color: #efe6cf; }
.ph-color-11 { background-color: #efe6cf; }

::highlight(tsc-ph-unknown) {
    background-color: #fad4d4;
    text-decoration: underline wavy #c0392b;
}

/* Text-Link als Knopf, z. B. „ändern“, „+ Person hinzufügen“ */
.link-btn {
    padding: 0;
    border: none;
    background: none;
    color: var(--tsc-accent);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.link-btn:hover {
    color: var(--tsc-accent-dark);
    text-decoration: underline;
}

/* ---------- Formulare: Beschriftung immer über dem Feld ---------- */

.form-label {
    margin-bottom: 0.3rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tsc-label);
}

.form-text {
    font-size: 0.8125rem;
    color: var(--tsc-muted);
}

.form-control, .form-select {
    max-width: 100%;
    border-color: var(--tsc-border-strong);
    background-color: var(--tsc-surface);
}

.form-control:focus, .form-select:focus {
    border-color: var(--tsc-accent);
    box-shadow: 0 0 0 0.2rem rgba(31, 95, 174, 0.2);
}

/* Safari auf iPhone und iPad zentriert das Datum im Feld; linksbündig wie alle anderen Felder. */
input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

/* Häkchen weiß mit kräftigem Rand: Auf weißem Grund wirkte das graue Kästchen mit hellem Rand wie gesperrt. */
.form-check-input {
    background-color: var(--tsc-surface);
    border-color: var(--tsc-control-border);
}

.form-check-input:checked {
    background-color: var(--tsc-accent);
    border-color: var(--tsc-accent);
}

/* Häkchen und Schalter samt Beschriftung zeigen die Hand: anklickbar, solange nicht gesperrt */
.form-check-input:not(:disabled),
.form-check-input:not(:disabled) + .form-check-label {
    cursor: pointer;
}

.form-check-input:focus {
    border-color: var(--tsc-accent);
    box-shadow: 0 0 0 0.2rem rgba(31, 95, 174, 0.2);
}

.btn:focus-visible, .btn-link.nav-link:focus-visible {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(31, 95, 174, 0.6);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--tsc-success);
}

.invalid {
    outline: 1px solid var(--tsc-error);
}

.validation-message {
    color: var(--tsc-error);
}

/* Schmale Felder und Spalten für kurze Zahlen, z. B. Wochen oder Beträge. Klassen statt style-Attribut,
   weil die Content-Security-Policy keine Inline-Styles erlaubt (docs/sicherheit.md). */
.input-narrow {
    max-width: 8rem;
}

.col-amount {
    width: 9rem;
}

/* ---------- Abzeichen (Status) ---------- */

.pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.875rem;
    white-space: nowrap;
}

.pill-neutral {
    background: var(--tsc-neutral-soft);
    color: var(--tsc-label);
}

/* Hinweis unter einem Feld, der nichts blockiert (Warnung statt Fehler) */
.form-text-warning {
    color: var(--tsc-warning-text);
}

.pill-warning {
    background: var(--tsc-warning-soft);
    color: var(--tsc-warning-text);
}

.pill-success {
    background: var(--tsc-success-soft);
    color: var(--tsc-success-text);
}

.pill-error {
    background: var(--tsc-error-soft);
    color: var(--tsc-error-text);
}

/* Meldungen in Bedeutungsfarben */
.alert-danger {
    --bs-alert-color: var(--tsc-error-text);
    --bs-alert-bg: var(--tsc-error-soft);
    --bs-alert-border-color: #F5C2BD;
}

.alert-warning {
    --bs-alert-color: var(--tsc-warning-text);
    --bs-alert-bg: var(--tsc-warning-soft);
    --bs-alert-border-color: #F0D88F;
}

.alert-success {
    --bs-alert-color: var(--tsc-success-text);
    --bs-alert-bg: var(--tsc-success-soft);
    --bs-alert-border-color: #B9E0C7;
}

.text-danger {
    color: var(--tsc-error) !important;
}

/* ---------- Info-Symbol (InfoTip): Erklärung über dem Inhalt ---------- */

.info-tip-button {
    display: inline-flex;
    padding: 2px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--tsc-muted);
    vertical-align: -2px;
    cursor: pointer;
}

    .info-tip-button:hover, .info-tip-button[aria-expanded="true"] {
        color: var(--tsc-accent);
    }

.info-tip-text {
    display: none;
    position: absolute;
    top: 2.6rem;
    left: 12px;
    right: 12px;
    z-index: 5;
    padding: 10px 12px;
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-radius-sm);
    background: var(--tsc-surface);
    box-shadow: 0 6px 20px rgba(20, 36, 60, 0.15);
    color: var(--tsc-label);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
}

    .info-tip-text.open {
        display: block;
    }

/* Tastatur: sichtbar, solange das Symbol den Fokus hat (nicht nach einem Mausklick, sonst ließe es sich nicht schließen) */
.info-tip:has(.info-tip-button:focus-visible) .info-tip-text {
    display: block;
}

@media (hover: hover) {
    .info-tip:hover .info-tip-text {
        display: block;
    }
}

/* ---------- Dialog (Rückfrage) ---------- */

.confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 160px 16px 16px 16px;
    background: rgba(20, 36, 60, 0.35);
}

.confirm-dialog {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 440px;
    padding: 24px;
    border-radius: var(--tsc-radius);
    background: var(--tsc-surface);
    box-shadow: 0 12px 40px rgba(20, 36, 60, 0.25);
}

.confirm-dialog h2 {
    margin: 0;
    font-size: 1.25rem;
}

.confirm-dialog p {
    margin: 0;
    line-height: 1.5;
    color: var(--tsc-label);
}

/* Dasselbe als natives <dialog> auf statischen Seiten (ohne Blazor-Verbindung, wwwroot/js/ui.js) */
dialog.confirm-dialog {
    width: calc(100% - 32px);
    margin: 160px auto auto;
    border: 0;
    color: var(--tsc-text);
}

    dialog.confirm-dialog:not([open]) {
        display: none;
    }

    dialog.confirm-dialog::backdrop {
        background: rgba(20, 36, 60, 0.35);
    }

.confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--tsc-error);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Ein Fehler ist aufgetreten."
    }

/* Seitenbilder der Vorschau: ein A4-Blatt mit Schatten */
.page-images {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page-image {
    width: 100%;
    max-width: 52rem;
    aspect-ratio: 210 / 297;
    background: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Unterschriften auf hellgrauem Karomuster, damit Transparenz sichtbar ist */
.signature-preview {
    display: inline-block;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    background: repeating-conic-gradient(#f0f0f0 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;
}

    /* Feste Höhe statt Höchstwert: SVGs aus Grafikprogrammen haben oft width="100%" ohne eigene Größe und wären sonst
       0 × 0 Pixel groß; die Breite ergibt sich aus dem Seitenverhältnis (viewBox). */
    .signature-preview img {
        display: block;
        width: auto;
        max-width: 100%;
        height: 6rem;
        object-fit: contain;
        object-position: left center;
    }

/* Vorschau eines Textbausteins mit Beispieldaten */
.text-preview {
    white-space: pre-line;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    font-size: 0.925rem;
}

/* Mein Konto: schmale Karte für Formulare, breitere für die Zwei-Faktor-Anmeldung (QR-Code, Codes) */
.account-card {
    max-width: 480px;
}

.account-card-wide {
    max-width: 640px;
}

/* Übersicht von Mein Konto: Abschnitte mit Trennlinie, Beschriftung links, auf schmalen Bildschirmen darüber */
.account-section {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tsc-muted);
}

    .account-fields + .form-text + .account-section,
    .account-fields + .account-section {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid var(--tsc-divider);
    }

.account-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 16px;
    margin: 0;
}

    .account-fields dt {
        font-weight: 400;
        color: var(--tsc-muted);
    }

    .account-fields dd {
        margin: 0 0 10px;
        min-width: 0;
        overflow-wrap: anywhere;
    }

@media (min-width: 576px) {
    .account-fields {
        grid-template-columns: 11rem minmax(0, 1fr);
        gap: 10px 16px;
    }

        .account-fields dd {
            margin: 0;
        }
}

.account-permissions {
    margin: 0;
    padding-left: 1.1rem;
}

.qr-code {
    display: block;
    width: 200px;
    height: 200px;
    margin: 8px 0 12px;
}

/* Liste nummerierter Schritte, z. B. Einrichtung der Authenticator-App */
.steps {
    padding-left: 1.25rem;
}

    .steps > li {
        margin-bottom: 1rem;
    }

/* Unternavigation (Stammdaten, Vorlagen, Mein Konto) */
.sub-nav {
    --bs-nav-pills-link-active-bg: var(--tsc-accent);
    --bs-nav-link-color: var(--tsc-label);
    --bs-nav-link-hover-color: var(--tsc-accent);
    gap: 4px;
}

.sub-nav .nav-link {
    padding: 0.35rem 0.8rem;
}

.breadcrumb {
    --bs-breadcrumb-divider: '›';
    --bs-breadcrumb-item-active-color: var(--tsc-muted);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

/* Karten der Bootstrap-Vorlage im Stil der Flächen */
.card {
    --bs-card-bg: var(--tsc-surface);
    --bs-card-border-color: var(--tsc-border);
    --bs-card-border-radius: var(--tsc-radius);
    --bs-card-inner-border-radius: calc(var(--tsc-radius) - 1px);
}

/* Aufgeklappte Abschnitte sind normaler Inhalt: heller grauer Grund, kein Gelb */
details > summary {
    color: var(--tsc-accent);
    cursor: pointer;
}

/* ---------- Umschalter (z. B. Post | E-Mail) ---------- */

.seg {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--tsc-border-strong);
    border-radius: var(--tsc-radius-sm);
}

    .seg button {
        padding: 8px 18px;
        border: none;
        background: var(--tsc-surface);
        color: var(--tsc-text);
        font: inherit;
        font-size: 0.9375rem;
        cursor: pointer;
    }

        .seg button + button {
            border-left: 1px solid var(--tsc-border-strong);
        }

        .seg button.on {
            background: var(--tsc-accent);
            color: #FFFFFF;
        }

        .seg button:disabled {
            cursor: default;
            opacity: 0.65;
        }

/* ---------- Kopieren über ein Symbol im Feld ---------- */

.copybox {
    position: relative;
}

.copy-text {
    min-height: 2.5rem;
    padding: 9px 96px 9px 12px;
    border: 1px solid var(--tsc-border-strong);
    border-radius: var(--tsc-radius-sm);
    background: #FAFBFC;
    overflow-wrap: anywhere;
}

    .copy-text.multiline {
        white-space: pre-line;
        line-height: 1.5;
    }

.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 5px;
    border: 1px solid var(--tsc-border-strong);
    border-radius: 6px;
    background: var(--tsc-surface);
    color: var(--tsc-label);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    opacity: 0;
}

.copybox:hover .copy-btn, .copy-btn:focus-visible {
    opacity: 1;
}

/* StaticCopyField: Häkchen statt Kopier-Symbol, solange ui.js data-copied setzt */
.copy-btn .copied-icon,
.copy-btn[data-copied] .copy-icon {
    display: none;
}

.copy-btn[data-copied] .copied-icon {
    display: inline-flex;
}

/* Ohne Maus (Smartphone, Tablet) gibt es kein Überfahren: Symbol immer zeigen */
@media (hover: none) {
    .copy-btn {
        opacity: 1;
    }
}

/* ---------- Drucken (Wiederherstellungscodes) ---------- */

/* Druckbereich: nur auf Papier sichtbar */
.print-sheet {
    display: none;
}

@media print {
    @page {
        margin: 20mm;
    }

    /* Enthält die Seite einen Druckbereich, wird nur er gedruckt. Alles, was weder Druckbereich noch einer seiner
       Vorfahren ist, entfällt (Menü, Hinweise, Knöpfe); die Vorfahren verlieren Raster, Abstände, Rahmen und Grund.
       Greift auch bei Strg+P ohne den Knopf „Drucken“. */
    body:has(.print-sheet) *:not(.print-sheet, .print-sheet *, :has(.print-sheet)) {
        display: none !important;
    }

    body:has(.print-sheet),
    body:has(.print-sheet) :has(.print-sheet) {
        display: block !important;
        position: static !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: none !important;
        overflow: visible !important;
    }

    .print-sheet {
        display: block;
        color: #000000;
        font-size: 12pt;
    }

        .print-sheet h1 {
            margin: 0 0 14pt;
            font-size: 20pt;
            font-weight: 600;
        }

        .print-sheet dl {
            display: grid;
            grid-template-columns: max-content minmax(0, 1fr);
            gap: 4pt 16pt;
            margin: 0 0 20pt;
        }

        .print-sheet dt {
            font-weight: 400;
            color: #444444;
        }

        .print-sheet dd {
            margin: 0;
            overflow-wrap: anywhere;
        }

    /* Zwei Spalten, groß und in Monospace, damit sich 0 und O, 1 und l unterscheiden lassen */
    .print-codes {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        gap: 12pt 48pt;
        margin: 0 0 20pt;
        padding: 0;
        list-style: none;
        font-family: var(--bs-font-monospace);
        font-size: 18pt;
        letter-spacing: 0.05em;
    }
}

/* ---------- Schlüsselverwaltung (docs/schluessel.md) ---------- */

.keys-page {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.keys-head {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: flex-end;
    justify-content: space-between;
}

.keys-head-intro {
    flex: 1 1 420px;
}

/* Reiter links, Knöpfe der Seite („Neues Schloss“) rechtsbündig in derselben Zeile; schmal darunter. Oben ausgerichtet,
   damit ein höherer Knopf die Reiter nicht verschiebt (A110) */
.keys-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-start;
    justify-content: space-between;
}

/* Einleitung je Reiter mit fester Höhe (A110): Platz für so viele Zeilen, wie die längste der vier bei der verfügbaren
   Breite braucht, damit die Reiter darunter nicht springen. Nach der Breite des Kopfs (Container Query), nicht des
   Fensters, weil die Seitenleiste je nach Fenster Platz nimmt. Die längste Einleitung ist einzeilig 1092 px breit;
   die Schwellen lassen Luft für den Umbruch an Wortgrenzen. Wird eine Einleitung länger, Schwellen neu messen. */
.keys-intro {
    container-type: inline-size;
}

.keys-lead {
    min-height: calc(5 * 1.5em);
}

@container (min-width: 300px) {
    .keys-lead {
        min-height: calc(4 * 1.5em);
    }
}

@container (min-width: 390px) {
    .keys-lead {
        min-height: calc(3 * 1.5em);
    }
}

@container (min-width: 600px) {
    .keys-lead {
        min-height: calc(2 * 1.5em);
    }
}

@container (min-width: 1100px) {
    .keys-lead {
        min-height: 1.5em;
    }
}

.keys-page .row-link {
    color: var(--tsc-text);
    font-weight: 600;
    text-decoration: none;
}

    .keys-page .row-link:hover {
        color: var(--tsc-accent);
        text-decoration: underline;
    }

/* Lange Einträge im Verlauf umbrechen statt die Tabelle zu verbreitern */
.key-log-text {
    min-width: 16rem;
    white-space: normal;
    word-break: break-word;
}

/* Berichtigte Bewegung: bleibt sichtbar, aber durchgestrichen */
.key-reversed {
    color: var(--tsc-muted);
    text-decoration: line-through;
}

/* Schlüssel zum Ankreuzen beim Erfassen: Name links, Anzahl rechts */
.key-lines {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-radius);
    background: var(--tsc-surface);
}

.key-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--tsc-divider);
}

    .key-line:first-child {
        border-top: 0;
    }

/* Angaben einer Tür oder Person: Beschriftung links, auf schmalen Bildschirmen darüber */
.key-facts {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: 8px 16px;
    margin: 0;
}

    .key-facts dt {
        font-weight: 400;
        color: var(--tsc-muted);
    }

    .key-facts dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

@media (max-width: 575.98px) {
    .key-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

        .key-facts dd {
            margin-bottom: 8px;
        }
}

/* Bewegung erfassen (A106): Formular nicht breiter als nötig, Datumsfelder schmal */
.keys-record .surface {
    max-width: 44rem;
}

.input-date {
    max-width: 12rem;
}

/* Auswahl einer Person: Treffer als Knöpfe untereinander, ausgewählt nur der Name mit „ändern“ */
.holder-options {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-radius-sm);
    overflow: hidden;
}

.holder-option {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    align-items: baseline;
    padding: 10px 14px;
    border: 0;
    border-top: 1px solid var(--tsc-divider);
    background: var(--tsc-surface);
    color: var(--tsc-text);
    text-align: left;
}

    .holder-option:first-child {
        border-top: 0;
    }

    .holder-option:hover,
    .holder-option:focus-visible {
        background: var(--tsc-accent-soft);
    }

.holder-picked {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-radius-sm);
    background: var(--tsc-surface-muted);
}

/* Was gespeichert wird, als Satz vor dem Knopf */
.record-summary {
    padding: 12px 16px;
    border-radius: var(--tsc-radius-sm);
    background: var(--tsc-info-soft);
}

.record-more summary .text-secondary {
    font-size: 0.875rem;
}

/* „Weitere Aktionen“: Liste unter dem Knopf, rechtsbündig; schmal linksbündig, damit sie nicht aus dem Bild ragt */
.key-menu {
    position: relative;
}

.key-menu-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 14rem;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--tsc-surface);
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-radius-sm);
    box-shadow: 0 8px 24px rgba(27, 36, 48, 0.12);
}

    .key-menu-list a {
        display: block;
        padding: 8px 12px;
        border-radius: 6px;
        color: var(--tsc-text);
        text-decoration: none;
    }

        .key-menu-list a:hover,
        .key-menu-list a:focus-visible {
            background: var(--tsc-accent-soft);
            color: var(--tsc-accent-dark);
        }

@media (max-width: 575.98px) {
    .key-menu-list {
        right: auto;
        left: 0;
    }
}

/* Symbole in Reitern und Knöpfen der Schlüsselverwaltung neben dem Text */
.sub-nav .nav-link,
.btn-icon-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Symbol eines Gebäudes (A107) vor seinem Namen */
.building-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    background: var(--tsc-accent-soft);
    color: var(--tsc-accent);
}

.building-icon-sm {
    width: 26px;
    height: 26px;
    border-radius: 7px;
}

.holder-kind {
    display: inline-flex;
    margin-right: 6px;
    color: var(--tsc-muted);
    vertical-align: -2px;
}

/* Auswahl des Symbols: Kacheln mit Symbol und Beschriftung */
.icon-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
}

.icon-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px 8px;
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-radius-sm);
    background: var(--tsc-surface);
    color: var(--tsc-label);
    font-size: 0.8125rem;
}

    .icon-choice:hover {
        border-color: var(--tsc-accent);
        color: var(--tsc-accent);
    }

    .icon-choice.on {
        border-color: var(--tsc-accent);
        background: var(--tsc-accent-soft);
        color: var(--tsc-accent-dark);
        font-weight: 600;
    }

/* Beim Ausgeben: Die Person hat diesen Schlüssel schon (A107); zurückhaltend, aber anders als die grauen Angaben */
.key-has {
    color: var(--tsc-warning-text);
    font-weight: 600;
}

/* ---------- Kacheln für Aufgaben (Dokumente, Schlüsselverwaltung) ---------- */

/* Vorlagen als Kacheln: nebeneinander, so viele die Breite hergibt; auf dem Smartphone untereinander. auto-fit statt
   auto-fill: Wenige Kacheln (Schlüsselverwaltung: drei) teilen sich die ganze Breite, statt eine Lücke zu lassen */
.template-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 16px;
}

.template-tile {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-radius);
    background: var(--tsc-surface);
    color: var(--tsc-text);
    text-align: left;
}

    .template-tile:hover:not(:disabled) {
        border-color: var(--tsc-accent);
        box-shadow: 0 4px 16px rgba(20, 50, 94, 0.10);
    }

    .template-tile:focus-visible {
        outline: 3px solid var(--tsc-accent);
        outline-offset: 2px;
    }

    .template-tile:disabled {
        opacity: 0.6;
    }

.template-tile-primary {
    border-color: var(--tsc-accent);
    background: var(--tsc-accent-soft);
}

.template-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--tsc-accent-soft);
    color: var(--tsc-accent);
}

.template-tile-primary .template-icon {
    background: var(--tsc-accent);
    color: #fff;
}

.template-title {
    font-size: 1.0625rem;
    font-weight: 700;
}

.template-description {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--tsc-muted);
}

/* Kacheln als Link (Schlüsselverwaltung): ohne Unterstreichung */
a.template-tile {
    text-decoration: none;
}

/* Kennzahlen der Schlüsselverwaltung (A108): vier Kacheln, auf dem Smartphone zwei nebeneinander */
.key-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.key-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-radius);
    background: var(--tsc-surface);
    color: var(--tsc-text);
    text-decoration: none;
}

    .key-stat:hover {
        border-color: var(--tsc-accent);
    }

.key-stat-icon {
    display: inline-flex;
    margin-bottom: 4px;
    color: var(--tsc-accent);
}

.key-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.key-stat-label {
    font-size: 0.875rem;
    color: var(--tsc-muted);
}

.key-stat-alert {
    border-color: var(--tsc-error);
    background: var(--tsc-error-soft);
}

    .key-stat-alert .key-stat-icon,
    .key-stat-alert .key-stat-value {
        color: var(--tsc-error-text);
    }

@media (max-width: 767.98px) {
    .key-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Die letzten Bewegungen als schlichte Liste statt Tabelle */
.key-recent {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--tsc-border);
    border-radius: var(--tsc-radius);
    background: var(--tsc-surface);
}

    .key-recent li {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 16px;
        align-items: baseline;
        justify-content: space-between;
        padding: 10px 16px;
        border-top: 1px solid var(--tsc-divider);
    }

        .key-recent li:first-child {
            border-top: 0;
        }