/* Kandidatensuche - Layout und Hausfarben von Amadeus Fire. */

:root {
    --af-violet: #382060;
    --af-coral: #FF6056;
    --af-grey: #97999B;
    --af-surface: #F6F6F6;
    --af-border: #E0E0E0;
    --af-footer-height: 3.6rem;
    --af-appbar-height: 48px;
}

html,
body {
    margin: 0;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background-color: var(--af-surface);
}

/* --- Kopfzeile --- */

.af-logo {
    height: 22px;
    margin-right: 0.75rem;
}

.af-app-title {
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* --- Seiteninhalt --- */

/* Nutzt Breite und Hoehe des Fensters aus: die festen Bloecke behalten ihre Hoehe,
   die Trefferliste nimmt den Rest ein und scrollt selbst. Reicht die Hoehe fuer die
   Suchmaske nicht mehr, scrollt ersatzweise der ganze Bereich. */
.af-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--af-appbar-height) - var(--af-footer-height));
    /* dvh beruecksichtigt die ein- und ausfahrende Adressleiste mobiler Browser.
       Die vh-Zeile darueber bleibt als Rueckfall fuer aeltere Browser stehen. */
    height: calc(100dvh - var(--af-appbar-height) - var(--af-footer-height));
    overflow-y: auto;
    padding: 1rem 1.25rem 0.75rem;
}

/* Die festen Bloecke der Maske behalten ihre natuerliche Hoehe. */
.af-suchkarte,
.af-alert {
    flex: 0 0 auto;
}

.af-result-area {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* Reicht die Fensterhoehe nicht, scrollt der Inhaltsbereich -- besser als eine
       Trefferliste mit fuenf sichtbaren Zeilen. */
    min-height: 24rem;
}


.af-page-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--af-violet);
    margin: 0.25rem 0 0.75rem;
}

.af-alert {
    margin-bottom: 0.75rem;
}

/* --- Suchkarte --- */

.af-suchkarte {
    margin-top: 0.9rem;
    padding: 1rem;
    background-color: #FFFFFF;
    border: 1px solid var(--af-border);
    border-radius: 4px;
}

