/* ---------- 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;
}

/* 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);
}
/* „— Route berechnen" bleibt beisammen — in der schmalen Seitenleiste brach
   es sonst nach „Route" um. */
.public-firma-route {
    white-space: nowrap;
}
.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;
    /* Die Zeile ist eine Schaltfläche (TlCard OnClick → <button>): Klick
       öffnet die Nachricht im Dialog. Schrift und Breite wie eine Karte,
       nicht wie ein Knopf. */
    width: 100%;
    font: inherit;
    color: inherit;
}
/* Der Text als eine Vorschau von höchstens zwei Zeilen — der Rest steht im
   Dialog. Der ganze Text bleibt im DOM (Suche, Vorlesen), nur die Anzeige
   schneidet. */
.postfach-vorschau {
    margin: 0;
    color: var(--ink-700);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}
.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;
   im Dialog der Nachricht (PostfachNachrichtDialog) ebenso. */
.tl-card.postfach-item-bewerber .tl-chip,
.postfach-nachricht-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);
}

/* Assistent „Bewerbungen verschieben" (RecruiterMassenbewegungDialog). */
.rb-massen-anzahl {
    margin: 0;
}

/* Bestätigung: je Bewerbung eine Zeile — Name, Weg, Nachricht; auf dem
   Telefon bricht sie um, statt den Dialog aufzuschieben. */
.rb-massen-liste {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border-100);
}

.rb-massen-liste__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-3);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--border-100);
}

.rb-massen-liste__name {
    flex: 1 1 12rem;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.rb-massen-liste__weg,
.rb-massen-liste__nachricht,
.rb-massen-liste__aktion {
    color: var(--ink-700);
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
}

/* Eigene Nachricht im Schritt: der Feld-Picker steht unter dem Editor und
   scrollt in sich, statt den Schritt seitenlang zu machen. */
.rb-inline-nachricht .sb-picker__gruppen {
    max-height: 16rem;
    overflow-x: hidden;
    overflow-y: auto;
}

/* 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;
}
/* Antwort des Bewerbers auf einen Termin (BewerberGespraechstermine und — nur
   lesend — RecruiterGespraechstermine): Chip und Zeitpunkt in einer Zeile,
   darunter der Kommentar einer Absage als Zitat und (nur beim Bewerber) die
   Knöpfe — auf dem Telefon untereinander über die volle Breite. */
.rb-termine__antwort {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-2);
    min-width: 0;
}
.rb-termine__antwort-stand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
}
.rb-termine__antwort-kommentar {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--border-200);
    border-radius: var(--radius-sm);
    background: var(--surface-200);
    color: var(--ink-700);
    min-width: 0;
}
/* Kommentar ist Klartext: Zeilenumbrüche bleiben, lange Wörter brechen. */
.rb-termine__antwort-text {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
    min-width: 0;
}
.rb-termine__antwort-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
@media (max-width: 599.98px) {
    .rb-termine__antwort-knoepfe > .tl-btn {
        flex: 1 1 100%;
    }
}
/* Absage durch das Unternehmen (RecruiterGespraechstermine): der Satz
   „Abgesagt am … von …" — die Adresse bricht auf dem Telefon um. */
.rb-termine__absage {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Häkchen „Anstehende Gesprächstermine absagen" im Status-Dialog (Ziel
   „Abgelehnt"): darunter die Termine, eingerückt unter den Text des
   Häkchens, dann der Satz zum Kalender des Bewerbers. Ein langer Ort
   (Videolink) bricht um. */
.rb-abzusagen {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}
.rb-abzusagen__liste {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0 0 0 var(--space-5);
    list-style: none;
    min-width: 0;
}
.rb-abzusagen__termin {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--ink-700);
    overflow-wrap: anywhere;
    min-width: 0;
}
.rb-abzusagen__termin > .tl-icon {
    flex: none;
}
/* Ein Termin, den der Bewerber selbst abgesagt hat: geht ohne Mail mit
   (Ausbau TV2) — der Zusatz in der Liste ist leiser als der Termin. */
