/*
    Basisformatierung und Komponentenschicht des peoplegrid-Design-Systems
    (Umsetzungsplan 11).

    Die Klassen sind aus dem freigegebenen Design-System "Nocturne" und den
    .dc.html-Prototypen übernommen. Ergänzt wurden nur Zustände, die die Prototypen als
    statische Mockups nicht ausdrücken konnten (Validierung, Ladezustände, Skeletons).
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--pg-color-bg);
    color: var(--pg-color-text);
    font-family: var(--pg-font-body);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pg-font-heading);
    font-weight: var(--pg-font-heading-weight);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 var(--pg-space-2);
}

h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--pg-space-3); }

a {
    color: var(--pg-color-accent);
    text-decoration: none;
    text-underline-offset: 3px;
}

a:hover { color: var(--pg-color-accent-400); text-decoration: underline; }

img { display: block; max-width: 100%; }

/* Sichtbarer Fokus für Tastaturbedienung (Umsetzungsplan 44). */
:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--pg-color-accent);
    outline-offset: 2px;
}

::selection { background: color-mix(in srgb, var(--pg-color-accent) 30%, transparent); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: var(--pg-color-neutral-800);
    border-radius: 8px;
    border: 3px solid var(--pg-color-bg);
}
::-webkit-scrollbar-track { background: transparent; }

.text-muted { color: color-mix(in srgb, var(--pg-color-text) 55%, transparent); }

/* Nur für Screenreader sichtbar. */
.pg-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Sprungmarke zum Inhalt; wird erst bei Tastaturfokus sichtbar. */
.pg-skip-link {
    position: absolute;
    left: -9999px;
    top: var(--pg-space-2);
    z-index: var(--pg-z-toast);
    padding: var(--pg-space-2) var(--pg-space-4);
    border-radius: var(--pg-radius-md);
    background: var(--pg-color-surface);
    box-shadow: var(--pg-shadow-md);
}

.pg-skip-link:focus-visible { left: var(--pg-space-2); }

/* ══════════════════════════════════════════════════════════════════════
   Buttons — die primäre Aktion ist eine Akzentkontur, niemals eine Fläche
   ══════════════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--pg-font-heading);
    font-weight: var(--pg-font-heading-weight);
    font-size: 14px;
    line-height: 1.2;
    color: var(--pg-color-text);
    background: transparent;
    border: 1px solid transparent;
    padding: var(--pg-space-2) calc(var(--pg-space-3) * 1.2);
    border-radius: var(--pg-radius-md);
    transition: background var(--pg-motion-fast) var(--pg-motion-ease);
}

.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { color: var(--pg-color-accent); border-color: var(--pg-color-accent); }
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--pg-color-accent) 12%, transparent); color: var(--pg-color-accent); }
.btn-primary:active:not(:disabled) { background: color-mix(in srgb, var(--pg-color-accent) 22%, transparent); }

.btn-secondary { border-color: var(--pg-color-divider); }
.btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--pg-color-text) 7%, transparent); color: var(--pg-color-text); }
.btn-secondary:active:not(:disabled) { background: color-mix(in srgb, var(--pg-color-text) 14%, transparent); }

.btn-ghost { color: var(--pg-color-accent); padding-inline: var(--pg-space-1); }
.btn-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--pg-color-accent) 10%, transparent); color: var(--pg-color-accent); }
.btn-ghost:active:not(:disabled) { background: color-mix(in srgb, var(--pg-color-accent) 18%, transparent); }

.btn-danger { color: var(--pg-color-danger); border-color: var(--pg-color-danger-border); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--pg-color-danger) 12%, transparent); color: var(--pg-color-danger); }

.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════
   Formularelemente
   ══════════════════════════════════════════════════════════════════════ */

.field { display: block; }

.field > label,
.field label.pg-field__label {
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
    color: color-mix(in srgb, var(--pg-color-text) 70%, transparent);
}

.input {
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    font: inherit;
    font-size: 14px;
    color: var(--pg-color-text);
    caret-color: var(--pg-color-accent);
    background: var(--pg-color-surface);
    border: 1px solid var(--pg-color-divider);
    border-radius: var(--pg-radius-md);
}

.input::placeholder { color: var(--pg-color-neutral-600); }
.input:hover:not(:disabled) { border-color: color-mix(in srgb, var(--pg-color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--pg-color-accent); outline-offset: 0; }
.input:disabled { opacity: 0.45; cursor: not-allowed; }

/* Ungültige Felder tragen zusätzlich Text und aria-invalid, nicht nur Farbe. */
.input.pg-invalid,
.input[aria-invalid="true"] { border-color: var(--pg-color-danger-border); }

textarea.input { min-height: 90px; resize: vertical; }
select.input { appearance: none; padding-right: 30px; }

.pg-select { position: relative; display: block; }

.pg-select__chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 13px;
    color: var(--pg-color-neutral-500);
}

.pg-field__hint { font-size: 11.5px; color: var(--pg-color-neutral-500); margin-top: 4px; }
.pg-field__error { font-size: 11.5px; color: var(--pg-color-danger); margin-top: 4px; }

.pg-checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; }

.pg-checkbox input {
    width: 16px;
    height: 16px;
    flex: none;
    accent-color: var(--pg-color-accent);
    cursor: pointer;
}

.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input,
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--pg-color-divider); }
.radio:hover .dot { border-color: var(--pg-color-accent); }
.radio input:checked + .dot {
    border-color: var(--pg-color-accent);
    background: var(--pg-color-accent);
    box-shadow: inset 0 0 0 4px var(--pg-color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--pg-color-accent); outline-offset: 2px; }

.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--pg-color-divider); border-radius: var(--pg-radius-md); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--pg-color-divider); }
.seg-opt:has(input:checked) { color: var(--pg-color-accent); box-shadow: inset 0 0 0 1px var(--pg-color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--pg-color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--pg-color-accent); outline-offset: -2px; }

/*
    Die segmentierte Auswahl gibt es in zwei Ausprägungen, die gleich aussehen müssen:
    als Radiogruppe im Design-System und – auf statisch gerenderten Seiten – als Gruppe
    von Links (ADR-0012). Die gemeinsamen Regeln stehen deshalb hier und nicht im
    komponentenlokalen Blatt; dort erreichten sie die Linkvariante nicht.
*/
.pg-segmented { flex-wrap: wrap; max-width: 100%; }

/* Ohne Umbruch schöbe die Filterleiste auf schmalen Viewports die Seite auf
   (Umsetzungsplan 12: Die Seite selbst scrollt niemals horizontal). */
.pg-segmented .seg-opt { flex: 0 1 auto; min-width: 0; }

.pg-segmented .seg-opt[aria-current="page"] {
    color: var(--pg-color-accent);
    box-shadow: inset 0 0 0 1px var(--pg-color-accent);
}

a.seg-opt { text-decoration: none; color: inherit; }

a.seg-opt:hover { background: color-mix(in srgb, var(--pg-color-text) 7%, transparent); }

/* ══════════════════════════════════════════════════════════════════════
   Flächen, Tags und Tabellen
   ══════════════════════════════════════════════════════════════════════ */

.card {
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-2);
    padding: var(--pg-space-3);
    border-radius: var(--pg-radius-md);
    background: var(--pg-color-surface);
}

.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg-color-accent); }
.card-title { font-family: var(--pg-font-heading); font-weight: var(--pg-font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--pg-color-text) 50%, transparent); }

.elev-sm { box-shadow: var(--pg-shadow-sm); }
.elev-md { box-shadow: var(--pg-shadow-md); }
.elev-lg { box-shadow: var(--pg-shadow-lg); }

.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--pg-radius-md) * 0.75); }
.tag-accent { background: var(--pg-color-accent-800); color: var(--pg-color-accent-100); }
.tag-neutral { background: var(--pg-color-neutral-800); color: var(--pg-color-neutral-100); }
.tag-outline { border: 1px solid var(--pg-color-accent); color: var(--pg-color-accent); }
.tag-danger { background: var(--pg-color-danger-surface); color: var(--pg-color-danger); }
.tag-success { background: var(--pg-color-success-surface); color: var(--pg-color-success); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }

.table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--pg-color-text) 60%, transparent);
    padding: var(--pg-space-2);
    border-bottom: 1px solid transparent;
}

.table td { padding: var(--pg-space-2); border-bottom: 1px solid transparent; }

