/* ---------- Grundlage ----------
   Nur, was Talentum nicht selbst abdeckt: rohe <a> außerhalb der
   Bibliothek, der Fokus nach FocusOnNavigate, die Validierung der
   InputBase-Felder im Identity-Scaffold und der Fehlerrahmen von
   ErrorBoundary. Alle Farben aus den Tokens, damit sie mit dem Theme
   kippen. */

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

h1:focus {
    outline: none;
}

.invalid {
    border-color: var(--danger-500);
}

.validation-message {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: var(--danger-500);
}

.blazor-error-boundary {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--state-rejected-bg);
    color: var(--state-rejected-ink);
}

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

/* ---------- Public Layout ----------
   Kopfleiste (TlTopbar) und Fußzeile (TlFooter) kommen aus der
   Bibliothek. Hier nur die Seitenfläche: volle Höhe, damit die Fußzeile
   bei kurzen Seiten unten steht, und der Abstand des Inhalts. */
.public-layout-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-100);
    /* Wie die App-Schale (.tl-shell): Überschriften und Fließtext ohne
       eigenen Ton in ink-900 — mit ink-700 wirkten Seitentitel und
       Kartenüberschriften im öffentlichen Bereich blass. */
    color: var(--ink-900);
}
.public-layout-main {
    flex: 1 0 auto;
    padding: var(--space-7) 0 calc(var(--space-7) + var(--space-6));
}
/* Rechtliche Links in den Fußzeilen (PublicLayout, MainLayout). */
.legal-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* Anschrift im Impressum: eine Zeile je Angabe, ohne die Kursivschrift,
   die Browser <address> mitgeben. */
.legal-adresse {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-style: normal;
}

/* ---------- Public Job Page ----------
   Bewusst neutrale, redaktionelle Anmutung — ruhige Fläche, dezente
   Trennlinien, Typografie trägt die Hierarchie. Kein Tool-CI-Farb-
   Akzent, damit später eingebrachte Tenant-CI nicht damit kollidiert.
   Orientierung: karrierebörse-Stil. */

/* Headline-Block: Tenant in dezenter Caption, dann großer Titel,
   darunter eine Pillen-Reihe mit Schnell-Facts (Beschäftigung/Modell/
   Standort) — outlined, neutral, kein Farb-Akzent. */
.public-job-header-block {
    margin-bottom: var(--space-5);
}
.public-job-tenant-line {
    font-size: 0.875rem;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
}
/* Tenant-Name als Link zum Firmenprofil: erbt die Caption-Optik,
   Unterstreichung erst beim Hover. */
.public-job-tenant-link {
    color: inherit;
    text-decoration: none;
}
.public-job-tenant-link:hover {
    color: var(--ink-900);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.public-job-firma-link {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: 0.9375rem;
    color: var(--ink-900);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.public-job-title {
    font-size: 2.25rem;
    line-height: 1.15;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 var(--space-5);
    letter-spacing: -0.01em;
}
.public-job-pills {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
}
.public-job-pills li {
    font-size: 0.875rem;
    color: var(--ink-700);
    background-color: var(--surface-200);
    border: 1px solid var(--border-100);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-3);
}

.public-job-divider {
    border: none;
    border-top: 1px solid var(--border-100);
    margin: var(--space-6) 0;
}

.public-job-empty {
    color: var(--ink-500);
    font-style: italic;
}

/* Content-Bereich — die HTML-Beschreibung kommt hier ungerahmt rein,
   großzügige Zeilenhöhe, Headlines dunkel und kräftig. */
.public-job-content {
    line-height: 1.7;
    font-size: 1.0625rem;
    color: var(--ink-700);
}
.public-job-content h1,
.public-job-content h2,
.public-job-content h3,
.public-job-content h4 {
    color: var(--ink-900);
    font-weight: 700;
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
    line-height: 1.3;
}
.public-job-content h1 { font-size: 1.75rem; }
.public-job-content h2 { font-size: 1.4rem; }
.public-job-content h3 { font-size: 1.2rem; }
.public-job-content h4 { font-size: 1.05rem; }
.public-job-content p {
    margin: 0 0 1em;
}
.public-job-content ul,
.public-job-content ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
}
.public-job-content li {
    margin-bottom: 0.4em;
}
.public-job-content a {
    color: var(--ink-900);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.public-job-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* Sidebar — kein Card-Frame, nur ein dezenter linker Trenner.
   Sticky, damit der Bewerben-CTA beim Scrollen sichtbar bleibt. */
.public-job-aside {
    position: sticky;
    top: 5rem;
    padding: 0 0 0 var(--space-5);
    border-left: 1px solid var(--border-100);
}
.public-job-aside-heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink-900);
    margin: var(--space-6) 0 var(--space-3);
}
.public-job-aside-heading:first-child {
    margin-top: 0;
}
/* Die Fact-Zeilen bringen keinen eigenen Außenabstand mehr mit — der
   Abstand gehört in die Liste, nicht in jede Zeile. */