.rb-abzusagen__ohne-mail {
    color: var(--ink-500);
}
/* Dialog „Verlauf…" eines Gesprächstermins (RecruiterGespraechsterminVerlaufDialog):
   der Ort über der Zeitleiste und je Eintrag die Zeile „An den Bewerber: …"
   — ein langer Videolink bzw. Betreff bricht um, das Icon bleibt oben. */
.rb-termin-verlauf__ort,
.rb-termin-verlauf__nachricht {
    min-width: 0;
    overflow-wrap: anywhere;
}
.rb-termin-verlauf__ort > .tl-icon,
.rb-termin-verlauf__nachricht > .tl-icon {
    flex: none;
    margin-top: 1px;
}

/* ---------- 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);
}
/* Akteur „Automatisierung" (automatischer Auslöser): der Chip statt des Namens. */
.rb-verlauf__akteur {
    display: flex;
}
@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);
}

/* ---------- Stellen (/stellen): Karte ----------
   Gleich hoch in ihrer Rasterzeile; die Resthöhe bekommt der Inhalt, nicht
   der Fuß — sonst verteilte das Raster der Karte sie auf beide Zeilen, und
   „Details" stand in einer kurzen Karte höher als in der Nachbarkarte. */
.stellen-karte {
    height: 100%;
    grid-template-rows: 1fr auto;
}

/* ---------- 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: der Link zur Anleitung steht
   in der Spalte der Karte nur so breit wie sein Text, Icon und Text in einer
   Reihe. */
.stelle-jobboersen__anleitung {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    align-self: flex-start;
    text-align: left;
}

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

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

.stelle-jobboersen__zeile {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.stelle-jobboersen__adresse {
    flex: 1 1 auto;
    min-width: 0;
    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;
}

/* ?quelle= und &format=rss im Fließtext: Schrift wie die Adressen, Farbe vom
   umgebenden Text — Bootstraps <code>-Rosa passt nicht. Kurz genug, um nie
   umzubrechen (der Browser trennte sonst hinter dem „?"). */
.stelle-jobboersen__code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    color: inherit;
    white-space: nowrap;
}

/* 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 über tl-table__num aus der
   Bibliothek; die Warnung (älter als 30 Tage) zusätzlich in Bernstein. */
.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);
}

/* 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-5);
}

.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;
}

/* --- Automatisierung (Designer, Übersicht, Ausführen-Dialog) --------------
 * Der Designer: Canvas (.auto-canvas — die Bibliothek sequential-workflow-
 * designer, unten an die Tokens angeglichen) und Leiste (.auto-leiste) mit den
 * Editoren der Schritte. Das Diagramm eines Laufs nutzt die Bibliotheksgruppe
 * „Ablauf" (.tl-flow*). */

/* Fehlerliste oben auf der Seite: je Hinweis der Schritt (Link) und der Text. */
.auto-pruefliste {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-1) 0 0;
    padding-inline-start: var(--space-5);
}

/* Hinweise der Prüfung an ihrem Schritt: Icon und Text, nie nur Farbe. */
.auto-hinweise {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.auto-hinweise__eintrag {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 13px;
    line-height: 18px;
    overflow-wrap: anywhere;
}

.auto-hinweise__eintrag .tl-icon { flex: none; margin-top: 1px; }
.auto-hinweise__eintrag--fehler { color: var(--state-rejected-ink); }
.auto-hinweise__eintrag--warnung { color: var(--state-review-ink); }

/* Eine Regel: Eingabe, Vergleich, Wert und Entfernen nebeneinander; ist die
   Regel schmaler als 560 px (Spalte einer Verzweigung, Telefon), steht die
   Eingabe neben dem Entfernen-Knopf und Vergleich und Wert darunter. */
.auto-regel {
    min-width: 0;
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--border-100);
    border-radius: var(--radius-md);
    background: var(--surface-000);
}