/* Zeilenlinien als Streifen der ganzen Zeile, damit die Enden ausblenden. */
.table thead tr {
    background: linear-gradient(to right, transparent, var(--pg-color-divider) 48px,
        var(--pg-color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}

.table tbody tr {
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--pg-color-text) 8%, transparent) 48px,
        color-mix(in srgb, var(--pg-color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}

.table tbody tr:hover {
    background:
        linear-gradient(color-mix(in srgb, var(--pg-color-text) 4%, transparent),
            color-mix(in srgb, var(--pg-color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%,
        linear-gradient(to right, transparent, color-mix(in srgb, var(--pg-color-text) 8%, transparent) 48px,
            color-mix(in srgb, var(--pg-color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}

/* ══════════════════════════════════════════════════════════════════════
   Dialog
   ══════════════════════════════════════════════════════════════════════ */

.dialog-backdrop {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--pg-space-4);
    z-index: var(--pg-z-modal);
    background: color-mix(in srgb, var(--pg-color-neutral-900) 70%, transparent);
}

.dialog {
    width: min(440px, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-3);
    padding: var(--pg-space-4);
    border-radius: var(--pg-radius-lg);
    background: var(--pg-color-surface);
    box-shadow: var(--pg-shadow-lg);
}

.dialog-title { font-family: var(--pg-font-heading); font-weight: var(--pg-font-heading-weight); font-size: 20px; }
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--pg-space-2); margin-top: var(--pg-space-2); }

/* ══════════════════════════════════════════════════════════════════════
   Zustände: Loading, Empty, Error, Forbidden (Umsetzungsplan 35)
   ══════════════════════════════════════════════════════════════════════ */

.pg-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--pg-space-3);
    padding: 48px var(--pg-space-6);
    max-width: 480px;
    margin: 0 auto;
}

.pg-state__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pg-color-neutral-900);
    color: var(--pg-color-accent);
    font-size: 21px;
}

.pg-state__icon--danger { color: var(--pg-color-danger); background: var(--pg-color-danger-surface); }
.pg-state__title { font-family: var(--pg-font-heading); font-size: 18px; margin: 0; }
.pg-state__text { margin: 0; font-size: 13.5px; color: var(--pg-color-neutral-400); }
.pg-state__support { font-size: 11.5px; color: var(--pg-color-neutral-600); }
.pg-state__support code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.pg-skeleton {
    background: linear-gradient(90deg, var(--pg-color-neutral-900) 25%,
        color-mix(in srgb, var(--pg-color-neutral-800) 70%, transparent) 50%, var(--pg-color-neutral-900) 75%);
    background-size: 200% 100%;
    border-radius: var(--pg-radius-sm);
    animation: pg-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes pg-skeleton-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.pg-spinner {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--pg-color-text) 20%, transparent);
    border-top-color: var(--pg-color-accent);
    animation: pg-spin 700ms linear infinite;
}

@keyframes pg-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════
   Toasts
   ══════════════════════════════════════════════════════════════════════ */

.pg-toasts {
    position: fixed;
    right: var(--pg-space-6);
    bottom: var(--pg-space-6);
    z-index: var(--pg-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-2);
    max-width: min(360px, calc(100vw - 2 * var(--pg-space-6)));
}

.pg-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--pg-space-3);
    padding: var(--pg-space-3) var(--pg-space-4);
    border-radius: var(--pg-radius-md);
    background: var(--pg-color-surface);
    box-shadow: var(--pg-shadow-md);
    font-size: 13.5px;
    animation: pg-toast-in var(--pg-motion-base) var(--pg-motion-ease);
}

.pg-toast__icon { font-size: 16px; margin-top: 1px; color: var(--pg-color-accent); }
.pg-toast--success .pg-toast__icon { color: var(--pg-color-success); }
.pg-toast--error .pg-toast__icon { color: var(--pg-color-danger); }
.pg-toast__body { flex: 1; min-width: 0; }

@keyframes pg-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Tabs
   ══════════════════════════════════════════════════════════════════════ */

.pg-tabs { display: flex; gap: var(--pg-space-4); border-bottom: 1px solid var(--pg-color-divider); }

.pg-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: var(--pg-space-2) 0;
    margin-bottom: -1px;
    color: var(--pg-color-neutral-400);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

.pg-tab:hover { color: var(--pg-color-text); }
.pg-tab[aria-selected="true"] { color: var(--pg-color-text); border-bottom-color: var(--pg-color-accent); }

/*
    Reiter können Schaltflächen oder Links sein. Als Link fährt die Seite ohne
    Interaktivität und der aktive Bereich steht in der Adresszeile (ADR-0012); die
    Darstellung bleibt dieselbe.
*/
a.pg-tab { text-decoration: none; display: inline-block; white-space: nowrap; }

.pg-tabs { overflow-x: auto; }

/* ══════════════════════════════════════════════════════════════════════
   Meldungsflächen
   ══════════════════════════════════════════════════════════════════════ */

.pg-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--pg-space-3);
    padding: var(--pg-space-3) var(--pg-space-4);
    border-radius: var(--pg-radius-md);
    font-size: 13px;
    border: 1px solid var(--pg-color-divider);
    background: color-mix(in srgb, var(--pg-color-text) 4%, transparent);
}

.pg-alert__icon { font-size: 16px; margin-top: 1px; flex: none; }
.pg-alert--error { border-color: var(--pg-color-danger-border); background: var(--pg-color-danger-surface); color: var(--pg-color-neutral-100); }
.pg-alert--error .pg-alert__icon { color: var(--pg-color-danger); }
.pg-alert--success { border-color: color-mix(in srgb, var(--pg-color-success) 40%, transparent); background: var(--pg-color-success-surface); }
.pg-alert--success .pg-alert__icon { color: var(--pg-color-success); }
.pg-alert--info .pg-alert__icon { color: var(--pg-color-accent); }

/* ══════════════════════════════════════════════════════════════════════
   Bewegung: Nutzerwunsch respektieren (Umsetzungsplan 44)
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Kontoseiten (Anmeldung, Passwort, Bestätigung, Unternehmensauswahl)

   Eigene Klassen statt komponentenlokaler CSS-Dateien, weil mehrere Seiten
   genau dasselbe Kartenlayout verwenden (Umsetzungsplan 11.4).
   ══════════════════════════════════════════════════════════════════════ */

.pg-account-card {
    gap: var(--pg-space-6);
    padding: var(--pg-space-8);
}

.pg-account-card__intro { display: flex; flex-direction: column; gap: 2px; }

.pg-account-card__title { font-size: 22px; margin: 0; letter-spacing: -0.02em; }

.pg-account-card__subtitle { margin: 0; font-size: 13px; color: var(--pg-color-neutral-400); }

.pg-account-card__fields { display: flex; flex-direction: column; gap: var(--pg-space-4); }

.pg-account-card__submit { margin-top: var(--pg-space-6); }

.pg-account-card__back {
    font-size: 12px;
    text-align: center;
    color: var(--pg-color-neutral-400);
}

.pg-account-card__back:hover { color: var(--pg-color-accent); }

.pg-account-card__loading {
    display: flex;
    align-items: center;
    gap: var(--pg-space-3);
    font-size: 13px;
    color: var(--pg-color-neutral-400);
}

.pg-tenantlist { display: flex; flex-direction: column; gap: var(--pg-space-2); }

.pg-tenantlist form { margin: 0; }

.pg-tenantcard {
    display: flex;
    align-items: center;
    gap: var(--pg-space-4);
    width: 100%;
    padding: var(--pg-space-3) var(--pg-space-4);
    border: 1px solid var(--pg-color-divider);
    border-radius: var(--pg-radius-md);
    background: transparent;
    color: var(--pg-color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--pg-motion-fast) var(--pg-motion-ease);
}

.pg-tenantcard:hover {
    background: color-mix(in srgb, var(--pg-color-text) 7%, transparent);
    border-color: var(--pg-color-accent);
}