.public-job-facts {
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.public-job-cta {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-100);
}
/* Invertierte Fläche statt Akzentfarbe: der CTA soll kräftig sein, ohne
   eine CI-Farbe zu setzen, die sich später mit Tenant-Branding beißt.
   Über ink-900/surface-100 kippt er im Dunkel-Theme sauber mit. */
.public-job-apply {
    display: block;
    text-align: center;
    background-color: var(--ink-900);
    color: var(--surface-100);
    font-weight: 600;
    font-size: 1rem;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.public-job-apply:hover,
.public-job-apply:focus {
    background-color: var(--ink-700);
    color: var(--surface-100);
    text-decoration: none;
}
.public-job-cta-note {
    font-size: 0.8125rem;
    color: var(--ink-500);
    text-align: center;
    margin: var(--space-3) 0 0;
}
.public-job-deadline-passed {
    background-color: var(--state-review-bg);
    border: 1px solid var(--state-review-ink);
    color: var(--state-review-ink);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    text-align: center;
}

/* Schnellbewerbung: das Formular unter Beschreibung und Seitenleiste,
   über die volle Breite des Containers. Sprungziel von „Jetzt bewerben" —
   scroll-margin hält die Überschrift unter der klebenden Kopfleiste. */
.public-job-schnell {
    margin-top: var(--space-6);
    scroll-margin-top: calc(var(--tl-bar-height) + var(--space-4));
}
/* Das native Dateifeld in der Talentum-Hülle: tl-input hat keinen
   senkrechten Innenabstand, der Auswahlknopf säße sonst an der Kante. */
.public-job-schnell__datei {
    padding-block: var(--space-1);
}
/* Die Zustimmung ist ein Satz mit Link — das Kästchen bleibt oben an der
   ersten Zeile, statt mittig vor dem Absatz zu stehen. */
.public-job-schnell__zustimmung {
    align-items: flex-start;
}

/* Mobile: Sidebar nicht-sticky, kein linker Border (ist jetzt oberer). */
@media (max-width: 960px) {
    .public-job-aside {
        position: static;
        padding: var(--space-6) 0 0;
        border-left: none;
        border-top: 1px solid var(--border-100);
        margin-top: var(--space-4);
    }
    .public-job-title {
        font-size: 1.75rem;
    }
}

/* ---------- Public Firmenprofil ----------
   Karrierebörsen-Stil: ruhige Fläche, dezente Trenner, Typografie
   führt. Klickbares (Job-Titel, Adress-/Website-Links) trägt die
   Akzentfarbe, Fließtext die Ink-Stufen — beides aus den Tokens, damit
   das Dunkel-Theme mitkippt. Hero zentriert mit Logo statt left-aligned
   mit Pillen, damit Besucher Firmenprofil von Stellenanzeige optisch
   sofort unterscheiden. */

/* Zentrierter Hero. Logo-Quadrat 120px, Initialen-Fallback gedämpft. */
.public-firma-hero {
    text-align: center;
    margin-bottom: var(--space-5);
}
.public-firma-logo {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-5);
    border: 1px solid var(--border-100);
    border-radius: var(--radius-lg);
    background-color: var(--surface-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.public-firma-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.public-firma-logo-fallback {
    font-size: 3rem;
    font-weight: 700;
    color: var(--ink-500);
}
.public-firma-title {
    font-size: 2.25rem;
    line-height: 1.15;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 var(--space-2);
    letter-spacing: -0.01em;
}
.public-firma-subline {
    font-size: 0.95rem;
    color: var(--ink-500);
    margin: 0;
}

.public-firma-divider {
    border: none;
    border-top: 1px solid var(--border-100);
    margin: var(--space-6) 0;
}

.public-firma-section-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 var(--space-4);
    line-height: 1.3;
}

.public-firma-empty {
    color: var(--ink-500);
    font-style: italic;
}

.public-firma-text {
    line-height: 1.7;
    font-size: 1rem;
    color: var(--ink-700);
    /* pre-wrap erhält Zeilenumbrüche aus dem Plain-Text-Editor, ohne
       horizontal scrollbar zu erzeugen. */
    white-space: pre-wrap;
    margin: 0 0 var(--space-5);
}

/* Fact-Block: Label fett, Wert darunter. */
.public-firma-fact-block {
    margin: var(--space-5) 0;
}
.public-firma-fact-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 var(--space-1);
}
.public-firma-fact-value {
    font-size: 1rem;
    color: var(--ink-700);
    margin: 0;
}