/* Größen-Container an der inneren Fläche (ein fieldset taugt dafür nicht). */
.auto-regel__inhalt {
    container-type: inline-size;
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.auto-regel__felder {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr) auto;
    grid-template-areas: "eingabe vergleich wert entfernen";
    align-items: start;
    gap: var(--space-3);
}

.auto-regel__eingabe { grid-area: eingabe; min-width: 0; }
.auto-regel__vergleich { grid-area: vergleich; min-width: 0; }
.auto-regel__wert { grid-area: wert; min-width: 0; }

/* Der Knopf steht auf Höhe der Felder: unter deren Beschriftung (Zeilenhöhe
   16 px in Sm) und dem Abstand des Felds (space-1). Feld und Knopf sind
   beide 28 px hoch (Size="Sm"). */
.auto-regel__entfernen {
    grid-area: entfernen;
    padding-top: calc(var(--space-4) + var(--space-1));
}

@container (max-width: 559.98px) {
    .auto-regel__felder {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "eingabe entfernen"
            "vergleich vergleich"
            "wert wert";
    }
}

/* Designer: Canvas und Leiste. Ab 1024 px nebeneinander (die Leiste 320–380 px),
   darunter untereinander. Der Canvas klebt neben einer langen Leiste oben
   (sticky im Inhalt, ohne z-index — die Spalten überlappen nicht). */
.auto-designer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
}

@media (min-width: 1024px) {
    .auto-designer {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    }

    .auto-canvas-bereich {
        position: sticky;
        top: calc(var(--tl-bar-height) + var(--space-4));
    }
}

.auto-canvas-bereich {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.auto-canvas-bereich__kopf {
    display: grid;
    gap: var(--space-1);
}

.auto-canvas-bereich__titel {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--ink-900);
}

.auto-canvas-bereich__icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background: var(--accent-100);
    color: var(--accent-text);
}

.auto-canvas-bereich__hilfe {
    margin: 0;
    color: var(--ink-700);
}

/* Der Platzhalter: feste Höhe, der Canvas scrollt und zoomt in sich. */
.auto-canvas {
    position: relative;
    height: 420px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-200);
    border-radius: var(--radius-md);
    background: var(--surface-000);
}

@media (min-width: 1024px) {
    .auto-canvas {
        height: max(420px, min(70vh, 720px));
    }
}

/* Fokusring nur, wenn der Fokus mit der Tastatur kam — nach einem Klick in den
   Canvas setzt das Seitenmodul den Fokus selbst (data-zeiger), ohne Ring. */