.af-suchkarte__titel {
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.af-suchkarte__zeile {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.af-suchkarte__auswahl {
    flex: 1 1 380px;
    min-width: 260px;
}

.af-suchkarte__services {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--af-border);
    border-radius: 4px;
}

.af-suchkarte__services-titel {
    margin-right: 0.5rem;
    color: var(--af-text-muted, #5F6368);
}

.af-suchkarte__auswahlinfo {
    margin-top: 0.75rem;
}

.af-suchkarte__aktionen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.af-suchkarte__spacer {
    flex: 1 1 auto;
}

/* --- Filtermaske: Gruppenspalten wie im Zielbild --- */

.af-filter-panel {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.af-filter-group {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--af-border);
    border-radius: 4px;
}

/* Wie im Zielbild: farbige Kapitaelchen mit Linie darunter, nicht als gefuellter Balken. */
.af-filter-group__title {
    margin: 0 0.75rem;
    padding: 0.6rem 0 0.35rem;
    color: var(--af-violet);
    border-bottom: 2px solid var(--af-violet);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.af-filter-group__fields {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem;
}

/* Beschriftetes Feld mit eigener Ueberschrift, z.B. der Mindestscore. */
.af-range-group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.af-range-group__caption {
    font-size: 0.7rem;
    color: var(--af-grey);
    padding-left: 0.15rem;
}

/* Gesperrte Platzhalterfelder: sichtbar, aber klar als noch-nicht erkennbar. */
.af-platzhalter {
    opacity: 0.55;
}

/* Zwei Zahlenfelder nebeneinander fuer "von / bis". */
.af-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

/* Die Bewerbernummer steht, bis Namen aus FireFlow kommen. */
.af-nummer {
    font-variant-numeric: tabular-nums;
    color: var(--af-grey);
}

/* Beide Kennungen untereinander, kompakt. */
.af-kennungen {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/* Nummer und Kopierknopf in einer Zeile, ohne die Zeilenhoehe zu sprengen. */
.af-nummer-zelle {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.af-kopieren {
    padding: 2px;
}

/* Hinweis unter einem einzelnen Feld, z.B. beim Umkreis. */
.af-feld-hinweis {
    display: block;
    color: var(--af-grey);
    line-height: 1.25;
}

/* Die verstrichene Zeit im Ladebild, dezent unter dem Hinweis. */
.af-splash__dauer {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--af-grey);
    min-height: 1.1em;
}

/* --- Anmeldung --- */

.af-anmeldung {
    padding: 1.5rem;
}

.af-anmeldung__fehler {
    margin-bottom: 1rem;
}

.af-benutzer {
    margin-right: 0.25rem;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22rem;
}

/* --- Anfrage --- */

/* Die Leiste ueber der Maske: was gesucht wird, und der Weg in den Dialog. */
.af-anfrage {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--af-border);
    border-left: 4px solid var(--af-violet);
    border-radius: 4px;
    background: #FFFFFF;
}

.af-anfrage__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.af-anfrage__position {
    color: var(--af-violet);
}

/* Die zusaetzlichen Zielpositionen unter der fuehrenden. Gedeckt, weil sie eine Ergaenzung sind
   und nicht die Ueberschrift -- aber lesbar, sonst waere die laengere Trefferliste unerklaerlich. */
.af-anfrage__weitere {
    display: block;
    color: var(--af-text-muted, #6B6B6B);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 32rem;
}

.af-erklaerung {
    color: #4a4a4a;
}

.af-optional {
    color: var(--af-grey);
    font-weight: 400;
}

/* Die erkannten Begriffe ueber der Trefferliste. */
.af-erkannt {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.6rem;
}

.af-erkannt__titel {
    color: var(--af-grey);
    margin-right: 0.35rem;
}

.af-filter-hinweis {
    display: block;
    flex: 0 0 auto;
    margin-top: 0.4rem;
    color: var(--af-grey);
}

/* --- Aktionsleiste --- */

.af-action-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background-color: #FAF9FC;
    border-top: 1px solid var(--af-border);
}

.af-action-bar__search {
    flex: 0 1 320px;
}

.af-action-bar__spacer {
    flex: 1 1 auto;
}

/* Die gespeicherten Suchanfragen: ein Knopf, kein Formular. Er traegt den Namen der geladenen
   Suchanfrage und darf deshalb schmal werden, ohne den Text zu verlieren. */
.af-suchanfragen {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.af-suchanfragen__knopf {
    max-width: 16rem;
    min-width: 0;
    text-transform: none;
    letter-spacing: normal;
}

/* Nur der Text wird gekuerzt. Das Label von MudBlazor bleibt unangetastet: es ordnet Symbol,
   Text und Pfeil nebeneinander an, und ein display darauf zerlegt den Knopf. */
.af-suchanfragen__text {
    display: block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Mehrere Zielpositionen: Legende und Abzeichen ----------------------------------------
   Fuenf Farben, dazu immer die Nummer. Farbe allein traegt die Zuordnung nicht -- bei
   Rot-Gruen-Schwaeche und im Ausdruck bliebe sonst nichts uebrig. Die Farbtoene sind bewusst
   gedeckt: sie ordnen zu, sie bewerten nicht. */
.af-pos--0 { --af-pos-farbe: #4A2E8F; }
.af-pos--1 { --af-pos-farbe: #0F6F58; }
.af-pos--2 { --af-pos-farbe: #A8560A; }
.af-pos--3 { --af-pos-farbe: #1B5E9B; }
.af-pos--4 { --af-pos-farbe: #8C2352; }

.af-pos-abzeichen {
    display: inline-flex;
    gap: 0.2rem;
    vertical-align: middle;
}

.af-pos-abzeichen__nr {
    display: inline-grid;
    place-items: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.2rem;
    border-radius: 0.3rem;
    background-color: var(--af-pos-farbe, #4A2E8F);
    color: #FFFFFF;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.af-pos-spalte {
    width: 1%;
    white-space: nowrap;
}

.af-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 0.5rem 0.1rem 0.7rem;
}

.af-legende__titel {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--af-text-muted, #6B6B6B);
}

.af-legende__eintrag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem 0.2rem 0.3rem;
    border: 1px solid var(--af-pos-farbe, #4A2E8F);
    border-radius: 999px;
    font-size: 0.8rem;
    max-width: 22rem;
    min-width: 0;
}

.af-legende__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.af-legende__zahl {
    color: var(--af-text-muted, #6B6B6B);
    font-variant-numeric: tabular-nums;
}

.af-legende__weg {
    border: 0;
    background: none;
    padding: 0 0.1rem;
    margin-left: 0.1rem;
    cursor: pointer;
    color: var(--af-text-muted, #6B6B6B);
    font-size: 1rem;
    line-height: 1;
}

.af-legende__weg:hover:not(:disabled) { color: var(--af-pos-farbe, #4A2E8F); }
.af-legende__weg:disabled { opacity: 0.4; cursor: not-allowed; }

.af-legende__dazu {
    border: 1px dashed var(--af-border);
    background: none;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--af-primary, #4A2E8F);
}

.af-legende__dazu:hover:not(:disabled) { border-style: solid; }
.af-legende__dazu:disabled { opacity: 0.4; cursor: not-allowed; }

.af-legende__grenze {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--af-text-muted, #6B6B6B);
}

.af-legende__gruppe {
    display: block;
    padding: 0.5rem 1rem 0.2rem;
    color: var(--af-text-muted, #6B6B6B);
}

/* Der Hinweis, dass die Filter vom gespeicherten Stand abweichen. Kein Rot: es ist kein Fehler,
   sondern eine Feststellung. */
.af-suchanfragen__geaendert {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--af-text-muted, #6B6B6B);
    white-space: nowrap;
}

.af-suchanfragen__gruppe {
    display: block;
    padding: 0.5rem 1rem 0.2rem;
    color: var(--af-text-muted, #6B6B6B);
}

/* Verwalten: je Zeile ein Name und zwei Knoepfe, im Umbenennen- oder Loeschfall mehr. */
.af-verwalten {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.af-verwalten__zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.15rem 0;
    border-bottom: 1px solid var(--af-border);
}

.af-verwalten__zeile:last-child {
    border-bottom: 0;
}

.af-verwalten__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}

.af-verwalten__feld {
    flex: 1 1 auto;
    min-width: 0;
}

.af-suchkarte__spinner {
    margin-right: 0.5rem;
}

/* --- Eintraege der Auswahlliste --- */

.af-eintrag {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.af-eintrag__symbol {
    margin-top: 0.15rem;
    color: var(--af-primary, #E4003A);
}

/* Name und Hinweis stehen untereinander - sonst kleben sie aneinander. */
.af-eintrag__name {
    display: block;
    line-height: 1.3;
}

.af-eintrag__hinweis {
    display: block;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--af-text-muted, #5F6368);
}

.af-eintrag__leer {
    padding: 0.5rem 0.75rem;
}

/* --- Trefferliste --- */

.af-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0.4rem 0;
    color: var(--af-grey);
}

.af-result-header__ansicht {
    flex: 0 0 auto;
}

.af-toggle-icon {
    margin-right: 0.3rem;
}

/* Die Tabelle nimmt den Restplatz des Ergebnisbereichs ein und scrollt selbst.
   flex und min-height sind hier kein Feinschliff, sondern Pflicht: MudTable setzt
   seinem Scrollcontainer height:100%, und ohne eine bestimmte Hoehe am Wurzelelement
   loest sich das zu "so hoch wie der Inhalt" auf. Dann ist der Scrollcontainer
   gleichzeitig der Scroller und waechst mit dem Inhalt -- der Virtualisierer misst,
   zeichnet, der Kasten waechst, er misst neu, und das endet nie. Bei 2348 Zeilen
   waren das gemessene 92 000 Pixel Hoehe und rund 87 000 DOM-Aenderungen je Sekunde:
   die Tabelle flackert dauerhaft und der Schirm kommt nicht zur Ruhe. */
/* Der Rahmen um die Tabelle traegt nur die Referenz fuer die verstellbaren Spaltenbreiten.
   Er muss die Hoehe durchreichen: MudTable rechnet mit Height="100%", und ohne einen Elter
   mit fester Hoehe waechst die Tabelle mit ihrem Inhalt -- dann misst der Virtualisierer
   dauernd neu, statt zu scrollen. */
.af-result-table-host {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.af-result-table {
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--af-border);
    border-radius: 4px;
    background-color: #FFFFFF;
}

/* Unter dieser Breite wird nicht weiter gequetscht, sondern waagerecht gescrollt.
   Gilt erst ab 600px: darunter stellt MudBlazor die Liste auf Kartenansicht um,
   und eine Mindestbreite wuerde die Werte aus dem sichtbaren Bereich schieben. */
@media (min-width: 600px) {
    .af-result-table table {
        min-width: 78rem;
    }
}

.af-result-table th {
    font-weight: 600;
    color: var(--af-violet);
    white-space: nowrap;
}

.af-score {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* --- Ladebild: das A der Bildmarke laeuft von unten voll --- */

.af-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    height: 100vh;
    color: var(--af-grey);
}

/* Deckt Kopf- und Fusszeile ab, solange die Daten laden - so bleibt es beim
   selben Bild wie vor dem Start von Blazor.

   Der Grund ist kein flaches Grau mehr, sondern ein sehr weicher Verlauf von Weiss
   in der Mitte nach aussen zur Flaechenfarbe. Das hebt das Zeichen heraus, ohne dass
   irgendwo eine Kante sichtbar wird -- bei einem Bild, das eine Minute stehen kann,
   ist Ruhe wichtiger als Wirkung. */
.af-splash--overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    height: auto;
    background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, var(--af-surface) 62%);
}

/* Das PNG dient als Maske - sichtbar wird nur, was darunter eingefaerbt ist.

   Die Groesse waechst jetzt mit dem Fenster (clamp ueber vmin): auf dem Notebook
   rund 110 px, auf einem grossen Schirm bis 168 px, auf dem Telefon nie groesser
   als der Platz. Feste 80 px wirkten auf jedem Monitor wie ein Symbol in einer
   Symbolleiste, nicht wie das Bild, auf das man wartet.

   Der Grundton ist ein sehr helles Violett statt des alten Grau -- damit stehen im
   Ladebild dieselben zwei Farben wie in der Anwendung und nicht drei. */
.af-splash__mark {
    position: relative;
    width: clamp(88px, 13vmin, 168px);
    aspect-ratio: 80 / 86;
    background-color: rgba(56, 32, 96, 0.13);
    -webkit-mask: url("../images/a_icon_white_t.png") center / contain no-repeat;
    mask: url("../images/a_icon_white_t.png") center / contain no-repeat;
    animation: af-splash-breathe 3.4s ease-in-out infinite;
}

/* Die Fuellung. Der Verlauf laeuft von Koralle oben nach Violett unten und beginnt
   durchsichtig: Dadurch hat die steigende Kante keinen harten Strich, sondern einen
   weichen Rand -- sie liest sich als Fluessigkeit und nicht als Fortschrittsbalken. */
.af-splash__mark::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(255, 96, 86, 0) 0%,
        var(--af-coral) 14%,
        #C9476B 62%,
        var(--af-violet) 100%);
    /* Die Fuellung wird verschoben statt in der Hoehe veraendert: transform laeuft
       auf der Grafikkarte und damit ruckelfrei, height erzwingt jeden Frame ein
       neues Layout. */
    transform: translateY(100%);
    will-change: transform, opacity;
    /* Laeuft in Schleife, solange das Ladebild steht: Der erste Aufruf des
       Kandidatenmappings kann eine Minute dauern (Container-App skaliert auf null),
       und eine einmalige Fuellung wuerde dann lange fertig dastehen und wie ein
       Haenger aussehen. Ausgeblendet wird erst, wenn die Daten da sind. */
    animation: af-splash-fill 2.4s cubic-bezier(0.45, 0.05, 0.3, 1) infinite;
}

/* Vorher sprang die Fuellung am Ende jedes Durchlaufs sichtbar von voll auf leer
   zurueck. Jetzt haelt sie kurz, blendet aus und steigt unsichtbar wieder an --
   der Sprung faellt in die Unsichtbarkeit. */
@keyframes af-splash-fill {
    0% {
        transform: translateY(100%);
        opacity: 1;
    }

    68% {
        transform: translateY(0);
        opacity: 1;
    }

    84% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 0;
    }
}

/* Kaum wahrnehmbar und trotzdem der Unterschied zwischen "laedt" und "haengt":
   Das Zeichen atmet, auch waehrend die Fuellung ausblendet. */
@keyframes af-splash-breathe {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }
}

.af-splash__text {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--af-violet);
}

/* Wer Bewegung abbestellt hat, bekommt das Zeichen halb gefuellt und still. Ohne
   diese Regel laeuft hier eine Endlosschleife -- ausgerechnet auf dem Bild, an dem
   man am laengsten sitzt. */
@media (prefers-reduced-motion: reduce) {
    .af-splash__mark,
    .af-splash__mark::after {
        animation: none;
    }

    .af-splash__mark::after {
        transform: translateY(45%);
        opacity: 1;
    }
}

/* Zweite Zeile im Ladebild: was gerade geladen wird. */
.af-splash__hinweis {
    margin: -0.9rem 0 0;
    font-size: 0.78rem;
    color: var(--af-grey);
    opacity: 0.85;
    max-width: 22rem;
    text-align: center;
}

/* --- Fehlerleiste von Blazor --- */

#blazor-error-ui {
    background: #FFE9E7;
    border-top: 2px solid var(--af-coral);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    /* Liegt ueber der fixierten Fusszeile - eine Fehlermeldung darf nicht verdeckt werden. */
    z-index: 1200;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* --- Tastaturfokus sichtbar halten --- */

:focus-visible {
    outline: 2px solid var(--af-coral);
    outline-offset: 2px;
}

/* --- Umbruch auf schmaleren Bildschirmen --- */

@media (max-width: 1500px) {
    .af-filter-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .af-filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .af-filter-panel {
        grid-template-columns: 1fr;
    }

    .af-action-bar__search {
        flex: 1 1 100%;
    }

    .af-suchkarte__zeile {
        gap: 0.75rem;
    }

    .af-suchkarte__auswahl,
    .af-suchkarte__services {
        flex: 1 1 100%;
    }
}

/* Nur fuer Screenreader sichtbar - der Titel steht in der Kopfzeile. */
.af-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Fusszeile --- */

/* Bleibt beim Scrollen am unteren Bildschirmrand stehen. Der z-index liegt unter dem
   der MudBlazor-Popover, damit Auswahllisten weiterhin darueber aufklappen. */
.af-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background-color: var(--af-violet);
    color: #FFFFFF;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.18);
}

.af-footer__claim {
    flex: 1 1 auto;
    color: var(--af-coral);
    font-size: 0.8rem;
}

.af-footer__links {
    flex: 0 1 auto;
    display: flex;
    gap: 0.5rem;
}

/* Textbuttons in der Fusszeile: weiss, gesperrt, in Grossbuchstaben. */
.af-footer .af-footer__link {
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.af-footer .af-footer__link:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.af-footer__meta {
    flex: 1 1 auto;
    text-align: right;
    color: var(--af-coral);
    font-size: 0.8rem;
}

/* Auf schmalen Schirmen wird die dreizeilige Fusszeile zu teuer: fixiert kostet sie
   rund ein Sechstel der Bildschirmhoehe. Sie scrollt dort deshalb mit, und der
   Inhaltsbereich waechst frei statt auf eine feste Hoehe gezwungen zu werden. */
@media (max-width: 760px) {
    .af-footer {
        position: static;
        justify-content: center;
        box-shadow: none;
    }

    .af-footer__claim,
    .af-footer__meta {
        flex: 1 1 100%;
        text-align: center;
    }

    .af-content {
        height: auto;
        min-height: calc(100dvh - var(--af-appbar-height));
        overflow-y: visible;
        padding-bottom: 1rem;
    }

    /* Die Trefferliste bekommt eine feste Mindesthoehe statt des Restplatzes,
       damit sie auch bei ausgeklappter Maske nutzbar bleibt. */
    .af-result-area {
        min-height: 24rem;
    }
}

/* Der Anfragekontext wird auf schmalen Schirmen kompakter gesetzt. */
/* Groessere Beruehrungsflaechen auf Touch-Geraeten: 36px sind mit dem Finger
   schwer zu treffen, empfohlen sind mindestens 44px. */
@media (pointer: coarse) {
    .af-suchkarte__aktionen .mud-button-root,
    .af-action-bar .mud-button-root {
        min-height: 44px;
    }

    .af-footer .af-footer__link {
        min-height: 44px;
    }
}

/* --- Trefferliste als Karten --- */

/* Wie die Tabelle: eigener Scroller mit bestimmter Hoehe. Sonst reserviert der
   Virtualisierer die Hoehe aller Karten im Seitenfluss -- gemessen 607 000 Pixel bei
   2348 Treffern, und die Maske scrollt mit der Liste weg. */
.af-cards {
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--af-border);
    border-radius: 4px;
    background-color: #FFFFFF;
}

.af-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background-color: #FFFFFF;
    border: 1px solid var(--af-border);
    border-radius: 6px;
}

/* Der beste bewertete Treffer wird hervorgehoben. */
.af-card--top {
    border-color: var(--af-violet);
    background-color: #F7F5FA;
}

.af-card__score-spalte {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: 3.4rem;
}

/* Platzhalter statt Foto - Bilder liegen im POC nicht vor. */
.af-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background-color: var(--af-violet);
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.af-card__score {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--af-coral);
    font-variant-numeric: tabular-nums;
}

.af-card__score--none {
    font-size: 0.75rem;
    font-weight: 400;
    font-style: italic;
    color: var(--af-grey);
}

.af-card__inhalt {
    flex: 1 1 auto;
    min-width: 0;
}

.af-card__name {
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--af-violet);
}

.af-card__zeile {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    color: #4A4A4A;
}

.af-card__trenner {
    margin: 0 0.35rem;
    color: var(--af-grey);
}

.af-card__merkmale {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    font-size: 0.78rem;
    color: var(--af-grey);
}

.af-card__merkmal {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.af-card__aktion {
    flex: 0 0 auto;
}

.af-cards__hinweis {
    padding: 1.25rem;
    color: var(--af-grey);
}

/* Auf schmalen Schirmen bricht die Karte um. */
@media (max-width: 620px) {
    .af-card {
        flex-wrap: wrap;
    }

    .af-card__aktion {
        flex: 1 1 100%;
    }

    .af-card__aktion .mud-button-root {
        width: 100%;
    }
}

/* --- Trefferliste: Name, Platzierungsschluessel, Entfernung --- */

/* Name oben, darunter klein Bewerberschluessel und Niederlassung. */
.af-name {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.af-name__voll {
    font-weight: 600;
    white-space: nowrap;
}

.af-name__sub {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.8rem;
    color: var(--af-grey);
}

.af-name__nl {
    margin-left: 0.25rem;
}

/* Der Timejob-Primkey ist die Arbeitskennung des Recruiters: gut lesbar, nicht grau. */
.af-nummer--pl {
    color: inherit;
    font-weight: 600;
}

.af-entfernung {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Der Einsatzort im Anfragedialog. Der Suchradius steht seit dem 16.09.2026 bei den Filtern;
   das Feld bleibt trotzdem begrenzt -- eine Postleitzahl ueber die volle Dialogbreite sieht
   nach mehr Eingabe aus, als sie ist. */
/* Der Dokumentdialog: das PDF fuellt den Dialog, der Rahmen ist unsichtbar. */
.af-dokument .mud-dialog-content {
    padding: 0;
}

.af-dokument__rahmen {
    display: block;
    width: 100%;
    height: 78vh;
    border: 0;
    background: #525659;
}

/* Merken und vergleichen. */
.af-auswahl {
    width: 2.6rem;
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
}

.af-auswahl__titel {
    font-size: 0.7rem;
}

.af-merkliste {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    justify-content: center;
}

.af-vergleich .mud-dialog-content {
    padding: 0 0.5rem 0.5rem;
}

.af-vergleich__scroll {
    overflow: auto;
    max-height: 72vh;
}

/* Feste Aufteilung: die Kriteriumsspalte schmal, die Kandidaten gleich breit. Lange Zeilen
   brechen um, statt eine Spalte aufzureissen. Die Breiten stellt der Anwender am Griff im Kopf um. */
.af-vergleich__tabelle {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    font-size: 0.85rem;
}

.af-vergleich__spalte--kriterium {
    width: 11rem;
}

.af-vergleich__tabelle th,
.af-vergleich__tabelle td {
    padding: 0.35rem 0.7rem;
    border-bottom: 1px solid #e6e2ec;
    vertical-align: top;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Der Griff zum Ziehen sitzt am rechten Rand der Kopfzelle. Er traegt einen sichtbaren Strich:
   ein unsichtbarer Griff wird nicht gefunden -- genau das ist am 15.09.2026 passiert. */
.af-vergleich__tabelle thead th {
    position: relative;
}

.af-vergleich__griff {
    position: absolute;
    top: 0;
    right: -5px;
    width: 11px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    z-index: 3;
}

.af-vergleich__griff::after {
    content: "";
    position: absolute;
    top: 15%;
    left: 50%;
    width: 2px;
    height: 70%;
    transform: translateX(-50%);
    border-radius: 1px;
    background: #d9d3e3;
}

.af-vergleich__griff:hover::after,
.af-vergleich__griff--aktiv::after {
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--af-violet);
}

.af-vergleich__titel {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.af-vergleich__tabelle thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

.af-vergleich__tabelle tbody th {
    position: sticky;
    left: 0;
    background: #fff;
    font-weight: 500;
    color: var(--af-grey);
    white-space: normal;
    z-index: 1;
}

.af-vergleich__kriterium {
    white-space: normal;
}

.af-vergleich__abschnitt th {
    background: #f4f1f8;
    font-weight: 600;
    color: inherit;
    position: sticky;
    left: 0;
}

.af-vergleich__kopf-name {
    display: block;
    font-weight: 600;
}

.af-vergleich__kopf-schluessel {
    display: block;
    font-size: 0.75rem;
    color: var(--af-grey);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.af-vergleich__beste {
    background: #e9f7ec;
    font-weight: 600;
}

.af-vergleich__ja {
    color: #1e7b34;
}

.af-vergleich__nein {
    color: #a33a3a;
}

.af-vergleich__haken {
    vertical-align: -0.2rem;
    margin-right: 0.2rem;
}

.af-vergleich__dokumente {
    display: inline-flex;
    gap: 0.2rem;
}

/* Die gewaehlten Zielpositionen unter dem Auswahlfeld: nummeriert wie in der Legende ueber der
   Trefferliste, damit dieselbe Position oben und unten dieselbe Zahl traegt. */
.af-zielpositionen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.af-zielpositionen__titel {
    flex-basis: 100%;
    color: var(--mud-palette-text-secondary);
}

.af-zielpositionen__nummer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Die zwei Dokumente zu einem Kandidaten. */
.af-dossier__reiter {
    margin-bottom: 0.25rem;
}

.af-dossier__hinweis {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.af-dossier__laden {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0;
}

.af-dossier__inhalt {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Der Entwurf wird gelesen, bevor er verschickt wird -- also muss er sich lesen lassen. Drei
   Stellschrauben, und jede hat einen Grund:

   Zeilenhoehe 1.7, weil ein Fliesstext in Standardhoehe im Formularfeld wie eine Konfigurationsdatei
   aussieht und man ihn ueberfliegt statt ihn zu pruefen.

   Zeilenlaenge auf 68 Zeichen begrenzt: Ueber die volle Dialogbreite findet das Auge am
   Zeilenende den naechsten Anfang nicht mehr zuverlaessig.

   Absatzabstand ueber die Leerzeile aus dem Modell -- deshalb bleibt der Umbruch erhalten und wird
   nicht zusammengezogen. */
.af-dossier__text textarea {
    line-height: 1.7;
    font-size: 0.95rem;
    max-width: 68ch;
}

/* Die Beschriftung und der Rahmen sollen der schmaleren Schreibflaeche folgen. */
.af-dossier__text .mud-input-slot {
    max-width: 68ch;
}

.af-dossier__laenge {
    align-self: flex-end;
    color: var(--mud-palette-text-disabled);
    font-variant-numeric: tabular-nums;
}

/* Der Titel traegt zwei Zeilen: den Namen und darunter Nummer und Zielposition. */
.af-dossier__titel {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.af-dossier__titel-zusatz {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.af-dossier__luecken {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.75rem;
    border-left: 3px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
    border-radius: 4px;
}

.af-dossier__luecken-titel {
    flex-basis: 100%;
    color: var(--mud-palette-text-secondary);
}

.af-dossier__luecken-hinweis {
    flex-basis: 100%;
    margin-bottom: 0.25rem;
    color: var(--mud-palette-text-secondary);
}

.af-dossier__modell,
.af-dossier__meldung {
    color: var(--mud-palette-text-secondary);
}

/* Der Abruf einer Anzeige von einer Adresse: Ladeanzeige, Knopf und Herkunft. */
.af-adresse {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.af-adresse__meldung {
    margin-top: 0.5rem;
}

.af-adresse__quelle {
    display: block;
    margin-top: 0.5rem;
    color: var(--mud-palette-text-secondary);
}

/* Eine Adresse kann laenger sein als das Feld breit ist -- umbrechen statt ueberlaufen. */
.af-adresse__quelle a {
    overflow-wrap: anywhere;
}

/* Der Lebenslauf-Auszug im Vergleich: Stationen zeilenweise, Hinweise im Abschnittskopf. */
.af-vergleich__text {
    white-space: pre-line;
}

.af-vergleich__laden {
    margin-left: 0.6rem;
    vertical-align: middle;
}

.af-vergleich__hinweis {
    margin-left: 0.5rem;
    font-weight: 400;
    color: var(--af-grey);
}

.af-vergleich__hinweis--fehler {
    color: #a33a3a;
}

/* Der Unterlagen-Dialog: links das Dokument, rechts der Steckbrief. */
.af-unterlagen .mud-dialog-content {
    padding: 0 0.5rem 0.5rem;
}

.af-unterlagen__titel {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.af-unterlagen__zaehler {
    margin-left: 0.6rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--af-grey);
}

/* Der Steckbrief bekommt so viel Breite, wie der Text braucht: er ist die eigentliche
   Zusammenfassung, waehrend der Betrachter links ohnehin graue Raender zeigt. Auf breiten
   Schirmen mehr, damit Ausbildung und Stationen nicht Wort fuer Wort umbrechen. */
.af-unterlagen__inhalt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26rem;
    gap: 0.75rem;
    outline: none;
}

@media (min-width: 1600px) {
    .af-unterlagen__inhalt {
        grid-template-columns: minmax(0, 1fr) 32rem;
    }
}

.af-unterlagen__anzeige {
    display: flex;
    flex-direction: column;
    min-height: 76vh;
}

.af-unterlagen__rahmen {
    flex: 1 1 auto;
    width: 100%;
    min-height: 70vh;
    border: 0;
    background: #525659;
}

.af-unterlagen__leer {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    text-align: center;
    color: var(--af-grey);
}

.af-unterlagen__steckbrief {
    border-left: 1px solid #e6e2ec;
    padding-left: 0.9rem;
    overflow-y: auto;
    max-height: 76vh;
    font-size: 0.9rem;
    line-height: 1.45;
}

.af-unterlagen__kennungen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-bottom: 0.5rem;
}

.af-unterlagen__daten {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0.2rem 0.6rem;
    margin: 0;
}

.af-unterlagen__daten dt {
    color: var(--af-grey);
}

.af-unterlagen__daten dd {
    margin: 0;
}

.af-unterlagen__abschnitt {
    margin-top: 0.9rem;
    margin-bottom: 0.3rem;
}

.af-unterlagen__kurz {
    margin-bottom: 0.5rem;
}

/* Eine Liste im Steckbrief: Ueberschrift, darunter die Werte -- kein Fliesstext mit Kommas. */
.af-unterlagen__liste {
    margin-top: 0.7rem;
}

.af-unterlagen__liste-titel {
    display: block;
    color: var(--af-grey);
    font-size: 0.8rem;
}

.af-unterlagen__liste ul {
    margin: 0.15rem 0 0;
    padding-left: 1.1rem;
}

.af-unterlagen__liste li {
    margin-bottom: 0.1rem;
}

/* Der Zeitstrahl: Jahreszahl links, Linie mit Punkt, rechts Rolle und Arbeitgeber. */
.af-zeitstrahl {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
}

.af-zeitstrahl__station {
    display: grid;
    grid-template-columns: 5.5rem 0.9rem minmax(0, 1fr);
    align-items: start;
    column-gap: 0.4rem;
    position: relative;
    padding-bottom: 0.7rem;
}

/* Die Linie verbindet die Punkte; die letzte Station bekommt keine mehr. */
.af-zeitstrahl__station::before {
    content: "";
    position: absolute;
    left: 6.15rem;
    top: 0.85rem;
    bottom: 0;
    width: 1px;
    background: #ded8e8;
}

.af-zeitstrahl__station:last-child::before {
    display: none;
}

.af-zeitstrahl__zeit {
    color: var(--af-grey);
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    text-align: right;
    white-space: nowrap;
    padding-top: 0.1rem;
}

.af-zeitstrahl__punkt {
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.4rem;
    border-radius: 50%;
    background: #c9c0d8;
    justify-self: center;
}

.af-zeitstrahl__station--laufend .af-zeitstrahl__punkt {
    background: var(--af-violet);
    box-shadow: 0 0 0 3px rgba(74, 35, 90, 0.12);
}

.af-zeitstrahl__station--laufend .af-zeitstrahl__zeit {
    color: var(--af-violet);
    font-weight: 600;
}

.af-zeitstrahl__inhalt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.af-zeitstrahl__rolle {
    font-weight: 600;
}

.af-zeitstrahl__firma {
    color: var(--af-grey);
    font-size: 0.85rem;
}

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

    .af-unterlagen__steckbrief {
        border-left: 0;
        padding-left: 0;
        max-height: none;
    }
}

/* Markierung im PDF (pdf.js). */
.af-unterlagen__markierung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.af-unterlagen__suche {
    max-width: 18rem;
}

.af-unterlagen__treffer {
    font-size: 0.8rem;
    color: var(--af-grey);
}

.af-unterlagen__treffer--fehler {
    color: #b00020;
}

.af-unterlagen__schalter {
    margin-right: auto;
}

.af-unterlagen__pdf {
    flex: 1 1 auto;
    min-height: 66vh;
    max-height: 66vh;
    overflow: auto;
    background: #525659;
    padding: 0.5rem;
}

.af-pdf__seite {
    position: relative;
    margin: 0 auto 0.5rem;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.af-pdf__seite canvas {
    display: block;
}

/* Die Textebene von pdf.js: unsichtbarer Text ueber der Leinwand, Treffer als <mark>. */
.textLayer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 1;
    line-height: 1;
    text-align: initial;
    text-size-adjust: none;
    forced-color-adjust: none;
    transform-origin: 0 0;
}

.textLayer span,
.textLayer br {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
}

.textLayer .endOfContent {
    display: block;
    position: absolute;
    inset: 100% 0 0;
    z-index: -1;
    cursor: default;
    user-select: none;
}

.af-pdf__treffer {
    color: transparent;
    background: rgba(255, 221, 0, 0.55);
    border-radius: 2px;
}

.af-pdf__treffer--aktiv {
    background: rgba(255, 140, 0, 0.8);
}

/* Aktive Kriterien: alles, was gerade abgefragt und gefiltert wird. */
.af-kriterien {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid #e6e2ec;
    border-bottom: 1px solid #e6e2ec;
    background: #faf9fc;
}

.af-kriterien__titel {
    color: var(--af-grey);
    margin-right: 0.25rem;
}

/* Dienstleistung in der Anfrage: drei Chips, alle vorbelegt. */
.af-services {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

/* --- Der Anfragedialog ---

   Zwei Abschnitte mit gleichem Kopf, dazwischen eine Linie. Der Dialog war ueber die Zeit zu
   fuenf Bloecken mit fuenf Layouts gewachsen; das Auge musste bei jedem neu suchen, wo die
   Information anfaengt. Jetzt gibt es genau zwei Formen: den Abschnittskopf und die
   Ergebniszeile. */
.af-dialog-anfrage {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.af-abschnitt {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.af-abschnitt + .af-abschnitt {
    padding-top: 1.25rem;
    border-top: 1px solid var(--af-border);
}

.af-abschnitt__kopf {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.15rem;
}

.af-abschnitt__symbol {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: var(--af-violet);
}

/* Der Titel als Kapitaelchenzeile in Violett -- dieselbe Form, die die Filtergruppen links
   tragen, damit Dialog und Maske zusammengehoeren. */
.af-abschnitt__titel {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--af-violet);
}

.af-abschnitt__titel .af-optional {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin-left: 0.35rem;
}

.af-abschnitt__untertitel {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--af-grey);
}

/* Dienstleistung und Einsatzort nebeneinander. Beide sind Parameter der Anfrage und beide
   kurz -- untereinander kosteten sie sechs Zeilen fuer drei Chips und ein Feld. */
.af-parameter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: 0.75rem 1.5rem;
    align-items: start;
    margin-top: 0.25rem;
}

@media (max-width: 700px) {
    .af-parameter {
        grid-template-columns: 1fr;
    }
}

.af-parameter__feld {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.af-parameter__label {
    font-size: 0.72rem;
    color: var(--af-grey);
}

/* Der Anzeigentext ist die Eingabe, um die sich der Abschnitt dreht -- etwas mehr Luft in den
   Zeilen, damit eine eingefuegte Anzeige lesbar bleibt statt wie ein Protokoll auszusehen. */
.af-anzeigentext textarea {
    line-height: 1.55;
}

/* Was aus der Anzeige wird: eine getoente Flaeche mit drei gleich gebauten Zeilen. Links die
   Beschriftung mit der Aktion, rechts die Chips. Der Ton ist derselbe wie bei den aktiven
   Kriterien ueber der Trefferliste -- beides ist "abgeleitet", nichts davon hat der Benutzer
   selbst eingegeben. */
.af-ergebnis {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #e6e2ec;
    border-radius: 6px;
    background: #faf9fc;
}

.af-ergebnis__zeile {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: 0.4rem 0.75rem;
    align-items: start;
}

@media (max-width: 700px) {
    .af-ergebnis__zeile {
        grid-template-columns: 1fr;
    }
}

/* Die Mindesthoehe entspricht einem kleinen Chip: So sitzt die Beschriftung auf der Zeile der
   Chips und nicht eine halbe Zeile darueber. */
.af-ergebnis__label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--af-violet);
}

.af-ergebnis__label .mud-icon-root {
    color: var(--af-violet);
}

.af-ergebnis__inhalt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.9rem;
}

.af-ergebnis__hinweis {
    flex-basis: 100%;
    color: var(--af-grey);
}

/* Ladezustand der Kandidatenabfrage. */
.af-laden {
    border: 1px solid #e6e2ec;
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: 4px;
    padding: 0.75rem 1rem 0.5rem;
    margin: 0.5rem 0;
    background: #faf9fc;
}

.af-laden__kopf {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.af-laden__text {
    flex: 1 1 auto;
    min-width: 0;
}

.af-laden__hinweis {
    color: var(--af-grey);
}

.af-laden__zeit {
    font-variant-numeric: tabular-nums;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    white-space: nowrap;
}

.af-laden__balken {
    margin: 0.5rem 0 0.35rem;
}

.af-laden__schritte {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    font-size: 0.75rem;
    color: var(--af-grey);
}

.af-laden__schritt--aktiv {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* --- Zwei Spalten: Suche links, Treffer rechts --- */

.af-workspace {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: var(--af-suche-breite, minmax(20rem, 40%)) 0.5rem minmax(0, 1fr);
    gap: 1rem;
    min-height: 0;
}

.af-workspace--eingeklappt {
    grid-template-columns: 3rem 0 minmax(0, 1fr);
}

.af-suche {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: #FFFFFF;
    border: 1px solid var(--af-border);
    border-radius: 4px;
    overflow: hidden;
}

.af-suche .af-anfrage {
    margin: 0;
    border: 0;
    border-left: 4px solid var(--af-violet);
    border-bottom: 1px solid var(--af-border);
    border-radius: 0;
}

.af-anfrage__aktionen {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.af-suche__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.6rem 0.6rem 0.25rem;
}

.af-suche__scroll .af-filter-hinweis {
    margin: 0.5rem 0.25rem 0.25rem;
}

.af-suche__aktionen {
    flex: 0 0 auto;
}

.af-action-bar__search {
    flex: 1 1 12rem;
    min-width: 0;
}

/* Die eingeklappte Leiste: Knopf, senkrechter Text, Zahl der Kriterien. */
.af-suche--leiste {
    align-items: center;
    padding: 0.35rem 0;
    gap: 0.75rem;
}

.af-suche__leiste-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--af-violet);
}

.af-suche__leiste-zahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--af-violet);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.af-treffer {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.af-treffer .af-kriterien {
    border-top: 0;
    border-radius: 4px;
    border: 1px solid #e6e2ec;
}

.af-treffer .af-result-area {
    min-height: 0;
}

/* Die aufklappbaren Gruppen unter den haeufigen Filtern. */
.af-filter-mehr {
    border: 1px solid var(--af-border);
    border-radius: 4px;
    overflow: hidden;
}

.af-filter-mehr .mud-expand-panel {
    border-bottom: 1px solid var(--af-border);
}

.af-filter-mehr .mud-expand-panel:last-child {
    border-bottom: 0;
}

.af-filter-mehr .mud-expand-panel-header {
    min-height: 2.5rem;
}

.af-filter-mehr__titel {
    color: var(--af-violet);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.af-filter-group__fields--mehr {
    padding-top: 0.25rem;
}

/* Unter 1200 Pixeln untereinander: erst die Suche mit begrenzter Hoehe, dann die Treffer. */
@media (max-width: 1200px) {
    .af-workspace,
    .af-workspace--eingeklappt {
        grid-template-columns: 1fr;
    }

    /* Gestapelt gibt es keine Mittellinie zu ziehen. */
    .af-splitter {
        display: none;
    }

    .af-suche {
        max-height: 60vh;
    }

    .af-suche--leiste {
        flex-direction: row;
        max-height: none;
        padding: 0.25rem 0.5rem;
    }

    .af-suche__leiste-text {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

/* Der Zaehler hinter einer gekuerzten Listenzeile der Karte; der Rest steht im Tooltip. */
.af-card__mehr {
    color: var(--af-violet);
    font-weight: 600;
    cursor: help;
}

/* Was mit dem Anzeigentext passiert: drei Zeilen mit Symbol, Details aufklappbar. */
.af-ablauf {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #4a4a4a;
}

.af-ablauf li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.af-ablauf__symbol {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    color: var(--af-violet);
}

.af-ablauf__details {
    margin-bottom: 0.5rem;
    border: 1px solid var(--af-border);
    border-radius: 4px;
}

.af-ablauf__details .mud-expand-panel-text {
    font-size: 0.8rem;
    color: var(--af-violet);
}

.af-ablauf__details .af-erklaerung {
    margin-bottom: 0.5rem;
}

.af-ablauf__details code {
    font-size: 0.75rem;
    background: #f3f1f7;
    padding: 0 0.25rem;
    border-radius: 3px;
}

/* --- Filterfeld mit Stern --- */

.af-filter-group__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-right: 0.35rem;
}

.af-filter-group__kopf .af-filter-group__title {
    flex: 1 1 auto;
}

/* Feld, Pfeile und Stern nebeneinander; beide bleiben oben, damit sie bei hohen Feldern
   (Gehalt, Alter) auf der Hoehe der Beschriftung sitzen. Die mittlere Spalte ist leer,
   solange der Anpassmodus nicht laeuft, und faellt dann auf null zusammen. */
.af-filter-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    gap: 0.15rem;
}

/* Die Pfeile stehen nebeneinander und nicht uebereinander: Untereinander waere die Zeile
   doppelt so hoch wie das Feld daneben, und die Maske haette im Anpassmodus eine andere
   Hoehe als danach. */
.af-filter-field__reihenfolge {
    display: flex;
    align-items: flex-start;
}

.af-filter-field__reihenfolge .mud-icon-button {
    padding: 4px;
    margin-top: 2px;
}

.af-filter-field__inhalt {
    min-width: 0;
}

/* Im Anpassmodus ist der Stern die Hauptsache und darf gefunden werden. */
.af-filter-field__stern {
    opacity: 0.8;
    transition: opacity 0.15s ease-in-out;
}

/* Schmal halten: der Stern steht neben dem Feld und darf die Zeile nicht hoeher machen. */
.af-filter-field__stern.mud-icon-button {
    padding: 4px;
    margin-top: 2px;
}

.af-filter-field:hover .af-filter-field__stern,
.af-filter-field:focus-within .af-filter-field__stern,
.af-filter-field--angeheftet .af-filter-field__stern {
    opacity: 1;
}

/* MudTooltip huellt sein Kind in einen Inline-Rahmen; ein Feld darin schrumpft auf seinen Inhalt.
   Gesperrte Felder standen dadurch halb so breit da wie die uebrigen. Der Stern daneben behaelt
   seine natuerliche Breite -- deshalb nur die Felder, nicht jeder Tooltip der Maske. */
.af-filter-field__inhalt > .mud-tooltip-root,
.af-filter-group__fields > .mud-tooltip-root {
    display: block;
    width: 100%;
}

/* Haken oder Kreuz zur Fahrbereitschaft: schafft der Kandidat den Weg zum Einsatzort?
   Die Farbe traegt die Aussage nicht allein -- Haken und Kreuz unterscheiden sich in der Form,
   und der Tooltip nennt beide Zahlen. */
/* Ort, Entfernung und Marke in einer Zeile. Flex statt vertical-align: nur so sitzen Haken und
   Kreuz in jeder Zeile auf derselben Hoehe -- mit vertical-align haengen sie an der Grundlinie
   des Textes, und die verschiebt sich, sobald ein Ortsname umbricht. */
.af-ort {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.4rem;
}

.af-entfernung-zeile {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--af-grey);
}

/* Der Tooltip-Wrapper von MudBlazor darf die Ausrichtung nicht aufheben. */
.af-entfernung-zeile .mud-tooltip-root {
    display: inline-flex;
    align-items: center;
}

.af-pendel {
    margin-left: 0.2rem;
    vertical-align: middle;
    flex: none;
}

.af-pendel--ja {
    color: var(--mud-palette-success, #2e7d32);
}

.af-pendel--nein {
    color: var(--mud-palette-error, #c62828);
}

/* Zweizeilige Tabellenzelle: oben der Wert, darunter klein die Ergaenzung -- wie bei Name und
   Timejob-Primkey. Spart eine Spalte, ohne den Wert zu verstecken. */
.af-zelle {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.af-zelle__sub {
    font-size: 0.75rem;
    color: var(--af-grey);
    white-space: nowrap;
}

/* Der freie Text der Beratung aus der Profilierung. Timejob kuerzt ihn auf 300 Zeichen, also
   passt er ohne Ausklappen -- er bekommt nur genug Zeilenabstand, um lesbar zu bleiben. */
.af-sonstiges {
    margin: 0.25rem 0 0.15rem;
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.af-sonstiges__quelle {
    margin: 0 0 0.5rem;
    font-size: 0.7rem;
    color: var(--af-grey);
}

/* Auf der Karte gekuerzt: der Virtualisierer rechnet mit einer festen Kartenhoehe, und ein
   langer Text darf sie nicht sprengen. Vollstaendig steht er im Steckbrief. */
.af-card__sonstiges {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--af-grey);
    font-style: italic;
}

/* --- Mittellinie zwischen Suche und Treffern --- */

/* Die Linie ist schmal, die Greifflaeche darf es nicht sein: der Kasten ist einen halben
   Zentimeter breit, sichtbar ist nur ein Strich in der Mitte. Doppelklick stellt die Vorgabe
   wieder her. */
.af-splitter {
    position: relative;
    cursor: col-resize;
    touch-action: none;
}

.af-splitter::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: var(--af-border);
    transition: width 0.1s ease, background-color 0.1s ease;
}

.af-splitter:hover::before,
.af-splitter--aktiv::before {
    width: 3px;
    background: var(--mud-palette-primary);
}

.af-workspace--eingeklappt .af-splitter {
    display: none;
}

/* --- Spaltenbreiten der Trefferliste --- */

/* Derselbe Griff wie im Vergleich, nur unauffaelliger: ein Strich am rechten Rand des
   Spaltenkopfes. Ziehen verstellt die Spalte, Doppelklick setzt alle zurueck. */
.af-result-table thead th {
    position: relative;
}

/* Die Freitextsuche ueber den Treffern: breit genug zum Tippen, aber nicht so breit, dass sie
   die Merkliste verdraengt. */
.af-result-header__search {
    flex: 0 1 22rem;
    min-width: 12rem;
}

.af-griff {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0.5rem;
    cursor: col-resize;
    touch-action: none;
}

.af-griff::before {
    content: "";
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: var(--af-border);
}

.af-griff:hover::before,
.af-griff--aktiv::before {
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--mud-palette-primary);
}

/* Die Spalte mit Haken oder Kreuz: schmal und zentriert, damit die Marken aller Zeilen
   untereinander stehen. Hinter der Entfernung wandert das Symbol sonst mit der Laenge des
   Ortsnamens. */
.af-weg {
    width: 3rem;
    text-align: center;
}

/* Die persoenliche Kandidatenliste. Der Stern steht fuer sie -- in der Trefferzeile und im
   Schalter darueber, damit beide Stellen als dieselbe Sache lesbar sind. Eine eigene Ansicht gibt
   es seit dem 21.09.2026 nicht mehr: Der Stern markiert, der Schalter blendet den Rest aus. */
.af-meine__schalter {
    white-space: nowrap;
}

.af-meine__zaehler {
    margin-left: 0.4rem;
    color: var(--af-grey);
    font-size: 0.8rem;
    font-weight: 400;
}

/* Gemerkte Kandidaten aufraeumen. Absichtlich karg: Name, Herkunft, Datum, Haken -- keine
   zweite Trefferansicht. Wer hier ist, will loeschen, nicht vergleichen. */
.af-aufraeumen__stern {
    vertical-align: -0.2rem;
    margin-right: 0.3rem;
}

.af-aufraeumen__zaehler {
    margin-left: 0.4rem;
    color: var(--af-grey);
    font-size: 0.8rem;
    font-weight: 400;
}

.af-aufraeumen__leer {
    padding: 0.4rem 0.2rem;
    color: var(--af-grey);
}

/* Der Kopf bleibt beim Blaettern stehen: Bei dreissig Eintraegen waere der Knopf sonst weg,
   sobald man ausgewaehlt hat. */
.af-aufraeumen__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.2rem 0.5rem;
    position: sticky;
    top: 0;
    background: var(--mud-palette-surface);
    z-index: 1;
}

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

.af-aufraeumen__eintrag {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.35rem 0.2rem;
    border-bottom: 1px solid var(--af-border);
}

.af-aufraeumen__eintrag:last-child {
    border-bottom: 0;
}

.af-aufraeumen__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.af-aufraeumen__name {
    font-weight: 600;
}

/* Kein Name: gedaempft und kursiv, damit die Zeile nicht wie einer gelesen wird. */
.af-aufraeumen__name--fehlt {
    font-weight: 400;
    font-style: italic;
    color: var(--af-grey);
}

.af-aufraeumen__sub {
    font-size: 0.75rem;
    color: var(--af-grey);
}

.af-aufraeumen__trenner {
    margin: 0 0.3rem;
}

/* --- Dialoge --------------------------------------------------------------------------------

   Kopf und Fuss tragen dieselben Farben wie die Anwendung -- und die sind nicht dieselben:
   Die Kopfleiste ist Korall (AppbarBackground im Theme), die Fusszeile Violett. Genau so stehen
   sie hier. Bis zum 23.09.2026 standen die Dialoge in reinem Weiss und sahen aus, als gehoerten
   sie zu einer anderen Anwendung.

   Die Knoepfe in der Fusszeile muessen dabei mitgehen: Ein violetter Knopf auf violettem Grund
   ist unsichtbar. Sie werden weiss, und der eine, der die Handlung ausloest, bekommt das Korall
   der Hausfarben -- dieselbe Beziehung wie in der Fusszeile der Anwendung, wo der Claim korall
   auf violett steht.
   ------------------------------------------------------------------------------------------ */

.mud-dialog .mud-dialog-title {
    background-color: var(--af-coral);
    color: #FFFFFF;
}

/* Auch das Kleingedruckte im Kopf: Es steht sonst in einem Grau, das auf Korall verschwindet. */
.mud-dialog .mud-dialog-title .mud-typography,
.mud-dialog .mud-dialog-title .mud-icon-root,
.mud-dialog .mud-dialog-title .mud-button-root {
    color: #FFFFFF;
}

.mud-dialog .mud-dialog-title .mud-typography-caption {
    color: rgba(255, 255, 255, 0.82);
}

.mud-dialog .mud-dialog-title .mud-button-root:hover,
.mud-dialog .mud-dialog-title .mud-icon-button:hover {
    background-color: rgba(255, 255, 255, 0.14);
}

/* Ein abgeblendeter Knopf im Kopf bleibt erkennbar, aber als abgeblendet lesbar. */
.mud-dialog .mud-dialog-title .mud-button-root:disabled,
.mud-dialog .mud-dialog-title .mud-icon-button:disabled {
    color: rgba(255, 255, 255, 0.38);
}

.mud-dialog .mud-dialog-actions {
    background-color: var(--af-violet);
    gap: 0.5rem;
}

.mud-dialog .mud-dialog-actions .mud-button-root {
    color: #FFFFFF;
}

.mud-dialog .mud-dialog-actions .mud-button-root:hover {
    background-color: rgba(255, 255, 255, 0.14);
}

.mud-dialog .mud-dialog-actions .mud-button-outlined {
    border-color: rgba(255, 255, 255, 0.55);
}

/* Der gefuellte Knopf ist die eine Handlung, um die es geht -- in Korall, wie der Claim unten. */
.mud-dialog .mud-dialog-actions .mud-button-filled {
    background-color: var(--af-coral);
    color: #FFFFFF;
    box-shadow: none;
}

.mud-dialog .mud-dialog-actions .mud-button-filled:hover {
    background-color: #E8524A;
}

.mud-dialog .mud-dialog-actions .mud-button-root:disabled {
    color: rgba(255, 255, 255, 0.38);
}

.mud-dialog .mud-dialog-actions .mud-button-filled:disabled {
    background-color: rgba(255, 255, 255, 0.18);
}
/* Der Knopf zur Diagnose steht neben der Trefferzeile und soll sie nicht verdraengen. */
.af-result-header__warum {
    margin-left: 0.5rem;
    flex: 0 0 auto;
}

/* Die Zahlen der Diagnose rechtsbuendig und in gleicher Breite: So liest man die Spalte
   von oben nach unten, statt sie zu suchen. */
.af-diagnose__zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.af-diagnose__fuss {
    display: block;
    margin-top: 0.75rem;
    color: var(--af-grey);
}