/* Sidebar — Klon der .public-job-aside-Optik, gleicher linker Trenner. */
.public-firma-aside {
    position: sticky;
    top: 5rem;
    padding: 0 0 0 var(--space-5);
    border-left: 1px solid var(--border-100);
}
.public-firma-aside-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 var(--space-3);
}
.public-firma-address {
    font-size: 0.95rem;
    color: var(--ink-700);
    line-height: 1.5;
    margin: 0 0 var(--space-4);
}
.public-firma-route-link,
.public-firma-website a {
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.public-firma-route-link:hover,
.public-firma-website a:hover {
    color: var(--accent-600);
}
.public-firma-website {
    margin: 0;
    font-size: 0.95rem;
}

/* Stellen-Liste unten — jede Karte ist als Block-Link klickbar. */
.public-firma-jobs {
    list-style: none;
    padding: 0;
    margin: 0;
}
.public-firma-job {
    border-bottom: 1px solid var(--border-100);
}
.public-firma-job:last-child {
    border-bottom: none;
}

/* Card-Wrapper: <a> wird als Block dargestellt, color:inherit damit
   Meta/Pills ihre eigenen Farben behalten. Der Titel innen bekommt
   die Link-Färbung. Hover/Focus tönen subtil den Hintergrund —
   Affordance, dass die ganze Karte klickbar ist. */
.public-firma-job-link {
    display: block;
    padding: var(--space-4) var(--space-3) var(--space-5);
    margin: 0 calc(-1 * var(--space-3));
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease;
}
.public-firma-job-link:hover,
.public-firma-job-link:focus-visible {
    background-color: var(--accent-100);
}
/* Die Tönung allein wäre als Fokusanzeige zu leise — der Rahmen bleibt. */
.public-firma-job-link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
.public-firma-job-link:hover .public-firma-job-title,
.public-firma-job-link:focus-visible .public-firma-job-title {
    color: var(--accent-600);
    text-decoration: underline;
}
/* Fallback ohne Link: gleiche Box-Optik, aber kein Hover-Effekt und
   Titel in Heading-Farbe statt Akzent (signalisiert: kein Ziel). */
.public-firma-job-link--inactive {
    cursor: default;
}
.public-firma-job-link--inactive .public-firma-job-title {
    color: var(--ink-900);
}

.public-firma-job-title {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-text);
    text-decoration: none;
    margin-bottom: var(--space-1);
}
.public-firma-job-meta {
    font-size: 0.875rem;
    color: var(--ink-700);
    margin: 0;
}
.public-firma-job-meta-secondary {
    font-size: 0.8125rem;
    color: var(--ink-500);
    margin: 0 0 var(--space-2);
}
.public-firma-job-pills {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
}
.public-firma-job-pills li {
    font-size: 0.8125rem;
    color: var(--ink-700);
    background-color: var(--surface-200);
    border: 1px solid var(--border-100);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-3);
}

/* Recruiter-Edit-Page: Logo-Vorschau-Box. */
.firma-edit-logo {
    width: 120px;
    height: 120px;
    border: 1px solid var(--border-100);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--surface-200);
    overflow: hidden;
}
.firma-edit-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 960px) {
    .public-firma-aside {
        position: static;
        padding: var(--space-6) 0 0;
        border-left: none;
        border-top: 1px solid var(--border-100);
        margin-top: var(--space-4);
    }
    .public-firma-title {
        font-size: 1.75rem;
    }
}

/* ---------- Bewerbungs-Postfach ----------
   Karten-Timeline in BewerbungPostfachPanel (Components/Shared). Die Richtung bekommt einen
   farbigen linken Akzent plus leichte Tönung — Accent = Recruiter,
   Violett aus dem Farbkreis (hue-violet) = Bewerber, damit sich die
   beiden Seiten auf einen Blick unterscheiden; der Absender-Chip folgt
   derselben Farbe. Talentum-
   Tokens statt Hex, damit der Akzent auch im Dark-Mode passt. */