.pg-tenantcard__mark {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--pg-radius-md);
    background: var(--pg-color-accent-900);
    color: var(--pg-color-accent-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.pg-tenantcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.pg-tenantcard__name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-tenantcard__meta { font-size: 11.5px; color: var(--pg-color-neutral-500); }

.pg-tenantcard__chevron { font-size: 14px; color: var(--pg-color-neutral-500); flex: none; }

.pg-account-card__logoutform { margin: 0; text-align: center; }

.pg-account-card__logout {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}


/* ══════════════════════════════════════════════════════════════════════
   Eingeklappte Navigation

   Der Zustand lebt am Wurzelelement der App Shell und wirkt auf Komponenten,
   die in anderen Dateien liegen. Solche schichtübergreifenden Regeln gehören
   in das globale Blatt: Die komponentenlokale CSS-Isolation von Blazor ist
   ausdrücklich auf eine Komponente beschränkt.
   ══════════════════════════════════════════════════════════════════════ */

/* Standardbreite und eingeklappte Breite gehören zusammen und stehen deshalb hier. */
.pg-shell .pg-sidebar {
    width: 236px;
    transition: width var(--pg-motion-base) var(--pg-motion-ease);
}

.pg-shell:has(#pg-sidebar-toggle:checked) .pg-sidebar { width: 64px; }

/*
    Die Beschriftungen verschwinden optisch, bleiben aber im Zugänglichkeitsbaum
    (Umsetzungsplan 44): Ein Screenreader liest weiterhin "Mitarbeiter", auch wenn
    nur das Icon zu sehen ist. Dasselbe gilt für die Zähler: Auf 64 px ist neben dem
    Icon kein Platz für eine Pille, der zugehörige Satz bleibt aber lesbar.
*/
.pg-shell:has(#pg-sidebar-toggle:checked) .pg-sidebar__product,
.pg-shell:has(#pg-sidebar-toggle:checked) .pg-nav-item__label,
.pg-shell:has(#pg-sidebar-toggle:checked) .pg-nav-item__pending,
.pg-shell:has(#pg-sidebar-toggle:checked) .pg-nav-item__badge,
.pg-shell:has(#pg-sidebar-toggle:checked) .pg-sidebar__identity,
.pg-shell:has(#pg-sidebar-toggle:checked) .pg-sidebar__logout {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.pg-shell:has(#pg-sidebar-toggle:checked) .pg-sidebar__user { justify-content: center; }

/* Der Tastaturfokus liegt auf dem Kontrollkästchen; sichtbar wird er am Label. */
.pg-shell:has(#pg-sidebar-toggle:focus-visible) .pg-header__toggle {
    outline: 2px solid var(--pg-color-accent);
    outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   Basis-Responsive-Verhalten der App Shell (Umsetzungsplan 12)

   Die Plattform bleibt Desktop-orientiert, muss auf kleinen Geräten aber
   grundsätzlich nutzbar sein. Auf schmalen Viewports nimmt die ausgeklappte
   Navigation sonst mehr als die Hälfte der Breite ein.

   Unterhalb von 900 px ist die Navigation deshalb standardmäßig eingeklappt.
   Der Schalter in der Kopfzeile kehrt die Vorgabe um – aufgeklappt liegt die
   Navigation dann über dem Inhalt, statt ihn zusammenzudrücken.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .pg-shell .pg-sidebar { width: 64px; }

    .pg-shell .pg-sidebar__product,
    .pg-shell .pg-nav-item__label,
    .pg-shell .pg-nav-item__pending,
    .pg-shell .pg-nav-item__badge,
    .pg-shell .pg-sidebar__identity,
    .pg-shell .pg-sidebar__logout {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .pg-shell .pg-sidebar__user { justify-content: center; }

    /* Der Schalter kehrt die Vorgabe um: aufgeklappt über dem Inhalt. */
    .pg-shell:has(#pg-sidebar-toggle:checked) .pg-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 236px;
        z-index: var(--pg-z-drawer);
        box-shadow: var(--pg-shadow-lg);
    }

    .pg-shell:has(#pg-sidebar-toggle:checked) .pg-sidebar__product,
    .pg-shell:has(#pg-sidebar-toggle:checked) .pg-nav-item__label,
    .pg-shell:has(#pg-sidebar-toggle:checked) .pg-nav-item__pending,
    .pg-shell:has(#pg-sidebar-toggle:checked) .pg-nav-item__badge,
    .pg-shell:has(#pg-sidebar-toggle:checked) .pg-sidebar__identity,
    .pg-shell:has(#pg-sidebar-toggle:checked) .pg-sidebar__logout {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
    }

    .pg-shell:has(#pg-sidebar-toggle:checked) .pg-nav-item__label { flex: 1; }

    .pg-shell:has(#pg-sidebar-toggle:checked) .pg-sidebar__user { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 2 – Organisation, Mitarbeiter und HR-Kern

   Hier stehen ausschließlich Muster, die mehrere Seiten teilen. Seitenspezifische
   Feinheiten liegen im jeweiligen ".razor.css" (Umsetzungsplan 11.4: keine
   featureeigenen Sonderlösungen).
   ═══════════════════════════════════════════════════════════════════════════ */

/*
    Gemeinsames Seitengerüst der Fachseiten: Kopfzeile mit Titel und Aktionen, darunter
    der Inhalt. Die Breite ist begrenzt, damit Tabellen auf großen Bildschirmen nicht
    auseinandergezogen werden (Umsetzungsplan 12).
*/
.pg-page {
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-6);
    max-width: 1400px;
}

.pg-page--narrow { max-width: 1200px; }

.pg-page--form { max-width: 820px; }

.pg-page__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--pg-space-6);
    flex-wrap: wrap;
}

.pg-page__title { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.02em; }

.pg-page__subtitle { margin: 0; color: var(--pg-color-neutral-400); font-size: 13px; }

.pg-page__actions { display: flex; gap: var(--pg-space-3); flex-wrap: wrap; }

/*
    Hinweis für Nutzer ohne Schreibrecht. Ein fehlender Knopf allein erklärt nichts; die
    Seite sagt deshalb ausdrücklich, dass nur gelesen werden darf und welche Berechtigung
    dafür fehlt (Umsetzungsplan Phase 2, Zustand „Forbidden“).
*/
.pg-page__readonly {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--pg-color-divider);
    border-radius: var(--pg-radius-sm);
    color: var(--pg-color-neutral-400);
    font-size: 12px;
}

/* Werkzeugleiste über einer Tabelle: Suche, Segmentfilter, Auswahlfelder. */
.pg-toolbar {
    display: flex;
    align-items: center;
    gap: var(--pg-space-3);
    padding: 12px 14px;
    border-bottom: 1px solid var(--pg-color-divider);
    flex-wrap: wrap;
}

.pg-toolbar__search { flex: 1; min-width: 200px; max-width: 320px; }

.pg-toolbar__filter { min-width: 170px; }

.pg-toolbar__spacer { flex: 1; }

/* Formulare der Fachseiten teilen ein gemeinsames Rasterverhalten. */
.pg-formgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--pg-space-4);
}

.pg-formgrid__full { grid-column: 1 / -1; }

.pg-section { display: flex; flex-direction: column; gap: var(--pg-space-4); }

.pg-section__title { font-family: var(--pg-font-heading); font-size: 16px; }

.pg-section__hint { font-size: 12.5px; color: var(--pg-color-neutral-500); }

/* Zelle einer Tabelle, in der Avatar, Name und Zweitzeile zusammenstehen. */
.pg-identity { display: flex; align-items: center; gap: 9px; min-width: 0; }

.pg-identity__body { min-width: 0; }

.pg-identity__meta {
    font-size: 11.5px;
    color: var(--pg-color-neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-cell--muted { color: var(--pg-color-neutral-400); }

.pg-cell--numeric { font-variant-numeric: tabular-nums; }

/* Kartenraster für Profil- und Organisationsübersichten. */
.pg-cardgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--pg-space-4);
    align-items: start;
}

.pg-statgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--pg-space-4);
}

/*
    Hinweisfläche für Bereiche, die fachlich erst in einer späteren Ausbaustufe
    entstehen. Sie ist bewusst ruhig gestaltet: Ein noch nicht verfügbarer Bereich ist
    kein Fehler (Umsetzungsplan 35).
*/
.pg-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pg-space-3);
    padding: 48px 20px;
    text-align: center;
    color: var(--pg-color-neutral-500);
}

.pg-locked__icon { font-size: 26px; color: var(--pg-color-neutral-600); }

.pg-locked__title { font-family: var(--pg-font-heading); font-size: 15px; color: var(--pg-color-text); }

.pg-locked__text { font-size: 13px; max-width: 420px; margin: 0; }

/* Sortierbare Kopfzelle einer Tabelle. */
.pg-sortheader {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.pg-sortheader:hover { color: var(--pg-color-text); }

.pg-sortheader__icon { font-size: 12px; opacity: 0.75; }


/* ------------------------------------------------------------------ Form Engine */
/*
    Bausteine des Formular-Builders (Phase 3). Sie folgen denselben Tokens wie der
    übrige Bestand; eigene Farben oder Abstände entstehen hier bewusst nicht.
*/

.pg-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--pg-space-6);
    align-items: start;
}

@media (max-width: 1100px) {
    .pg-builder { grid-template-columns: minmax(0, 1fr); }
}

.pg-builder__main { display: flex; flex-direction: column; gap: var(--pg-space-6); min-width: 0; }
.pg-builder__side { position: sticky; top: var(--pg-space-6); }
.pg-builder__stepdescription { margin-bottom: var(--pg-space-4); }

/* Liste der Felder eines Schritts. */
.pg-fieldlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.pg-fieldlist__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pg-space-4);
    padding: 12px 0;
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-fieldlist__item:last-child { border-bottom: 0; }
.pg-fieldlist__body { min-width: 0; }
.pg-fieldlist__label { font-size: 14px; }
.pg-fieldlist__actions { display: flex; gap: var(--pg-space-2); flex-shrink: 0; }

.pg-fieldlist__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pg-space-3);
    margin-top: 4px;
    color: var(--pg-color-neutral-400);
    font-size: 12px;
}

.pg-fieldlist__tag { display: inline-flex; align-items: center; gap: 4px; }

/* Versionsanzeige. */
.pg-versionlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.pg-versionlist__item {
    padding: 10px 0;
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-versionlist__item:last-child { border-bottom: 0; }

.pg-versionlist__item--current {
    padding-left: 10px;
    border-left: 2px solid var(--pg-color-accent, var(--pg-color-neutral-400));
}

.pg-versionlist__head { display: flex; align-items: center; justify-content: space-between; gap: var(--pg-space-3); }
.pg-versionlist__meta { margin-top: 2px; color: var(--pg-color-neutral-400); font-size: 12px; }

/* Offene Punkte vor dem Veröffentlichen und Befunde der Prüfung. */
.pg-issues { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }

/* Regelblock im Bedingungseditor. */
.pg-conditionrule {
    margin: var(--pg-space-4) 0 0;
    padding: var(--pg-space-4);
    border: 1px solid var(--pg-color-divider);
    border-radius: var(--pg-radius-md);
}

.pg-conditionrule legend { padding: 0 6px; color: var(--pg-color-neutral-400); font-size: 12px; }

.pg-fieldeditor__remove { margin-top: var(--pg-space-4); }

/* Auswahlgruppen in Vorschau und Ausfüllen. */
.pg-choicegroup { display: flex; flex-direction: column; gap: 6px; }
.pg-choice { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.pg-textarea { min-height: 88px; resize: vertical; font-family: inherit; }
.pg-formdivider { border: 0; border-top: 1px solid var(--pg-color-divider); margin: var(--pg-space-4) 0; }
.pg-preview__actions { justify-content: flex-end; margin-top: var(--pg-space-6); }

/* ---------------------------------------------------------------- Dokumente */

/*
    Filterleiste über Dokumentliste und Personalakten.

    Bewusst ein gewöhnliches GET-Formular: Die Filter stehen damit in der Adresszeile,
    sind verlinkbar und funktionieren ohne Interaktivität (ADR-0012). Die Regel steht in
    der Basis und nicht als Scoped CSS, weil zwei Seiten dieselbe Leiste verwenden.
*/
.pg-documents__filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--pg-space-3);
    padding: var(--pg-space-4);
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-documents__filter .field { flex: 1 1 200px; min-width: 0; }

.pg-documents__filter-check { flex: 0 0 auto; padding-bottom: var(--pg-space-2); }

.pg-documents__filter-actions { display: flex; gap: var(--pg-space-2); flex: 0 0 auto; }

/* --------------------------------------------------------------- SecureJoin */

/*
    Fortschrittsbalken des Onboardings.

    Die Zahl darunter steht immer mit dabei: Ein Balken allein vermittelt einen Zustand
    ausschließlich über Länge und Farbe und wäre damit nicht für alle lesbar
    (Umsetzungsplan 44).
*/
.pg-progress {
    height: 4px;
    border-radius: 4px;
    background: var(--pg-color-neutral-800);
    overflow: hidden;
}

.pg-progress__bar {
    height: 100%;
    border-radius: 4px;
    background: var(--pg-color-accent);
}

/* Schrittliste im Onboarding-Detail und im öffentlichen Ablauf. */
.pg-steps { display: flex; flex-direction: column; gap: var(--pg-space-3); list-style: none; margin: 0; padding: 0; }

.pg-step { display: flex; align-items: flex-start; gap: var(--pg-space-3); }

.pg-step__icon { flex: none; font-size: 18px; line-height: 1.2; color: var(--pg-color-neutral-500); }

.pg-step__icon--done { color: var(--pg-color-accent); }

.pg-step__body { min-width: 0; }

.pg-step__title { font-size: 14px; }

.pg-step__meta { font-size: 12px; color: var(--pg-color-neutral-500); }

/*
    Öffentlicher Onboarding-Ablauf.

    Eigene, schmale Seitenbreite: Der Ablauf wird überwiegend auf Mobilgeräten ausgefüllt
    und hat keine Seitennavigation, an der er sich ausrichten müsste.
*/
.pg-securejoin { min-height: 100vh; display: flex; flex-direction: column; }

.pg-securejoin__header {
    display: flex;
    align-items: center;
    gap: var(--pg-space-3);
    flex-wrap: wrap;
    padding: var(--pg-space-3) var(--pg-space-5);
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-securejoin__brand { display: flex; flex-direction: column; line-height: 1.2; }

.pg-securejoin__brand-name { font-family: var(--pg-font-heading); font-size: 14px; }

.pg-securejoin__brand-sub { font-size: 11px; color: var(--pg-color-neutral-500); }

.pg-securejoin__spacer { flex: 1; }

.pg-securejoin__assurance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--pg-color-neutral-500);
}

.pg-securejoin__main {
    flex: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--pg-space-6) var(--pg-space-5) var(--pg-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-5);
}

.pg-securejoin__footer {
    display: flex;
    gap: var(--pg-space-4);
    flex-wrap: wrap;
    padding: var(--pg-space-3) var(--pg-space-5);
    border-top: 1px solid var(--pg-color-divider);
    font-size: 12px;
    color: var(--pg-color-neutral-500);
}

.pg-securejoin__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pg-space-3);
    flex-wrap: wrap;
}