.auto-canvas:focus-visible:not([data-zeiger]) {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Die Bibliothek, angeglichen an die Tokens (hell und dunkel über die Tokens;
   ihr eigenes Theme light/dark wechselt das Seitenmodul mit). Gleiche
   Spezifität wie ihre Regeln, app.css lädt danach. */
.auto-canvas .sqd-designer,
.sqd-context-menu,
.sqd-drag {
    font-family: var(--font-sans);
}

.auto-canvas .sqd-designer.sqd-theme-light,
.auto-canvas .sqd-designer.sqd-theme-dark {
    background: var(--surface-000);
}

.auto-canvas .sqd-line-grid-path,
.auto-canvas .sqd-theme-light .sqd-line-grid-path {
    stroke: var(--border-100);
}

.auto-canvas .sqd-toolbox,
.auto-canvas .sqd-control-bar {
    border: 1px solid var(--border-100);
    border-radius: var(--radius-md);
    background: var(--surface-100);
    box-shadow: var(--shadow-card);
}

.auto-canvas .sqd-toolbox-header-title {
    color: var(--ink-900);
}

.auto-canvas .sqd-toolbox-filter-input {
    border: 1px solid var(--border-200);
    border-radius: var(--radius-sm);
    background: var(--surface-000);
    color: var(--ink-900);
}

.auto-canvas .sqd-toolbox-filter-input:focus {
    border-color: var(--accent-500);
}

.auto-canvas .sqd-toolbox-group-title {
    border-radius: var(--radius-sm);
    background: var(--surface-200);
    color: var(--ink-700);
}

/* Ton je Schrittart — Karte der Leiste, Knoten und Baustein des Canvas aus einer
   Quelle (AutomatisierungToene), aus dem Farbkreis von Talentum (nach Kategorie,
   nie nach Status): Bedingung Teal, „Status setzen" Grün, „Bewerber bewerten (KI)"
   Violett, „Bewerbung belassen" neutral, der Auslöser der Akzent der Marke.
   Warnung und Fehler der Prüfung überlagern den Ton — Bernstein und Rot gehören
   ihnen allein. Die Klassen der Bibliothek (sqd-type-*) ohne .auto-canvas davor:
   der Schatten beim Ziehen hängt am body. */
.auto-ton--ausloeser { --auto-ton-bg: var(--accent-100); --auto-ton-ink: var(--accent-text); --auto-ton-rand: var(--accent-500); }
.auto-ton--bedingung, .sqd-type-bedingung { --auto-ton-bg: var(--hue-teal-bg); --auto-ton-ink: var(--hue-teal-ink); }
.auto-ton--status-setzen, .sqd-type-status-setzen { --auto-ton-bg: var(--hue-green-bg); --auto-ton-ink: var(--hue-green-ink); }
.auto-ton--ki-bewerten, .sqd-type-ki-bewerten { --auto-ton-bg: var(--hue-violet-bg); --auto-ton-ink: var(--hue-violet-ink); }
.auto-ton--belassen, .sqd-type-belassen { --auto-ton-bg: var(--state-new-bg); --auto-ton-ink: var(--state-new-ink); }
.auto-ton--warnung, .auto-canvas__schritt--warnung { --auto-ton-bg: var(--state-review-bg); --auto-ton-ink: var(--state-review-ink); --auto-ton-rand: var(--state-review-ink); }
.auto-ton--fehler, .auto-canvas__schritt--fehler { --auto-ton-bg: var(--state-rejected-bg); --auto-ton-ink: var(--danger-500); --auto-ton-rand: var(--danger-500); }

.auto-canvas .sqd-toolbox-item {
    border: 1px solid var(--border-200);
    border-radius: var(--radius-sm);
    background: var(--surface-000);
    color: var(--ink-900);
    box-shadow: none;
}

/* Die Namen der Bausteine brechen um, statt abgeschnitten zu werden
   („Bewerber bewerten (KI)" passt nicht in die 130 px der Werkzeugleiste). */
.auto-canvas .sqd-toolbox-item-text {
    white-space: normal;
}

/* Der Baustein trägt sein Icon auf der Fläche seines Tons — wie das Icon der Karte. */
.auto-canvas .sqd-toolbox-item-icon {
    box-sizing: border-box;
    padding: 2px;
    border-radius: var(--radius-sm);
    background: var(--auto-ton-bg, var(--surface-200));
}

.auto-canvas .sqd-toolbox-item:hover {
    border-color: var(--accent-500);
    background: var(--surface-000);
}

.auto-canvas .sqd-control-bar-button {
    border: 1px solid var(--border-200);
    border-radius: var(--radius-sm);
    background: var(--surface-000);
}

.auto-canvas .sqd-control-bar-button:hover {
    border-color: var(--accent-500);
    background: var(--surface-000);
}

.auto-canvas .sqd-control-bar-button .sqd-icon-path {
    fill: var(--ink-900);
}

.auto-canvas .sqd-control-bar-button.sqd-delete .sqd-icon-path {
    fill: var(--danger-500);
}

/* Linien, Ein- und Ausgänge, Regionen der Verzweigung. */
.auto-canvas .sqd-join,
.sqd-drag .sqd-join {
    stroke: var(--border-200);
}

.auto-canvas .sqd-step-task .sqd-input,
.auto-canvas .sqd-step-switch > g > .sqd-input {
    fill: var(--surface-000);
    stroke: var(--border-200);
}

.auto-canvas .sqd-step-task .sqd-output {
    fill: var(--border-200);
}

.auto-canvas .sqd-region {
    stroke: var(--border-200);
}

.auto-canvas .sqd-region.sqd-selected {
    stroke: var(--accent-500);
}

/* Aktionen (Kasten) und Bedingungen (Beschriftung oben, Zweige darunter): Fläche
   und Rand im Ton der Art (Variablen aus dem Ton-Block oben; .sqd-drag ist der
   Schatten beim Ziehen, er liegt außerhalb von .auto-canvas). */
.auto-canvas .sqd-step-task .sqd-step-task-rect,
.sqd-drag .sqd-step-task .sqd-step-task-rect {
    fill: var(--auto-ton-bg, var(--surface-100));
    stroke: var(--auto-ton-ink, var(--border-200));
    filter: none;
}

.auto-canvas .sqd-step-task .sqd-step-task-text,
.sqd-drag .sqd-step-task .sqd-step-task-text {
    fill: var(--ink-900);
}

.auto-canvas .sqd-step-switch > .sqd-label-primary > .sqd-label-rect,
.sqd-drag .sqd-step-switch > .sqd-label-primary > .sqd-label-rect {
    fill: var(--auto-ton-bg, var(--surface-100));
    stroke: var(--auto-ton-ink, var(--border-200));
    stroke-width: 1;
}

.auto-canvas .sqd-step-switch > .sqd-label-primary > .sqd-label-text,
.sqd-drag .sqd-step-switch > .sqd-label-primary > .sqd-label-text {
    fill: var(--auto-ton-ink, var(--ink-900));
}

.auto-canvas .sqd-step-switch > .sqd-label-secondary > .sqd-label-rect {
    fill: var(--surface-200);
}

.auto-canvas .sqd-step-switch > .sqd-label-secondary > .sqd-label-text {
    fill: var(--ink-900);
}

/* Warnung und Fehler der Prüfung: Fläche und Rand aus dem Ton-Block, der Rand
   dicker (der Fehler dazu mit dem roten Zeichen der Bibliothek — nie nur Farbe). */
.auto-canvas .sqd-step-task.auto-canvas__schritt--warnung > .sqd-step-task-rect,
.auto-canvas .sqd-step-task.auto-canvas__schritt--fehler > .sqd-step-task-rect,
.auto-canvas .sqd-step-switch.auto-canvas__schritt--warnung > .sqd-label-primary > .sqd-label-rect,
.auto-canvas .sqd-step-switch.auto-canvas__schritt--fehler > .sqd-label-primary > .sqd-label-rect {
    stroke-width: 2;
}

/* Die Auswahl gewinnt über den Ton (der Fehler bleibt am roten Zeichen erkennbar). */
.auto-canvas .sqd-step-task .sqd-step-task-rect.sqd-selected {
    stroke: var(--accent-500);
    stroke-width: 3;
}

.auto-canvas .sqd-validation-error {
    fill: var(--danger-500);
}

.auto-canvas .sqd-validation-error-icon-path {
    fill: var(--on-accent);
}

/* Start und Ende des Ablaufs, die Ablagestellen beim Ziehen. */
.auto-canvas .sqd-root-start-stop-circle {
    fill: var(--accent-500);
}

.auto-canvas .sqd-root-start-stop-icon {
    fill: var(--on-accent);
}

.auto-canvas .sqd-placeholder .sqd-placeholder-rect {
    fill: var(--surface-200);
    stroke: var(--accent-500);
}

.auto-canvas .sqd-placeholder.sqd-hover .sqd-placeholder-rect {
    fill: var(--accent-500);
}

.auto-canvas .sqd-placeholder-icon-path {
    fill: var(--ink-900);
}

.auto-canvas .sqd-placeholder.sqd-hover .sqd-placeholder-icon-path {
    fill: var(--on-accent);
}

/* Kontextmenü (hängt am body). */
.sqd-context-menu.sqd-theme-light,
.sqd-context-menu.sqd-theme-dark {
    border: 1px solid var(--border-100);
    border-radius: var(--radius-md);
    background: var(--surface-000);
    box-shadow: var(--shadow-overlay);
}

.sqd-context-menu .sqd-context-menu-group {
    color: var(--ink-500);
}

.sqd-context-menu .sqd-context-menu-item {
    border-radius: var(--radius-sm);
    color: var(--ink-900);
}

.sqd-context-menu .sqd-context-menu-item:hover {
    background: var(--surface-200);
}

/* Die Leiste: „Schritt wählen" oben, die Karte des gewählten Schritts bzw. des
   Auslösers mit Kopf (Icon im Ton, Titel, Zusammenfassung, Hinweise, Menü),
   Editor und Einfügestellen. */
.auto-leiste {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.auto-leiste__wahl {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2);
}

.auto-leiste__wahlfeld {
    flex: 1 1 12rem;
    min-width: 0;
}

/* Rand links und Icon im Ton des Schritts (Ton-Block oben) — derselbe wie am Knoten. */
.auto-leiste__karte {
    border-inline-start: 4px solid var(--auto-ton-rand, var(--auto-ton-ink, var(--border-200)));
}

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

.auto-leiste__karte.auto-ton--fehler {
    border-color: var(--danger-500);
}

/* Icon | Titel, Zusammenfassung, Hinweise | Menü — das Menü bleibt oben rechts. */
.auto-leiste__kopf {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    min-width: 0;
}

.auto-leiste__icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--auto-ton-bg, var(--surface-200));
    color: var(--auto-ton-ink, var(--ink-700));
}