.tl-card.postfach-item {
    border-left-width: 4px;
    border-left-style: solid;
}
.tl-card.postfach-item-recruiter {
    border-left-color: var(--accent-500);
    background-color: color-mix(in srgb, var(--accent-500) 5%, transparent);
}
.tl-card.postfach-item-bewerber {
    border-left-color: var(--hue-violet-ink);
    background-color: color-mix(in srgb, var(--hue-violet-ink) 6%, transparent);
}
/* Der Chip trägt die Farbe der Seite: Recruiter = Accent (TlTone.Accent),
   Bewerber = Farbkreis Violett — TlChip kennt keinen Hue-Ton, darum hier. */
.tl-card.postfach-item-bewerber .tl-chip {
    background: var(--hue-violet-bg);
    color: var(--hue-violet-ink);
    border-color: transparent;
}

/* Sanitisiertes Editor-HTML: Browser-Defaults würden unter dem letzten
   <p> Leerraum lassen und lange URLs aus der Karte laufen lassen. */
.postfach-body {
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.postfach-body p,
.postfach-body ul,
.postfach-body ol,
.postfach-body blockquote {
    margin: 0 0 0.75em;
}
.postfach-body > :last-child {
    margin-bottom: 0;
}
.postfach-body ul,
.postfach-body ol {
    padding-left: 1.5em;
}
.postfach-body blockquote {
    border-left: 3px solid var(--border-200);
    padding-left: 0.75em;
    color: var(--ink-500);
}
.postfach-body a {
    color: var(--accent-500);
}

/* ---------- Bewerbungen: Kachel-Ansicht ----------
   RecruiterBewerbungenPipeline reiht die vier Talentum-PipelineColumns
   nebeneinander. Spaltenfluss statt Zeilenumbruch: auf schmalen Fenstern
   scrollt das Board horizontal, statt die Spalten auf Briefmarkengröße
   zu quetschen — die Mindestbreite kommt aus .tl-col.

   Das Board füllt die Höhe der Arbeitsfläche bis zum Fuß (tl-fill an
   Seite, Pipeline-Stapel und Board, siehe talentum.css): die Spalten
   strecken sich auf seine Höhe, ihre Karten scrollen in der Spalte — die
   eine Zeile ist minmax(0, 1fr), sonst wüchse sie mit der längsten Spalte
   und das Board scrollte als Ganzes senkrecht. Der
   untere Innenabstand ersetzt den der Arbeitsfläche, die ihn im
   tl-fill-Modus abgibt — so liegt auch der Streifen unter den Spalten im
   Scroll-Container und nimmt einen Wisch an. Die Mindesthöhe (Kopf und
   eine Karte) gilt, wenn über dem Board kaum Platz bleibt (Telefon quer):
   dann scrollt die Seite wie gewohnt. */
.bewerbungen-pipeline {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-4);
    min-height: 220px;
}

/* Das Board ist ein Arbeitsplatz: Spalten und Karten enger als der
   Bibliotheks-Standard, damit mehr Karten ohne Scrollen sichtbar sind. */
.bewerbungen-pipeline .tl-col {
    padding: var(--space-2);
    gap: var(--space-2);
}
.bewerbungen-pipeline .tl-col__body {
    gap: var(--space-2);
}
.bewerbungen-pipeline .tl-empty--compact {
    padding: var(--space-3);
}

/* In der schmalen Spalte zählt der volle Name mehr als die eine Zeile:
   Namen dürfen umbrechen, der Stellentitel bleibt einzeilig mit Ellipse. */
.bewerbungen-pipeline .tl-card__name {
    white-space: normal;
}

/* Recruiter-Filter (RecruiterBewerbungenFilter) als eine Menüzeile:
   Suchfeld, TlActionBar und Trefferzahl in einer Flex-Reihe. Aussehen der
   Menüeinträge kommt aus der Bibliothek (.tl-actionbar in talentum.css). */
.rb-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-height: 36px;
}
.rb-filter__suche {
    width: 220px;
}
.rb-filter__menu {
    flex: 0 1 auto;
}
.rb-filter__treffer {
    margin-left: auto;
    color: var(--ink-500);
    white-space: nowrap;
}
/* Telefon: statt der Menüzeile nur „Filter (n)" (Dialog) — die Suche
   über die ganze Breite, darunter Knopf, ggf. „Zurücksetzen" und rechts
   die Trefferzahl. */
.rb-filter--schmal .rb-filter__suche {
    flex: 1 1 100%;
    width: auto;
    min-width: 0;
}

/* ---------- Recruiter-Detail: Reiter-Inhalte, Termine, Verlauf ----------
   Aufbau (TlPageLayout, TlTabs, TlDescriptionList, TlRecordNav) kommt aus
   der Bibliothek; hier nur die Listen in den Reitern. Die Termin-Liste
   (.rb-termine) teilt sich die Bewerber-Detailsicht. */