/* Zustandsanzeige der Zwischenspeicherung; ohne JavaScript bleibt sie leer. */
.pg-autosave { font-size: 12px; color: var(--pg-color-neutral-500); }

.pg-autosave--failed { color: var(--pg-color-danger); }


/* ══════════════════════════════════════════════════════════════════════
   Mitarbeiterportal (Umsetzungsplan Phase 6)

   Diese Klassen werden von mehreren Portalseiten verwendet und stehen
   deshalb im globalen Blatt: Die komponentenlokale CSS-Isolation von
   Blazor ist ausdrücklich auf eine Komponente beschränkt, und eine Kopie
   je Seite würde bei der ersten Änderung auseinanderlaufen.

   Farben, Radien, Abstände und Schriften stammen unverändert aus den
   Tokens des Design-Systems. Das Portal hat eine eigene Shell, aber keine
   eigene Designsprache (Umsetzungsplan 11.1).
   ══════════════════════════════════════════════════════════════════════ */

/* Kennzahlenreihe der Übersicht; wie im Prototyp mindestens 210 px je Kachel. */
.pg-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--pg-space-4);
}

/*
    Zwei Spalten auf breiten Viewports, eine auf schmalen. Die linke Spalte
    trägt die Aufgaben, die rechte die zuletzt abgelegten Dokumente.
*/
.pg-portal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    gap: var(--pg-space-6);
    align-items: start;
}

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

/* Gestapelte Karten für Profil, persönliche Daten und Einstellungen. */
.pg-portal-cards {
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-6);
}

.pg-portal-task {
    display: flex;
    align-items: flex-start;
    gap: var(--pg-space-4);
}

.pg-portal-task__icon {
    font-size: 20px;
    color: var(--pg-color-accent);
    flex: none;
}

.pg-portal-task__body { flex: 1; min-width: 0; }

.pg-portal-task__title { font-size: 14px; }

.pg-portal-task__text {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--pg-color-neutral-400);
}