.auto-leiste__titel {
    display: grid;
    justify-items: start;
    gap: 2px;
    min-width: 0;
}

.auto-leiste__ueberschrift {
    margin: 0;
    color: var(--ink-900);
    overflow-wrap: anywhere;
}

.auto-leiste__zusammenfassung {
    margin: 0;
    color: var(--ink-700);
    overflow-wrap: anywhere;
}

.auto-leiste__status {
    margin-top: var(--space-1);
}

.auto-leiste__einfuegen {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-100);
}

.auto-leiste__einfuegen-titel {
    margin: 0;
    color: var(--ink-700);
}

.auto-leiste__einfuegestellen {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.auto-leiste__einfuegestelle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.auto-leiste__einfuegestelle-text {
    min-width: 0;
    color: var(--ink-700);
    overflow-wrap: anywhere;
}

/* Letzte Läufe: fünf Spalten, die letzte der Ergebnisbalken — passt bei
   1280 px, auf dem Telefon scrollt die Tabelle in sich. Darunter der Link
   „Alle Läufe". */
.auto-laeufe {
    min-width: 0;
    overflow-x: auto;
}

.auto-laeufe .tl-table-wrap {
    width: max-content;
    min-width: 100%;
}

.auto-laeufe td,
.auto-laeufe th {
    white-space: nowrap;
}

.auto-laeufe__alle {
    margin: 0;
}

/* Der Ergebnisbalken hat in der Karte eine feste Breite — die Zellen brechen
   nicht um (nowrap), die Legende darin schon (zwei Zeilen statt einer langen). */
.auto-laeufe__ergebnis .tl-segment-bar {
    width: 18rem;
}

/* Liste der Läufe: die Adresse in „Von" bricht um (keine Leerzeichen). */
.auto-lauf-von {
    overflow-wrap: anywhere;
}

/* Übersicht: der Ergebnisbalken unter dem Zeitpunkt des letzten Laufs. */
.auto-lauf-ergebnis {
    margin-top: var(--space-1);
}

/* Detail eines Laufs: die Kennzahlen — sechs Kacheln, so viele nebeneinander,
   wie passen (bei 390 px zwei), darunter der Ergebnisbalken in voller Breite. */
.auto-lauf-kennzahlen {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.auto-lauf-kennzahlen__kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: var(--space-3);
}

/* Der Weg der gewählten Bewerbung über dem Diagramm: Icon, Satz (bricht um),
   „Hervorhebung aufheben". Ziel des Sprungs — fokussierbar ohne Tab-Halt. */
.auto-lauf-weg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--accent-500);
    border-radius: var(--radius-md);
    background: var(--accent-100);
    color: var(--accent-text);
    scroll-margin-top: calc(var(--tl-bar-height) + var(--space-3));
}