/* Seitenleiste: mehrere Angaben in einem Wert (Kontakt, Termin + Ort)
   stehen untereinander, nicht im Fluss der Zeile. */
.rb-glance__zeile {
    flex-basis: 100%;
    min-width: 0;
}

.rb-antworten,
.rb-dokumente {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}
.rb-antworten__eintrag {
    display: grid;
    gap: var(--space-1);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-100);
}
.rb-antworten__eintrag:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.rb-dokumente {
    gap: var(--space-2);
}
.rb-dokumente__eintrag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.rb-dokumente__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Dialog „Bewerbung löschen": was mitgeht, als knappe Aufzählung. */
.rb-loeschen-liste {
    margin: 0;
    padding-inline-start: var(--space-5);
    display: grid;
    gap: var(--space-1);
}

/* Sterne-Karten nebeneinander: gleiche Mindestbreite, unter 390 px volle Breite. */
.rb-bewertung {
    flex: 1 1 12rem;
    max-width: 100%;
}

.rb-termine {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}
.rb-termine__eintrag {
    display: grid;
    gap: var(--space-1);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-200);
}
.rb-termine__eintrag:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.rb-termine__kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
/* Ort kann ein langer Videolink sein — umbrechen statt die Karte auf
   390 px zu sprengen. */
.rb-termine__ort {
    overflow-wrap: anywhere;
    min-width: 0;
}
/* Wege in den Kalender (BewerbungKalenderLinks): eine Zeile, die auf dem
   Telefon umbricht — jeder Link nur als Ganzes, samt Icon. */
.rb-kalender {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    margin-top: var(--space-1);
}
.rb-kalender__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
}

/* ---------- Recruiter-Detail: Kriterien-Bewertung ----------
   Karte: Gesamtwert groß, darunter je Kriterium Name | Balken | Zahl in
   einer Zeile; unter 600 px steht der Name über Balken und Zahl. Die
   Zahl steht immer daneben — der Balken allein wäre Status nur über
   Fläche/Farbe. */
.kb-gesamt {
    margin: 0;
    color: var(--accent-500);
    font-variant-numeric: tabular-nums;
}

.kb-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}
.kb-zeile {
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) 1fr 3.5rem;
    align-items: center;
    gap: var(--space-3);
}
.kb-zeile__name {
    overflow-wrap: anywhere;
}
.kb-zeile__wert {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 599.98px) {
    .kb-zeile {
        grid-template-columns: 1fr 3.5rem;
        gap: var(--space-1) var(--space-3);
    }
    .kb-zeile__name {
        grid-column: 1 / -1;
    }
}

/* Dialog: Summe oben, darunter je Kriterium ein abgesetzter Block mit
   Schalter und (eingeschaltet) Regler. */
.kb-summe {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-200);
}
.kb-auswahl {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}
.kb-auswahl__eintrag {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-100);
    border-radius: var(--radius-md);
}
.kb-auswahl__eintrag.is-aktiv {
    border-color: var(--accent-500);
    padding-bottom: var(--space-3);
}