.pg-portal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pg-portal-list__item {
    display: flex;
    align-items: center;
    gap: var(--pg-space-4);
    padding: 10px 0;
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-portal-list__item:last-child { border-bottom: 0; }

.pg-portal-list__main { flex: 1; min-width: 0; }

.pg-portal-list__title {
    display: block;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-portal-list__meta {
    display: block;
    font-size: 11.5px;
    color: var(--pg-color-neutral-500);
}

.pg-portal-list__footer {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--pg-space-3);
}

/*
    Erläuternder Nachsatz unter einer Karte. Bewusst kein Hinweiskasten: Der Text
    erklärt eine Absicht und meldet keinen Zustand.
*/
.pg-portal-hint {
    margin: 0;
    font-size: 12.5px;
    color: var(--pg-color-neutral-500);
}

/*
    Phase 7 – Änderungsanträge und Aufgaben.

    Die Klassen bilden die Blöcke "isRequests", "isReqDetail", "isTasks" des Prototyps
    "peoplegrid Portal.dc.html" und den Block "isRequest" aus
    "peoplegrid Mitarbeiterportal.dc.html" ab.
*/

/* Alt → Neu in einer Tabellenzeile. */
.pg-change {
    display: flex;
    align-items: center;
    gap: var(--pg-space-2);
    min-width: 0;
}

.pg-change__old {
    color: var(--pg-color-neutral-500);
    text-decoration: line-through;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-change__arrow {
    flex: none;
    font-size: 13px;
    color: var(--pg-color-neutral-600);
}

.pg-change__new {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
    Alt gegen Neu im Detail. Zwei gleich große Flächen: Die Gegenüberstellung soll
    lesbar machen, was sich ändert, und nicht, was bevorzugt wird.
*/
.pg-compare {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--pg-space-4);
}

.pg-compare__side {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-2);
    padding: var(--pg-space-4);
    border-radius: var(--pg-radius-md);
    border: 1px solid var(--pg-color-divider);
    background: color-mix(in srgb, var(--pg-color-text) 3%, transparent);
}

.pg-compare__side--new {
    border-color: color-mix(in srgb, var(--pg-color-accent) 45%, transparent);
    background: color-mix(in srgb, var(--pg-color-accent) 10%, transparent);
}

.pg-compare__label {
    display: flex;
    align-items: center;
    gap: var(--pg-space-2);
    font-size: 11.5px;
    color: var(--pg-color-neutral-500);
}

.pg-compare__value {
    font-size: 14.5px;
    overflow-wrap: anywhere;
}

.pg-compare__side--old .pg-compare__value { color: var(--pg-color-neutral-400); }

.pg-compare__arrow {
    align-self: center;
    flex: none;
    font-size: 16px;
    color: var(--pg-color-neutral-600);
}

.pg-compare__note,
.pg-compare__reason {
    margin: var(--pg-space-3) 0 0;
    font-size: 12.5px;
    color: var(--pg-color-neutral-500);
}

.pg-compare__reason {
    color: var(--pg-color-text);
    font-size: 13.5px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* Entscheidungsleiste: Ablehnen links, Genehmigen rechts. */
.pg-decision {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--pg-space-4);
    width: 100%;
}

/* Hinweis auf einen veralteten Stand innerhalb einer Meldung. */
.pg-conflict { margin-top: var(--pg-space-3); }

/*
    Verlauf eines Antrags. Die Linie entsteht aus dem Rand der Einträge, damit sie
    ohne zusätzliches Element auskommt.
*/
.pg-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pg-timeline__item {
    position: relative;
    display: flex;
    gap: var(--pg-space-4);
    padding: 0 0 var(--pg-space-6) var(--pg-space-2);
}

.pg-timeline__item::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 14px;
    bottom: 0;
    width: 1px;
    background: var(--pg-color-divider);
}

.pg-timeline__item:last-child { padding-bottom: 0; }

.pg-timeline__item:last-child::before { display: none; }

.pg-timeline__dot {
    position: relative;
    flex: none;
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--pg-color-accent);
}

.pg-timeline__body { flex: 1; min-width: 0; }

.pg-timeline__title { font-size: 13.5px; }

.pg-timeline__text {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--pg-color-neutral-300);
    overflow-wrap: anywhere;
}

.pg-timeline__meta {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--pg-color-neutral-500);
}

/* Aufgabenliste. */
.pg-tasklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pg-tasklist__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pg-space-4);
    padding: var(--pg-space-4) var(--pg-space-6);
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-tasklist__item:last-child { border-bottom: 0; }

.pg-tasklist__main { flex: 1 1 260px; min-width: 0; }

.pg-tasklist__title { font-size: 13.5px; }

.pg-tasklist__subject { color: var(--pg-color-neutral-400); }

.pg-tasklist__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pg-space-4);
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--pg-color-neutral-500);
}

.pg-tasklist__meta i { margin-right: 4px; }

.pg-tasklist__due--overdue { color: var(--pg-color-danger); }

.pg-tasklist__actions {
    display: flex;
    gap: var(--pg-space-2);
    flex: none;
}

/* Mitarbeiterportal: Formular links, eigene Anträge rechts. */
.pg-requestgrid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr);
    gap: var(--pg-space-6);
    align-items: start;
}

@media (max-width: 900px) {
    .pg-requestgrid { grid-template-columns: minmax(0, 1fr); }
}

/*
    Feldauswahl als eigenes GET-Formular: Ohne Interaktivität wechselt der angezeigte
    aktuelle Wert über die Adresszeile.
*/
.pg-fieldpicker {
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-3);
    align-items: flex-start;
    margin-bottom: var(--pg-space-6);
}

.pg-fieldpicker__set {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.pg-fieldpicker__legend {
    padding: 0;
    margin-bottom: var(--pg-space-3);
    font-size: 12.5px;
    color: var(--pg-color-neutral-400);
}

.pg-fieldpicker__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pg-space-2);
}

.pg-fieldpicker__option {
    display: inline-flex;
    align-items: center;
    gap: var(--pg-space-2);
    padding: 6px 10px;
    border-radius: var(--pg-radius-md);
    border: 1px solid var(--pg-color-divider);
    font-size: 12.5px;
    cursor: pointer;
}

.pg-fieldpicker__option:has(input:checked) {
    border-color: color-mix(in srgb, var(--pg-color-accent) 55%, transparent);
    background: color-mix(in srgb, var(--pg-color-accent) 14%, transparent);
}

.pg-fieldpicker__option:has(input:focus-visible) {
    outline: 2px solid var(--pg-color-accent);
    outline-offset: 2px;
}

.pg-fieldpicker__current { color: var(--pg-color-neutral-400); }

.pg-requestfooter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pg-space-3);
    margin-top: var(--pg-space-6);
    padding-top: var(--pg-space-4);
    border-top: 1px solid var(--pg-color-divider);
}

.pg-requestfooter__hint {
    font-size: 11.5px;
    color: var(--pg-color-neutral-500);
}

.pg-requestfooter__hint i { margin-right: 5px; }

.pg-requestlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pg-requestlist__item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--pg-space-4) var(--pg-space-6);
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-requestlist__item:last-child { border-bottom: 0; }

.pg-requestlist__head {
    display: flex;
    align-items: center;
    gap: var(--pg-space-3);
}

.pg-requestlist__field { flex: 1; min-width: 0; font-size: 13.5px; }

.pg-requestlist__change {
    font-size: 11.5px;
    color: var(--pg-color-neutral-500);
    overflow-wrap: anywhere;
}

.pg-requestlist__meta {
    font-size: 11.5px;
    color: var(--pg-color-neutral-600);
}


/* ══════════════════════════════════════════════════════════════════════
   Recruiting und Karriereportal (Umsetzungsplan Phase 8)

   Wie im Mitarbeiterportal stehen diese Klassen im globalen Blatt: Sie
   werden von mehreren Seiten verwendet, und die komponentenlokale
   CSS-Isolation von Blazor ist ausdrücklich auf eine Komponente
   beschränkt. Farben, Radien, Abstände und Schriften stammen unverändert
   aus den Tokens; das Recruiting hat eigene Bildschirme, aber keine
   eigene Designsprache (Umsetzungsplan 11.1).
   ══════════════════════════════════════════════════════════════════════ */

/* Bereichsnavigation des Recruitings; im Prototyp die zweite Leiste unter der Kopfzeile. */
.pg-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pg-space-2);
    margin-bottom: var(--pg-space-5);
    padding-bottom: var(--pg-space-3);
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-subnav__item {
    display: inline-flex;
    align-items: center;
    gap: var(--pg-space-2);
    padding: 6px 11px;
    border-radius: var(--pg-radius-md);
    font-size: 13px;
    color: var(--pg-color-neutral-400);
    text-decoration: none;
}

.pg-subnav__item:hover { color: var(--pg-color-text); }

.pg-subnav__item--active {
    color: var(--pg-color-text);
    background: color-mix(in srgb, var(--pg-color-accent) 12%, transparent);
}

/* Ein Bereich einer späteren Phase: sichtbar, aber nicht bedienbar. */
.pg-subnav__item--pending { color: var(--pg-color-neutral-600); cursor: not-allowed; }