.auto-lauf-weg:focus-visible,
.auto-lauf-filter:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.auto-lauf-weg__text {
    flex: 1 1 16rem;
    min-width: 0;
    margin: 0;
    color: var(--ink-900);
    overflow-wrap: anywhere;
}

/* Der Stationsfilter über der Tabelle (Chip mit „×"). */
.auto-lauf-filter {
    justify-self: start;
    max-width: 100%;
    border-radius: var(--radius-pill);
    scroll-margin-top: calc(var(--tl-bar-height) + var(--space-3));
}

/* Die im Diagramm gezeigte Zeile (dazu das Badge „Im Ablauf" am Namen). */
.auto-lauf-zeile--markiert > td {
    background: var(--accent-100);
}

.auto-lauf-markiert {
    margin-inline-start: var(--space-2);
}

/* Ausführen-Dialog: der Satz mit den Zahlen. */
.auto-plan-satz {
    margin: 0;
}

/* Diagramm eines Laufs: nach dem letzten Schritt kommt nichts mehr — das
   leere Verbindungsstück dahinter zeichnete eine Linie ins Leere (Befund der
   Design-Durchsicht 2026-10-24). Nur auf oberster Ebene: in einer Verzweigung
   führt es zur Querlinie, und ein leerer Ablauf trägt dort seinen Text. */