.rb-verlauf {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}
.rb-verlauf__eintrag {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: var(--space-3);
    align-items: start;
}
.rb-verlauf__zeit {
    color: var(--ink-500);
    padding-top: 2px;
}
.rb-verlauf__inhalt {
    display: grid;
    gap: var(--space-1);
}
.rb-verlauf__status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
@media (max-width: 600px) {
    .rb-verlauf__eintrag { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ---------- Öffentliche Stellensuche (/jobs) ----------
   Karten untereinander statt Tabelle: die Seite ist für Bewerber am
   Telefon genauso gedacht wie am Schreibtisch. Nur Tokens. */
.public-stellen-anzahl {
    margin: 0;
    color: var(--ink-500);
}
.public-stellen-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.public-stellen-titel {
    margin: 0;
    color: var(--ink-900);
}
.public-stellen-titel a {
    color: inherit;
    text-decoration: none;
}
.public-stellen-titel a:hover {
    color: var(--accent-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.public-stellen-titel a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.public-stellen-firma {
    color: var(--ink-700);
}
.public-stellen-merkmale,
.public-stellen-daten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.public-stellen-daten {
    color: var(--ink-500);
}
/* Mehrere Angaben in einer Zeile: Mittelpunkt als Trenner. */
.public-stellen-daten > span + span::before {
    content: "·";
    margin-right: var(--space-2);
}

/* ---------- Benachrichtigungscenter ----------
   Die Kennzahlen-Kacheln sind TlStatTile (talentum.css). Die Liste des
   Zeilenmenüs steht im Portal von TlMenuHost, das Gitter braucht dafür
   keine eigenen Regeln. */

/* ---------- Startseite ----------
   Kurze Listen (neueste Bewerbungen, nächste Gespräche) als echte <ul>:
   eine Zeile je Eintrag, Trennlinie dazwischen. Mit Badge steht der Text
   links und darf umbrechen, das Badge bleibt rechts oben. */
.start-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.start-liste__eintrag {
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-2);
    border-top: 1px solid var(--border-100);
}

.start-liste__eintrag:first-child {
    border-top: none;
    padding-top: 0;
}

.start-liste__eintrag--mit-badge {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
}

.start-liste__text {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Bewerber-Kachelansicht auf /bewerbungen (BewerberBewerbungenKacheln):
   ein Raster aus Karten, das sich selbst auf die Breite verteilt. Unter
   640 px eine Spalte — min(100%, …) verhindert, dass eine Karte breiter
   als der Bildschirm wird und die Seite seitlich scrollt. */
.bb-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-4);
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Die Karte füllt ihre Rasterzelle, damit eine Reihe gleich hoch ist. */
.bb-kacheln__eintrag {
    display: flex;
    min-width: 0;
}

.bb-kacheln__eintrag > .bb-karte {
    flex: 1 1 auto;
}

@media (max-width: 640px) {
    .bb-kacheln {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }
}

/* Lange Stellentitel brechen um, statt die Karte aufzuweiten. */
.bb-karte {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Die Fußzeile der Karte rutscht nach unten, damit Karten einer Reihe
   ihre Links auf einer Linie tragen. */
.bb-karte__fuss {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* ---------- E-Mail-Vorlagen: Feld-Picker, Vorschau ----------
   SerienbriefFeldPicker (Components/EmailTemplates/Components): Gruppen als
   natives <details>, je Feld ein echter <button> mit Beschriftung, Token
   und Erklärung. Die Gruppenliste scrollt in sich, damit das Panel neben
   dem Editor nicht seitenlang wird; unter 960 px steht es unter dem
   Formular und darf die ganze Länge zeigen. */
.sb-picker__gruppen {
    display: grid;
    /* minmax(0, …): lange Tokens dürfen die Spalte nicht über die
       Panelbreite drücken (im Sende-Dialog ist sie schmal). */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    max-height: 70vh;
    overflow-x: hidden;
    overflow-y: auto;
    /* Fokusrahmen der Knöpfe am Rand nicht abschneiden. */
    padding: var(--space-1);
    margin: calc(-1 * var(--space-1));
}

@media (max-width: 959.98px) {
    .sb-picker__gruppen {
        max-height: none;
        overflow: visible;
    }
}

.sb-picker__gruppe {
    border: 1px solid var(--border-100);
    border-radius: var(--radius-md);
    background: var(--surface-000);
}

.sb-picker__kopf {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-weight: 600;
    color: var(--ink-900);
    border-radius: var(--radius-md);
}

.sb-picker__kopf:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.sb-picker__anzahl {
    margin-left: auto;
    color: var(--ink-500);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.sb-picker__liste {
    list-style: none;
    margin: 0;
    padding: 0 var(--space-2) var(--space-2);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
}

.sb-picker__feld {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
    width: 100%;
    text-align: left;
    padding: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-900);
    font: inherit;
    cursor: pointer;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sb-picker__feld:hover:not(:disabled) {
    background: var(--accent-100);
}

.sb-picker__feld:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

.sb-picker__feld:disabled {
    cursor: default;
    color: var(--ink-500);
}

.sb-picker__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
}

.sb-picker__token {
    color: var(--accent-600);
    overflow-wrap: anywhere;
}

.sb-picker__beschreibung {
    color: var(--ink-500);
}

.sb-picker__beispiel {
    display: block;
    color: var(--ink-700);
}

/* Vorschau einer Vorlage mit Beispielwerten: dieselbe Textdarstellung wie
   im Postfach (.postfach-body), abgesetzt als Fläche. */
.vorlage-vorschau {
    border: 1px solid var(--border-100);
    border-radius: var(--radius-md);
    background: var(--surface-100);
    padding: var(--space-4);
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.vorlage-vorschau__betreff {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Liste der Felder in den Warnungen des Editors und der Dialoge. */
.vorlage-felder {
    margin: var(--space-1) 0 0;
    padding-left: 1.25em;
}

/* Ein Token im Fließtext (Warnungen, Pflichtfelder): Schrift wie im Picker,
   Farbe vom umgebenden Text — Bootstraps <code>-Rosa kennt die Tokens nicht. */
.vorlage-token {
    font-family: var(--font-mono);
    font-size: 0.875em;
    color: inherit;
    overflow-wrap: anywhere;
}

/* Aufklappbarer Entwurf im Status-Dialog („Nachricht anzeigen"). */
.vorlage-entwurf > summary {
    cursor: pointer;
    width: fit-content;
    color: var(--accent-600);
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.vorlage-entwurf > summary:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.vorlage-entwurf[open] > summary {
    margin-bottom: var(--space-2);
}

/* ---------- Bewerberpool (/kandidaten) ----------
   Filterzeile wie .rb-filter: Suche, Menüleiste, Trefferzahl in einer Reihe. */
.pool-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-height: 36px;
}

.pool-filter__suche {
    width: 220px;
    max-width: 100%;
}

.pool-filter__menu {
    flex: 0 1 auto;
}

.pool-filter__treffer {
    margin-left: auto;
    color: var(--ink-500);
    white-space: nowrap;
}

/* Löschdatum mit „in n Tagen" daneben, darf in schmalen Zellen umbrechen. */
.pool-loeschdatum {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

/* Bewerberpool: Name und E-Mail in einer Gitterzelle — die Adresse klein
   darunter, bei Platzmangel mit Auslassung statt einer eigenen, gekürzten
   Spalte. */
.pool-name {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    min-width: 0;
}

/* Name mit dem Badge „Neu" direkt nach dem Anlegen; bricht in schmalen
   Zellen unter den Namen. */
.pool-name__zeile {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
}

.pool-name__email {
    max-width: 100%;
    color: var(--ink-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Vorschau im Import-Dialog: die Tabelle ist so breit wie die Datei Spalten
   hat und scrollt in sich, nie der Dialog. */
.pool-vorschau {
    overflow-x: auto;
    max-width: 100%;
}

.pool-vorschau .tl-table-wrap {
    width: max-content;
    min-width: 100%;
}

.pool-vorschau th,
.pool-vorschau td {
    white-space: nowrap;
}

.pool-vorschau__feld {
    display: block;
    font-weight: 400;
    color: var(--ink-500);
}

.pool-vorschau:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Vormerkungen im Vormerken-Dialog: Titel, Status, Entfernen je Zeile. */
.pool-vormerkungen {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pool-vormerkungen > li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-1);
    border-top: 1px solid var(--border-100);
}

.pool-vormerkungen > li:first-child {
    border-top: none;
}

.pool-vormerkungen__titel {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---------- Serienbrief und Vormerkungen an der Stelle ----------
   Empfängerliste im Serienbrief-Dialog: je Art eine Zeile mit den ersten
   Namen. */
.serienbrief-empfaenger {
    display: grid;
    gap: var(--space-1);
}

.serienbrief-empfaenger__zeile {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Karte „Kandidaten" auf der Stellen-Detailseite: Name, Status und Menü in
   einer Zeile, darunter Adresse/Ort und Notiz. */
/* Karte „Bewerbungen" auf der Stellen-Detailseite: Zahl der eingereichten
   groß wie eine Kennzahl (tabellarische Ziffern), daneben ihr Wort, darunter
   die Stufen des Auswahlprozesses als Badges in einer umbrechenden Zeile. */
.stelle-bewerbungen__kennzahl {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.stelle-bewerbungen__zahl {
    font-variant-numeric: tabular-nums;
}

.stelle-bewerbungen__stufen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.stelle-kandidaten {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stelle-kandidaten__eintrag {
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-2);
    border-top: 1px solid var(--border-100);
}

.stelle-kandidaten__eintrag:first-child {
    border-top: none;
}

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

.stelle-kandidaten__name {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.stelle-kandidaten__kopf .tl-menu {
    margin-left: auto;
}

.stelle-kandidaten__details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--ink-700);
    overflow-wrap: anywhere;
}

.stelle-kandidaten__notiz {
    color: var(--ink-500);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Karte „Jobbörsen" auf der Stellen-Detailseite: je Börse Name und die
   Feed-Adresse mit ?quelle= darunter. Die Adresse bricht an jeder Stelle um —
   bei 390 px wäre sie sonst breiter als die Karte. */
.stelle-jobboersen__beispiele {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.stelle-jobboersen__beispiele li {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.stelle-jobboersen__adresse {
    font-family: var(--font-mono);
    font-size: 0.875em;
    color: var(--ink-700);
    background: var(--surface-200);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    overflow-wrap: anywhere;
}

/* Typ im Benachrichtigungscenter: Badge und Hinweis untereinander. */
.benachrichtigung-typ {
    display: grid;
    gap: var(--space-1);
    justify-items: start;
}

/* ---------- QM: Kennzahlen ----------
   Funnel als Balkenliste ohne Chart-Bibliothek: Name | Spur mit Balken |
   Zahl · Prozent. Eine Farbe (Akzent) für die eine Reihe, die Spur ist die
   hellere Stufe derselben Rampe; der Balken ist höchstens 16 px hoch, an
   der Grundlinie eckig, am Datenende gerundet. Zahl und Prozent stehen
   immer als Text daneben (Text in den Ink-Tokens, nie in der Balkenfarbe).
   Abgelehnt und Zurückgezogen — die Ausgänge — trennt eine feine Linie. */
.qm-funnel {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}
.qm-funnel__zeile {
    display: grid;
    grid-template-columns: minmax(7rem, 10rem) 1fr minmax(6.5rem, auto);
    align-items: center;
    gap: var(--space-3);
}
.qm-funnel__zeile--ausgang {
    border-top: 1px solid var(--border-100);
    padding-top: var(--space-2);
}
.qm-funnel__name {
    overflow-wrap: anywhere;
    color: var(--ink-900);
}
.qm-funnel__spur {
    display: block;
    height: 16px;
    background: var(--accent-100);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.qm-funnel__balken {
    display: block;
    height: 100%;
    width: var(--qm-anteil, 0%);
    background: var(--accent-500);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.qm-funnel__wert {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ink-700);
    white-space: nowrap;
}
@media (max-width: 599.98px) {
    .qm-funnel__zeile {
        grid-template-columns: 1fr auto;
        gap: var(--space-1) var(--space-3);
    }
    .qm-funnel__spur {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* Zahlen in den Kennzahl-Tabellen rechtsbündig mit gleich breiten Ziffern
   (Spezifität über .tl-table, dessen Kopfzellen links ausrichten). */
.tl-table .qm-zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.tl-table .qm-zahl--warnung {
    color: var(--hue-amber-ink);
    font-weight: 600;
}

/* ---------- E-Mail-Vorlagen: Versionshistorie ----------
   Aufklappbar unter dem Editor; die Zusammenfassung trägt die Größe einer
   Kartenüberschrift. */
.vorlage-historie__titel {
    cursor: pointer;
    font-weight: 600;
    color: var(--ink-900);
}
.vorlage-historie details[open] > .vorlage-historie__titel {
    margin-bottom: var(--space-3);
}

/* Die Kennzahl-Tabellen scrollen auf dem Telefon in sich, statt dass die
   Karte (tl-table-wrap schneidet ab) Spalten verschluckt. */
.tl-table-wrap.qm-tabelle {
    overflow-x: auto;
}

/* E-Mail-Vorlagen (/email-templates): Übersicht aller Anlässe, darunter
   eingerückt die Vorlagen oder „Noch keine angelegt." mit Neu-Knopf. Unter
   600 px brechen Badges und Menü um, die Einrückung schrumpft. */
.vl-anlaesse {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vl-anlass {
    padding-block: var(--space-4);
}

.vl-anlass + .vl-anlass {
    border-top: 1px solid var(--border-100);
}

.vl-anlass__kopf {
    display: grid;
    gap: var(--space-1);
}

.vl-vorlagen {
    list-style: none;
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0 0 0 var(--space-6);
}

.vl-vorlage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.vl-vorlage__meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.vl-vorlage__aktionen {
    margin-inline-start: auto;
}

.vl-leer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-inline-start: var(--space-6);
}

@media (max-width: 599px) {
    .vl-vorlagen,
    .vl-leer {
        padding-inline-start: var(--space-4);
    }
}

/* E-Mail-Vorlagen, Auswahl vor dem Formular (/email-templates/neu): „Ohne
   Vorlage" und die fünf Systemvorlagen des Anlasses als Link-Karten
   (TlCard Href), je Reihe gleich hoch. Der Auszug zeigt Tokens am Stück —
   ein langes Token darf auf dem Telefon umbrechen, statt die Karte
   aufzuschieben. */
.vl-auswahl {
    display: grid;
    gap: var(--space-3);
}

.vl-kachel {
    height: 100%;
    align-content: start;
}

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

.vl-kachel__auszug {
    padding-inline-start: var(--space-2);
    border-inline-start: 2px solid var(--border-100);
    overflow-wrap: anywhere;
}