/* Abschnitt einer Stellenbeschreibung, innen wie außen. */
.pg-jobsection + .pg-jobsection { margin-top: var(--pg-space-5); }

.pg-jobsection__title {
    font-family: var(--pg-font-heading);
    font-size: 15px;
    margin: 0 0 var(--pg-space-2);
}

.pg-jobsection__body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--pg-color-neutral-300);

    /* Die Abschnitte sind Fließtext mit Zeilenumbrüchen und kein HTML. */
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/*
    Bewerbungspipeline.

    Spalten nebeneinander mit waagerechtem Bildlauf statt Ziehen und Ablegen: Die Seiten
    sind serverseitig gerendert (ADR-0012), und ein Wechsel des Zustands ist ein
    gewöhnlicher Formular-Post.
*/
.pg-pipeline {
    display: flex;
    gap: var(--pg-space-4);
    overflow-x: auto;
    padding-bottom: var(--pg-space-3);
    align-items: flex-start;
}

.pg-pipeline__column {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-3);
}

.pg-pipeline__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pg-space-2);
}

.pg-pipeline__label { font-family: var(--pg-font-heading); font-size: 13.5px; }

.pg-pipeline__count { font-size: 12px; color: var(--pg-color-neutral-500); }

.pg-pipeline__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--pg-space-3);
    border: 1px solid var(--pg-color-divider);
    border-radius: var(--pg-radius-md);
    background: var(--pg-color-surface);
    text-decoration: none;
    color: inherit;
}

.pg-pipeline__card:hover { border-color: color-mix(in srgb, var(--pg-color-accent) 45%, transparent); }

.pg-pipeline__name { font-size: 13.5px; }

.pg-pipeline__job { font-size: 12px; color: var(--pg-color-neutral-400); }

.pg-pipeline__meta { font-size: 11.5px; color: var(--pg-color-neutral-500); }

.pg-pipeline__empty {
    font-size: 12px;
    color: var(--pg-color-neutral-600);
    padding: var(--pg-space-3);
    border: 1px dashed var(--pg-color-divider);
    border-radius: var(--pg-radius-md);
}

/* Die abgegebenen Antworten einer Bewerbung. */
.pg-answers__title {
    font-family: var(--pg-font-heading);
    font-size: 13.5px;
    margin: var(--pg-space-4) 0 var(--pg-space-2);
}

.pg-answers__title:first-child { margin-top: 0; }

/* Unterlagen einer Bewerbung. */
.pg-doclist { list-style: none; margin: 0; padding: 0; }

.pg-doclist__item {
    display: flex;
    align-items: center;
    gap: var(--pg-space-3);
    padding: var(--pg-space-3) 0;
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-doclist__item:last-child { border-bottom: 0; }

.pg-doclist__main { flex: 1; min-width: 0; }

.pg-doclist__title { font-size: 13.5px; overflow-wrap: anywhere; }

.pg-doclist__meta { font-size: 11.5px; color: var(--pg-color-neutral-500); }

/* Mehrere Kästchen untereinander, etwa die Einwilligungen einer Bewerbung. */
.pg-checks { display: flex; flex-direction: column; gap: var(--pg-space-3); }

.pg-check { display: flex; align-items: flex-start; gap: var(--pg-space-3); font-size: 13px; }

/* Aktionsspalte einer Tabelle; rechtsbündig und nicht umbrechend. */
.pg-cell--actions { text-align: right; white-space: nowrap; }

.pg-identity__name { font-size: 13.5px; }

/* Zustandswechsel im Verlauf einer Bewerbung. */
.pg-timeline__stage { font-size: 11.5px; color: var(--pg-color-neutral-500); }

/*
    Eine Schaltfläche, die wie ein Verweis aussieht.

    Verwendet für Vorgänge, die einen Post brauchen, im Text aber kein Gewicht haben
    sollen – etwa „Entwurf verwerfen“. Ein echter Verweis käme dafür nicht infrage: Er
    würde den Vorgang über GET auslösen.
*/
.pg-linkbutton {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: var(--pg-color-accent);
    text-decoration: underline;
    cursor: pointer;
}


/* ── Öffentlicher Karrierebereich ────────────────────────────────────── */

/*
    Eigene, schmale Seitenbreite wie beim öffentlichen Onboarding: Der Bereich wird
    überwiegend auf Mobilgeräten geöffnet und hat keine Seitennavigation, an der er sich
    ausrichten müsste.
*/
.pg-career { min-height: 100vh; display: flex; flex-direction: column; }

.pg-career__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pg-space-4);
    flex-wrap: wrap;
    padding: var(--pg-space-4) var(--pg-space-5);
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-career__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--pg-space-3);
    text-decoration: none;
    color: inherit;
}

/*
    Das Kurzzeichen trägt die Akzentfarbe des Unternehmens.

    Der Wert kommt als Custom Property vom Rahmen und stammt aus dem zentralen Branding
    (Phase 10). Ohne gesetzten Wert bleibt es beim Akzent der Plattform.
*/
.pg-career__mark {
    width: 30px;
    height: 30px;
    border-radius: var(--pg-radius-sm);
    background: var(--pg-brand-accent, var(--pg-color-accent));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.pg-career__company { font-family: var(--pg-font-heading); font-size: 15px; }

.pg-career__nav { font-size: 13px; }

.pg-career__nav a { color: var(--pg-color-neutral-400); text-decoration: none; }

.pg-career__nav a:hover { color: var(--pg-color-text); }

.pg-career__main {
    flex: 1;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: var(--pg-space-6) var(--pg-space-5) var(--pg-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-5);
}

/* Ohne aufgelöstes Portal gibt es keine Kopfzeile, die ein Unternehmen nennen könnte. */
.pg-career--plain .pg-career__main { justify-content: center; }

.pg-career__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pg-space-4);
    justify-content: space-between;
    padding: var(--pg-space-4) var(--pg-space-5);
    border-top: 1px solid var(--pg-color-divider);
    font-size: 12px;
    color: var(--pg-color-neutral-500);
}

.pg-career__footer-meta { color: var(--pg-color-neutral-600); }

.pg-career__hero { display: flex; flex-direction: column; gap: var(--pg-space-3); }

.pg-career__headline {
    font-family: var(--pg-font-heading);
    font-size: 24px;
    letter-spacing: -0.02em;
    margin: 0;
}

.pg-career__intro {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--pg-color-neutral-300);
    white-space: pre-line;
}

.pg-career__eyebrow {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pg-color-neutral-500);
}

.pg-career__section-title {
    font-family: var(--pg-font-heading);
    font-size: 16px;
    margin: 0;
}

.pg-career__jobs { display: flex; flex-direction: column; gap: var(--pg-space-4); }

.pg-career__jobs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pg-space-3);
    flex-wrap: wrap;
}

.pg-career__search { display: flex; gap: var(--pg-space-2); }

.pg-career__filters { display: flex; flex-wrap: wrap; gap: var(--pg-space-2); }

.pg-career__filter {
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--pg-color-divider);
    font-size: 12.5px;
    color: var(--pg-color-neutral-400);
    text-decoration: none;
}

.pg-career__filter--active {
    color: var(--pg-color-text);
    border-color: color-mix(in srgb, var(--pg-color-accent) 55%, transparent);
    background: color-mix(in srgb, var(--pg-color-accent) 14%, transparent);
}

.pg-career__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pg-space-3); }

.pg-career__job-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--pg-space-4);
    align-items: center;
    padding: var(--pg-space-4);
    border: 1px solid var(--pg-color-divider);
    border-radius: var(--pg-radius-md);
    background: var(--pg-color-surface);
    text-decoration: none;
    color: inherit;
}

.pg-career__job-link:hover {
    border-color: color-mix(in srgb, var(--pg-brand-accent, var(--pg-color-accent)) 45%, transparent);
}

.pg-career__job-title { font-family: var(--pg-font-heading); font-size: 15px; }

.pg-career__job-meta { font-size: 12.5px; color: var(--pg-color-neutral-400); }

.pg-career__job-salary { font-size: 12.5px; color: var(--pg-color-neutral-500); }

.pg-career__job-action {
    grid-row: 1 / span 3;
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--pg-color-accent);
}

.pg-career__jobhead { display: flex; flex-direction: column; gap: var(--pg-space-3); align-items: flex-start; }

.pg-career__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pg-space-4);
    font-size: 12.5px;
    color: var(--pg-color-neutral-400);
}

.pg-career__facts i { margin-right: 5px; }

.pg-career__sections { display: flex; flex-direction: column; }