.auto-lauf-diagramm > .tl-flow__connector--leer:last-child:not(.tl-flow__connector--text) {
    display: none;
}

/* Endet der Ablauf mit einer Bedingung, fällt auch der Stamm unter ihrer
   Querlinie weg — er führte zu eben diesem Verbindungsstück. */
.auto-lauf-diagramm > .tl-flow__item:has(+ .tl-flow__connector--leer:last-child:not(.tl-flow__connector--text)) > .tl-flow-step__branch > .tl-flow-branch::after {
    display: none;
}

/* ===== Aufträge des automatischen Auslösers (A12) =========================
   Hinweis an der Bewerbung (RecruiterAutomatisierungAuftrag, ein dichter
   TlAlert unter dem Seitenkopf) und die liegengebliebenen Aufträge in der Karte
   „Automatisierung" an der Stelle. */

/* Hinweis: Text, darunter der Grund, warum „Erneut versuchen" fehlt, und die
   Knöpfe. Lange Fehlertexte (Typ: Meldung ohne Leerzeichen) brechen um. */
.rb-auftrag__text,
.rb-auftrag__grund {
    margin: 0;
    overflow-wrap: anywhere;
}

.rb-auftrag__grund {
    font-size: 13px;
    line-height: 18px;
}

.rb-auftrag__aktionen {
    margin-top: var(--space-2);
}

/* Karte an der Stelle: die Zählerzeile unter dem Satz, darunter die Liste —
   zwei Spalten (Bewerber mit Stand, Aktion), damit sie auf dem Telefon ohne
   seitliches Scrollen in die Karte passt; der Knopf bleibt einzeilig. */
.auto-auftraege__zeile,
.auto-auftraege__weitere {
    margin: 0;
}

.auto-auftraege {
    min-width: 0;
    overflow-x: auto;
}

.auto-auftraege td {
    vertical-align: top;
}

/* Wörter nicht mitten im Wort trennen (das tat „anywhere": die Spalte wurde so
   schmal, dass „Fehlgeschlagen" brach) — Silbentrennung, wo der Browser sie kann;
   ein sehr langes Wort (Typ einer Exception) lässt die Tabelle in sich scrollen. */
.auto-auftraege__stand {
    display: block;
    color: var(--ink-700);
    font-size: 13px;
    line-height: 18px;
    overflow-wrap: break-word;
    hyphens: auto;
}

.auto-auftraege__aktion {
    width: 1%;
    white-space: nowrap;
}