.pg-career__contact {
    padding: var(--pg-space-4);
    border: 1px solid var(--pg-color-divider);
    border-radius: var(--pg-radius-md);
}

.pg-career__contact-name { font-family: var(--pg-font-heading); font-size: 14px; }

.pg-career__contact-meta { font-size: 12.5px; color: var(--pg-color-neutral-500); }

.pg-career__progress { display: flex; flex-direction: column; gap: var(--pg-space-2); }

.pg-career__note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pg-space-3);
    font-size: 11.5px;
    color: var(--pg-color-neutral-500);
}

.pg-career__policy { font-size: 12.5px; color: var(--pg-color-neutral-400); }

.pg-career__policy-body {
    margin-top: var(--pg-space-2);
    line-height: 1.7;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .pg-career__job-link { grid-template-columns: minmax(0, 1fr); }

    .pg-career__job-action { grid-row: auto; grid-column: auto; }
}


/* ── Vorlagen und Portalbilder (Phase 8) ─────────────────────────────── */

.pg-templates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--pg-space-4);
}

.pg-template__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pg-space-2); }

.pg-template__name { font-family: var(--pg-font-heading); font-size: 15px; }

.pg-template__meta { font-size: 12px; color: var(--pg-color-neutral-500); margin-top: 4px; }

/*
    Die Aktionen einer Vorlagenkarte.

    Jede Aktion ist ein eigenes kleines Formular – nur so trägt jede ihren eigenen
    Vorgang, ohne dass eine Kennung aus dem Request käme. Die Formulare stehen deshalb
    nebeneinander wie Schaltflächen.
*/
.pg-template__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pg-space-3);
}

.pg-template__actions form { display: inline-flex; }

/* Titelbild und Teamfoto des öffentlichen Portals. */
.pg-career__hero-image,
.pg-career__team-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--pg-radius-md);
    object-fit: cover;
}

.pg-career__hero-image { aspect-ratio: 8 / 3; }

.pg-career__team-image { aspect-ratio: 16 / 9; }

/* ------------------------------------------------------------------ Phase 10
   Rollen, Rechte und Unternehmensverwaltung.

   Alle Maße stammen aus dem freigegebenen Prototyp „peoplegrid Portal.dc.html“ und
   verwenden ausschließlich die Tokens des Design-Systems – es entsteht keine zweite
   Farb- oder Abstandsskala (Umsetzungsplan 11.4).
   ------------------------------------------------------------------ */

/* Kachelraster der Einstellungsübersicht. */
.pg-settingsgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: var(--pg-space-4);
}

.pg-settingscard {
    display: flex;
    align-items: flex-start;
    gap: var(--pg-space-4);
    padding: var(--pg-space-6);
    border: 1px solid var(--pg-color-divider);
    border-radius: var(--pg-radius-md);
    background: var(--pg-color-surface);
    color: inherit;
    text-decoration: none;
}

a.pg-settingscard:hover {
    border-color: var(--pg-color-accent-700);
    background: color-mix(in srgb, var(--pg-color-text) 4%, transparent);
}

/*
    Bereiche späterer Phasen. Sie sind sichtbar, aber ausdrücklich nicht bedienbar:
    Ein Klick würde eine Funktion vortäuschen, die es noch nicht gibt.
*/
.pg-settingscard--pending { opacity: 0.55; cursor: default; }

.pg-settingscard__icon { font-size: 20px; color: var(--pg-color-accent); line-height: 1; }

.pg-settingscard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.pg-settingscard__title { font-family: var(--pg-font-heading); font-size: 14.5px; }

.pg-settingscard__text { font-size: 12.5px; color: var(--pg-color-neutral-400); line-height: 1.5; }

/* Kartenraster der Rollenübersicht. */
.pg-rolegrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: var(--pg-space-4);
    align-items: start;
}

.pg-role__description { margin: 0; font-size: 12.5px; color: var(--pg-color-neutral-400); line-height: 1.55; }

.pg-role__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pg-space-4);
    margin-top: var(--pg-space-2);
    font-size: 12px;
    color: var(--pg-color-neutral-500);
}

.pg-role__meta i { margin-right: 5px; }

.pg-role__footer { display: flex; justify-content: space-between; align-items: center; gap: var(--pg-space-3); }

/* Zweispaltige Detailseiten: Inhalt links, Begleitkarten rechts. */
.pg-detailgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
    gap: var(--pg-space-6);
    align-items: start;
}

.pg-detailgrid > * { display: flex; flex-direction: column; gap: var(--pg-space-6); min-width: 0; }

.pg-detailgrid__aside { display: flex; flex-direction: column; gap: var(--pg-space-6); }

@media (max-width: 960px) {
    .pg-detailgrid { grid-template-columns: minmax(0, 1fr); }
}

/* Gruppierte Auswahl der Berechtigungen im Rolleneditor. */
.pg-permissiongroup {
    border: 0;
    margin: 0 0 var(--pg-space-6);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-3);
}

.pg-permissiongroup__title {
    padding: 0;
    font-family: var(--pg-font-heading);
    font-size: 13.5px;
    color: var(--pg-color-neutral-300);
}

.pg-permissiongroup__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--pg-space-3);
}

.pg-permission {
    display: flex;
    align-items: flex-start;
    gap: var(--pg-space-3);
    padding: 10px 12px;
    border: 1px solid var(--pg-color-divider);
    border-radius: var(--pg-radius-md);
}

/*
    Ein gesperrtes Recht. Die Sperre ist Bequemlichkeit und keine Sicherheitsmaßnahme:
    Wer sie mit Bordmitteln aufhebt, bekommt vom Server dieselbe Ablehnung
    (Umsetzungsplan 36.1).
*/
.pg-permission--locked { opacity: 0.6; }

.pg-permission__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.pg-permission__name { font-size: 13px; font-variant-numeric: tabular-nums; }

.pg-permission__text { font-size: 11.5px; color: var(--pg-color-neutral-500); line-height: 1.5; }

.pg-permission__hint { font-size: 11.5px; color: var(--pg-color-accent-400); }

.pg-permissionlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pg-space-3); }

.pg-permissionlist li { display: flex; flex-direction: column; gap: 2px; }

/* Berechtigungsmatrix. */
.pg-matrix { overflow-x: auto; }

.pg-matrix__table { min-width: 720px; }

.pg-matrix__role { text-align: center; white-space: nowrap; }

.pg-matrix__permission { text-align: left; font-weight: 400; }

.pg-matrix__permission .pg-permission__name,
.pg-matrix__permission .pg-permission__text { display: block; }

.pg-matrix__grouprow th {
    background: color-mix(in srgb, var(--pg-color-text) 5%, transparent);
    font-family: var(--pg-font-heading);
    font-size: 12.5px;
    text-align: left;
}

.pg-matrix__cell { text-align: center; }

.pg-matrix__toggle { display: inline-flex; align-items: center; justify-content: center; }

/* Liste zugewiesener Rollen im Benutzerdetail. */
.pg-rolelist { display: flex; flex-direction: column; gap: var(--pg-space-3); }

.pg-rolelist__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pg-space-3);
    padding: 10px 12px;
    border: 1px solid var(--pg-color-divider);
    border-radius: var(--pg-radius-md);
}

.pg-assignform { display: flex; align-items: flex-end; gap: var(--pg-space-3); flex-wrap: wrap; }

.pg-assignform .field { flex: 1; min-width: 200px; }

/* Mehrere Kurzangaben nebeneinander, etwa Rollen in einer Tabellenzelle. */
.pg-taglist { display: flex; flex-wrap: wrap; gap: 4px; }

/* Sichtenwechsel über der Benutzerliste. Ein Link je Sicht – ohne JavaScript. */
.pg-filterbar { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--pg-radius-md); border: 1px solid var(--pg-color-divider); }

.pg-filterbar__item {
    padding: 4px 10px;
    border-radius: var(--pg-radius-sm);
    font-size: 12.5px;
    color: var(--pg-color-neutral-400);
    text-decoration: none;
}

.pg-filterbar__item--active { background: color-mix(in srgb, var(--pg-color-text) 8%, transparent); color: var(--pg-color-text); }

/* Schlüssel-Wert-Liste mit freiem Inhalt, etwa Verweisen. */
.pg-factlist { margin: 0; display: flex; flex-direction: column; }

.pg-factlist__row {
    display: flex;
    justify-content: space-between;
    gap: var(--pg-space-4);
    padding: 7px 0;
    border-bottom: 1px solid var(--pg-color-divider);
    font-size: 13px;
}

.pg-factlist__row:last-child { border-bottom: 0; }

.pg-factlist__key { color: var(--pg-color-neutral-500); flex: none; margin: 0; }

.pg-factlist__value { text-align: right; margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Größere Identitätszeile im Seitenkopf. */
.pg-identity--large { gap: var(--pg-space-4); }

.pg-avatar--large { width: 44px; height: 44px; font-size: 15px; }

/*
    Vorschau des Brandings.

    Die Akzentfarbe kommt als Custom Property von der Seite, damit die Vorschau denselben
    Wert zeigt, den auch die Einladungsseite verwendet – und nicht einen nachgebauten.
*/
.pg-brandpreview {
    border: 1px solid var(--pg-color-divider);
    border-radius: var(--pg-radius-md);
    overflow: hidden;
}

.pg-brandpreview__head {
    display: flex;
    align-items: center;
    gap: var(--pg-space-3);
    padding: 10px 12px;
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-brandpreview__logo { max-height: 28px; width: auto; }

.pg-brandpreview__mark {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--pg-brand-accent, var(--pg-color-accent));
    color: var(--pg-brand-accent, var(--pg-color-accent));
    font-size: 12px;
    font-weight: 600;
}

.pg-brandpreview__name { font-size: 13px; }

.pg-brandpreview__body { padding: 18px; display: flex; flex-direction: column; gap: var(--pg-space-4); }

.pg-brandpreview__kicker {
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pg-brand-accent, var(--pg-color-accent));
}

.pg-brandpreview__welcome { font-family: var(--pg-font-heading); font-size: 17px; line-height: 1.3; }

.pg-brandpreview__cta {
    display: inline-flex;
    align-self: flex-start;
    padding: 7px 14px;
    border-radius: var(--pg-radius-md);
    border: 1px solid var(--pg-brand-accent, var(--pg-color-accent));
    color: var(--pg-brand-accent, var(--pg-color-accent));
    font-size: 12.5px;
}

.pg-brandpreview__footer { font-size: 10.5px; color: var(--pg-color-neutral-600); }

/*
    Logo des Unternehmens im öffentlichen Karriereportal (Phase 10).

    Es tritt an die Stelle des Kurzzeichens, sobald ein zentrales Logo hinterlegt ist.
*/
.pg-career__logo { max-height: 28px; width: auto; display: block; }

/* ------------------------------------------------------------------ Phase 11
   Benachrichtigungen: die Glocke in der Kopfzeile und der Punkt vor einem
   ungelesenen Eintrag. Beides stammt aus dem freigegebenen Prototyp; der Punkt
   ist bewusst keine Zahl. */

.pg-header__bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    text-decoration: none;
}

.pg-header__bell:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.pg-header__bell i {
    font-size: 16px;
}

.pg-header__bell--unread::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}

.pg-notification__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    vertical-align: middle;
}

/* Kennzahlenreihe der Integrationsübersicht: dieselbe Rasterform wie die
   Kennzahlen der übrigen Listen. */

.pg-integration__meta {
    font-size: 11.5px;
    color: var(--color-neutral-500);
    overflow-wrap: anywhere;
}

.pg-integration__secret {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.pg-integration__secret input {
    flex: 1;
    min-width: 240px;
    font-family: var(--font-mono, monospace);
    font-size: 12.5px;
}

/* ---------------------------------------------------------------- Phase 12
   Abrechnung und Datenschutzverwaltung.

   Die Klassen folgen dem freigegebenen Prototyp (peoplegrid Portal.dc.html, Ansichten
   „billing“, „plans“, „dataExport“ und „danger“). Sie verwenden ausschließlich vorhandene
   Tokens; es entsteht kein zweites Farb- oder Abstandssystem. */

.pg-billing__plan {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pg-space-4);
    flex-wrap: wrap;
}

.pg-billing__planname {
    font-family: var(--font-heading);
    font-size: 22px;
    letter-spacing: -0.02em;
}

.pg-billing__price { text-align: right; }

.pg-billing__amount {
    font-family: var(--font-heading);
    font-size: 22px;
    letter-spacing: -0.02em;
}

.pg-billing__usage {
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-3);
    margin-top: var(--pg-space-3);
}

.pg-billing__metric { display: flex; flex-direction: column; gap: 5px; }

.pg-billing__metricrow {
    display: flex;
    justify-content: space-between;
    gap: var(--pg-space-3);
    font-size: 12.5px;
}

.pg-billing__bar {
    height: 4px;
    border-radius: 4px;
    background: var(--color-neutral-800);
    overflow: hidden;
}

.pg-billing__barfill {
    height: 100%;
    border-radius: 4px;
    background: var(--color-accent);
}

.pg-billing__links { display: flex; flex-direction: column; gap: var(--pg-space-2); }

.pg-plangrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--pg-space-4);
    align-items: start;
}

.pg-plan__price {
    font-family: var(--font-heading);
    font-size: 26px;
    letter-spacing: -0.02em;
}

.pg-plan__features { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }

.pg-plan__feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
}

.pg-plan__feature--missing { color: var(--color-neutral-600); }

.pg-privacy__scopes { display: flex; flex-direction: column; gap: var(--pg-space-3); }

.pg-privacy__rule {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 110px;
    gap: var(--pg-space-3);
    align-items: end;
}

@media (max-width: 720px) {
    .pg-privacy__rule { grid-template-columns: minmax(0, 1fr); }
}

.pg-privacy__due { font-size: 11.5px; color: var(--color-neutral-500); }

.pg-privacy__effects { display: flex; flex-direction: column; gap: 8px; }

.pg-privacy__effect {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pg-space-3);
    font-size: 13px;
}

.pg-privacy__danger {
    border: 1px solid var(--color-neutral-700);
    background: var(--color-neutral-900);
}

.pg-privacy__steps { display: flex; flex-direction: column; gap: 6px; }

.pg-privacy__step {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pg-space-3);
    font-size: 12.5px;
}

/* ── Phase 12: Umfangsauswahl des Datenexports ────────────────────────────── */

.pg-exportscopes {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pg-exportscope {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.pg-exportscope:hover {
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

.pg-exportscope__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pg-exportscope__label {
    font-size: 13.5px;
}

.pg-exportscope__desc {
    font-size: 11.5px;
    color: var(--color-neutral-500);
}

/* ── Phase 12: Aktivitätsprotokoll ────────────────────────────────────────── */

.pg-activity__filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
}

.pg-activity__chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pg-activity__chip {
    padding: 5px 11px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-pill, 999px);
    font-size: 12.5px;
    color: var(--color-neutral-400);
    text-decoration: none;
    white-space: nowrap;
}

.pg-activity__chip:hover {
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

.pg-activity__chip--active {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.pg-activity__count {
    margin-left: auto;
    font-size: 12px;
    color: var(--color-neutral-500);
}

.pg-activity__when,
.pg-activity__ip {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pg-activity__outcome {
    margin-left: 6px;
    font-size: 11.5px;
    color: var(--color-neutral-500);
}

/*
    Gehaltsabrechnungen.

    Die Kachelreihe der Abrechnungsläufe folgt dem freigegebenen Prototyp
    ("peoplegrid Portal.dc.html", Block "isPayroll"): eine Kachel je Monat mit Zustand und
    Umfang. Sie ist ein Verweis und kein Knopf – ein Lauf ist eine eigene Seite.
*/

.pg-payroll__runs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--pg-space-3);
}

.pg-payroll__run {
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-2);
    padding: var(--pg-space-6);
    border-radius: var(--pg-radius-md);
    background: var(--color-surface);
    box-shadow: var(--pg-shadow-sm);
    color: var(--color-text);
    text-decoration: none;
}

.pg-payroll__run:hover {
    background: color-mix(in srgb, var(--color-text) 5%, var(--color-surface));
}

.pg-payroll__run-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pg-space-3);
}

.pg-payroll__run-month { font-size: 15px; }

.pg-payroll__run-count { font-size: 12.5px; color: var(--color-neutral-400); }

.pg-payroll__run-meta { font-size: 11.5px; color: var(--color-neutral-500); }

/* Fußzeile eines Formulars: Abbrechen links, bestätigende Aktion rechts. */
.pg-payroll__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--pg-space-3);
    flex-wrap: wrap;
}

/*
    Name mit Initialenkreis in einer Tabellenzelle. Der Kreis ist rein dekorativ und für
    Screenreader ausgeblendet; gelesen wird der Name daneben.
*/

.pg-person { display: flex; align-items: center; gap: var(--pg-space-3); }

.pg-person__initials {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-neutral-800);
    color: var(--color-neutral-200);
    font-size: 10.5px;
    font-weight: 600;
}