/* AVEON Personal: Korrekturen der gemeinsamen Komponenten-CSS fuer die dunkle Seite
   (aveon-personal.de: --bs-body-bg #151715, Schrift Weiss). Playbook Abschnitt 7
   "Dunkle Seite". Geladen in components/clone/head.hbs nach dem Klon-CSS.
   Die gemeinsame CSS (themes/laravel-vite/jobliste.css) laedt danach und ist
   un-layered, deshalb traegt jeder Selektor "html body" vor dem Original-Selektor:
   gleiche Kette plus zwei Typ-Selektoren gewinnt trotz spaeterer Quellreihenfolge.
   Markenfarben bleiben unveraendert, es werden nur Flaechen der Kundenseite zugeordnet. */

/* 1. Bewerbungsprozess, Karten (css/process/process.css,
   .tms-component--process--single-item--inner: tms:bg-gray-light).
   Auf der dunklen Seite erbt der Kartentext Weiss, auf #f4f1f1 unlesbar (1,1:1).
   Live stehen Bewerber-Module (triptychon) ohne Karte auf dunkler Flaeche, die
   Kartenmodule auf bg-black: Karte #000, Schrift Weiss. */
html body .tms-app .tms-component--process .tms-component--process--single-item .tms-component--process--single-item--inner {
    background-color: var(--tms-color-gray-dark);
    color: var(--tms-color-white);
}

/* 2. Bewerbungsprozess, Fortschrittsleiste (css/process/process.css,
   .swiper-scrollbar-drag: tms:bg-primary). #151715 auf #151715 unsichtbar.
   Orange = Akzent der Kundenseite (Fokus, Checkboxen). */
html body .tms-app .tms-component--process .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag {
    background-color: var(--tms-color-secondary);
}

/* 3. Auszeichnungen (css/components/awards/awards.css, #awards: tms:bg-white).
   Die Logos der Kundenseite sind hell (DQS, AUEG-Netzwerk weiss auf transparent) und
   stehen live in "partners bg-black" (#000). Auf Weiss waren zwei von drei unsichtbar. */
html body .tms-app #awards {
    background-color: var(--tms-color-gray-dark);
}

/* 4. Karten, Linktext (css/cards/cards.css, .card-section p: tms:text-primary).
   #151715 auf der Karte #000 (--tms-card-bg) unsichtbar. Orange wie die Links
   und Buttons der Kundenseite, 5,9:1 auf #000. */
html body .tms-app .tms-component.tms-component--cards .card .card-section p {
    color: var(--tms-color-secondary);
}

/* 5. Auszeichnungen, Innenabstand. Mit der schwarzen Flaeche aus Regel 3 stand die
   Headline ohne Abstand an der Oberkante (die Sektion hat nur mt-24 aussen).
   Live-Module auf bg-black: py-5 (3rem). */
html body .tms-app #awards {
    padding-block: 3rem;
}

/* 6. Karten der Landingpages (landingpage, bereiche: Karten-CSS des Landingpage-Bundles,
   .card: bg-gray-light/25). Auf der dunklen Seite ergibt das #4d4d4c, darauf Titel
   #151715 (2,12:1) und Linktext Orange (2,39:1). Karte wie --tms-card-bg (#000, live
   bg-black), Titel Weiss wie die Headlines der Seite (21:1), Linktext Orange 5,9:1.
   Standort-Karten (Titel auf Foto) ausgenommen. */
html body .tms-app .tms-component.tms-component--cards:not(.tms-component--cards-standorte) .card {
    background-color: var(--tms-card-bg);
}

html body .tms-app .tms-component.tms-component--cards:not(.tms-component--cards-standorte) .card .card-excerpt h3 {
    color: var(--tms-heading-color);
}

/* 7. Talent Network /anmeldung, Absenden (components/candidate-widget/candidate-widget.css,
   [type='submit']: tms:bg-primary, Hover tms:text-primary). --tms-color-primary ist hier die
   Seitenflaeche #151715, der Button war unsichtbar. Wie der Suchen-Button der Jobliste:
   Button-Tokens der Marke (Orange, Schrift Weiss, Rundung 10px). Selektor mit
   .tms-component--candidate-widget, sonst gewinnt die gemeinsame Regel (0,4,0). */
html body .tms-app .tms-component--candidate-widget .tms-candidate-widget-actions [type='submit'] {
    border-color: var(--tms-button-border);
    border-radius: var(--tms-button-radius);
    background-color: var(--tms-button-bg);
    color: var(--tms-button-fg);
}

html body .tms-app .tms-component--candidate-widget .tms-candidate-widget-actions [type='submit']:hover {
    background-color: var(--tms-button-bg-hover);
    color: var(--tms-button-fg-hover);
}

/* 8. Links auf der dunklen Flaeche: Talent Network /anmeldung (Einwilligungssatz) und die
   Rechtstext-Seiten /zustimmung, /datenschutz. Klon-Bootstrap a: --bs-link-color #151715 =
   Seitenflaeche, unsichtbar. Weiss und unterstrichen wie die Links auf
   aveon-personal.de/datenschutzerklaerung (gemessen 2026-10-06). */
html body .tms-app tms-candidate-widget a,
html body .tms-app .tms-component--zustimmung a,
html body .tms-app .tms-component--datenschutz a {
    color: var(--tms-color-white);
    text-decoration: underline;
}

/* 9. Standort-Karten der Jobliste, Fotos (cards/cards.css, .card-image img: h-auto max-h-48).
   Die Motive haben zwei Formate (480x190 und 480x317), die Fotos wurden 167 und 192 px
   hoch, die Ortsnamen standen versetzt. Feste Hoehe 12rem (= max-h-48), Ausschnitt per
   object-cover (setzt das gemeinsame CSS schon). Nur #standorte, Icon-Karten der
   Landingpages bleiben unberuehrt. */
html body .tms-app #standorte .card .card-image img {
    height: 12rem;
}

/* 10. Stellenanzeige dunkel wie die uebrige Seite (CSE 2026-10-07, OT-9167: "das Weiss der
   Anzeige darf nicht sein"). Weiss setzen drei Quellen: TMS web2-core (#content-talention
   .talention: #fff), TMS job-post (#leaf: white) und jobad/jobad.css (.tms-jobad-header:
   --tms-color-white, Text --tms-color-black, Buttons und Links --tms-color-primary = #151715).
   Selektoren tragen die volle Kette der jobad-Regeln plus "html body", sonst gewinnen sie
   (die jobad-CSS wird spaeter im Body geladen). Flaeche transparent auf #151715, Schrift und
   Ueberschriften weiss, Links weiss unterstrichen (wie Regel 8), Bewerben-Buttons mit den
   Button-Tokens der Marke (Orange wie "Suchen"), Sticky-Leiste schwarz wie Footer und
   Auszeichnungen (--tms-surface-bg), damit sie sich von der Flaeche abhebt. Fakten-Band in
   Tangerine, siehe Regel 17. */
html body #content-talention .talention,
html body #content-talention .talention #leaf,
html body #content-talention .talention #leaf .tms-jobad-header {
    background-color: transparent;
}

/* #content traegt das Weiss als Inline-Style vom TMS (style="background-color: white;"),
   dagegen hilft nur !important. */
html body #content-talention .talention #content {
    background-color: transparent !important;
}

html body #content-talention .talention #leaf,
html body #content-talention .talention #leaf h1,
html body #content-talention .talention #leaf .tms-jobad-header .tms-jobad-header-content #tms-title h1,
html body #content-talention .talention #leaf .tms-jobad-header .tms-jobad-header-content #tms-description p {
    color: var(--tms-color-white);
}

html body #content-talention .talention #leaf a,
html body #content-talention .talention #leaf #tms-contact #tms-contact-wrapper #tms-contact-text a {
    color: var(--tms-color-white);
    text-decoration: underline;
}

html body #content-talention .talention #leaf .button,
html body #content-talention .talention #leaf .tms-jobad-header .tms-jobad-header-content .tms-jobad-header-text #tms-action-editor a {
    border-color: var(--tms-button-border);
    border-radius: var(--tms-button-radius);
    background-color: var(--tms-button-bg);
    color: var(--tms-button-fg);
    text-decoration: none;
}

html body #content-talention .talention #leaf .button:hover,
html body #content-talention .talention #leaf .tms-jobad-header .tms-jobad-header-content .tms-jobad-header-text #tms-action-editor a:hover {
    background-color: var(--tms-button-bg-hover);
    color: var(--tms-button-fg-hover);
}

html body #content-talention .talention #leaf #tms-sticky-button {
    background-color: var(--tms-surface-bg);
}

/* 11. Stoerer unter der Stellenanzeige wie auf /jobs. layout.css bringt den Standard-Stoerer
   (components/badge/badge.css: graue Karte bg-gray-light/25, graue Buttons, h2 30px/500), die
   Jobliste den Theme-Stoerer (badge/badge.css plus Button-Regel aus
   themes/laravel-vite/jobliste.css). Dessen Werte hier 1:1, mit beiden Breakpoints
   (md 48rem: Buttons nebeneinander, lg 64rem: mehr Innenabstand, groesserer Text).
   Nur auf Seiten mit Stellenanzeige (#leaf), /jobs bleibt unberuehrt. */
html body:has(#leaf) .tms-app #badge.tms-component--badge {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tms-surface-bg);
    color: var(--tms-surface-fg);
}

html body:has(#leaf) .tms-app #badge > .tms-component-container {
    padding-block: 2.5rem;
}

html body:has(#leaf) .tms-app #badge .tms-component--badge--inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
    border-radius: 0;
    padding: 1rem;
    width: 100%;
    background-color: transparent;
    text-align: center;
}

html body:has(#leaf) .tms-app #badge .tms-component--badge-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: none;
}

html body:has(#leaf) .tms-app #badge #badge-headline {
    margin: 0;
    width: 100%;
    font-size: var(--tms-surface-heading-size);
    font-weight: var(--tms-heading-weight);
    line-height: 1.4;
}

html body:has(#leaf) .tms-app #badge .tms-component--badge-text p {
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

html body:has(#leaf) .tms-app #badge .tms-component--badge-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    margin: 0;
    width: 100%;
}

html body:has(#leaf) .tms-app #badge .tms-component--badge-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border: 1px solid var(--tms-button-border);
    border-radius: var(--tms-button-radius);
    padding: 0.375rem 0.75rem;
    width: 100%;
    background-color: var(--tms-button-bg);
    color: var(--tms-button-fg);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    text-decoration: none;
}

html body:has(#leaf) .tms-app #badge .tms-component--badge-actions a:first-of-type {
    margin-right: 0.5rem;
}

html body:has(#leaf) .tms-app #badge .tms-component--badge-actions a:hover {
    border-color: var(--tms-button-bg-hover);
    background-color: var(--tms-button-bg-hover);
    color: var(--tms-button-fg-hover);
}

@media (min-width: 48rem) {
    html body:has(#leaf) .tms-app #badge .tms-component--badge-actions {
        flex-direction: row;
    }
}

@media (min-width: 64rem) {
    html body:has(#leaf) .tms-app #badge > .tms-component-container {
        padding-block: 3.5rem;
    }

    html body:has(#leaf) .tms-app #badge #badge-headline {
        line-height: 1;
    }

    html body:has(#leaf) .tms-app #badge .tms-component--badge-text p {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    html body:has(#leaf) .tms-app #badge .tms-component--badge-actions a {
        width: auto;
    }
}

/* 12. Weichen-Seite /initiativ (OT-9208), Standortauswahl (initiativ.css: #tms-on-spec
   tms:bg-white, Radio checked tms:bg-primary, Fokus tms:outline-primary, Button tms:bg-primary).
   Auf der dunklen Seitenflaeche standen die weissen Standortnamen auf Weiss, Auswahl, Fokus
   und Button waren #151715 auf #151715. Flaeche transparent wie die Seite, Auswahl und Button
   in den Button-Tokens der Marke (Orange, Schrift Weiss, Rundung 10px), Fokus im Outline-Token.
   Leeres Radio (tms:bg-white) stand als weisse Scheibe da, dunkel wie die Felder des Talent
   Network: transparent, Rand #f4f1f1 (CSE 2026-10-09: "die input sind nicht gut fuer den darkmode"). */
html body .tms-app .tms-component--initiativbewerbung #tms-on-spec {
    background-color: transparent;
}

html body .tms-app .tms-component--initiativbewerbung [type='radio'] {
    border-color: var(--tms-color-gray-light);
    background-color: transparent;
}

html body .tms-app .tms-component--initiativbewerbung [type='radio']:checked {
    border-color: var(--tms-button-bg);
    background-color: var(--tms-button-bg);
}

html body .tms-app .tms-component--initiativbewerbung [type='radio']:focus-visible {
    outline-color: var(--tms-color-outline);
}

html body .tms-app .tms-component--initiativbewerbung button {
    border-color: var(--tms-button-border);
    border-radius: var(--tms-button-radius);
    background-color: var(--tms-button-bg);
    color: var(--tms-button-fg);
}

html body .tms-app .tms-component--initiativbewerbung button:hover {
    background-color: var(--tms-button-bg-hover);
    color: var(--tms-button-fg-hover);
}

/* 13. Bewerbungsformular /stellenangebote/<id>/bewerbung (OT-9210, "Text Schwarz auf Schwarz").
   layout.css setzt #content-talention .talention .form und deren Links auf --tms-color-black,
   Absenden (#application-submit-button) auf --tms-color-primary, die Pfeile (Zurueck,
   Optionale Anhaenge) sind dunkle Hintergrundbilder: alles #151715 auf der Seitenflaeche #151715.
   Schrift Weiss, Links im Formular unterstrichen wie Regel 8, Absenden in den Button-Tokens,
   Pfeile weiss wie die Quickfacts-Icons, leere Checkbox mit hellem Rand (SC 1.4.11; angehakt
   bleibt sie gruen mit weissem Haken). Live gemessen 2026-10-07. */
html body #content-talention .talention .form,
html body #content-talention .talention a {
    color: var(--tms-color-white);
}

html body #content-talention .talention .form a {
    text-decoration: underline;
}

html body #content-talention .talention .form .control-group .submit #application-submit-button {
    border-color: var(--tms-button-border);
    border-radius: var(--tms-button-radius);
    background-color: var(--tms-button-bg);
    color: var(--tms-button-fg);
}

html body #content-talention .talention .job-link a::before,
html body #content-talention .talention .wrap .headline::before {
    filter: brightness(0) invert(1);
}

html body #content-talention .talention .form [type='checkbox']:not(:checked) {
    box-shadow: inset 0 0 0 1px var(--tms-color-gray-light);
}

/* 14. Talent Network (/anmeldung, /initiativ), Auswahllisten der Dropdowns (OT-9187: "Da ist
   alles weiss und wird erst beim Hovern lesbar"). select-search.css: .tms-select-replacement-search
   tms:bg-white, die Eintraege erben die weisse Seitenschrift, markiert (Hover, Pfeiltasten)
   tms:bg-primary/50. Dunkel wie die Felder: Flaeche #151715, Rand #f4f1f1 bleibt, Schrift Weiss,
   markierter Eintrag Weiss 15 %. */
html body .tms-app tms-candidate-widget .tms-select-replacement-search {
    background-color: var(--tms-color-primary);
    color: var(--tms-color-white);
}

html body .tms-app tms-candidate-widget .tms-select-replacement-search li.tms-is-highlighted {
    background-color: color-mix(in oklab, var(--tms-color-white) 15%, transparent);
}

/* 15. Talent Network (/anmeldung, /initiativ), Einwilligungs-Checkbox (CSE 2026-10-09: "die input
   sind nicht gut fuer den darkmode"). candidate-widget.css: leer tms:bg-white mit Rand
   tms:border-gray-dark, angehakt tms:bg-primary, Fokus tms:ring-primary. Angehakt und Fokus waren
   #151715 auf #151715, nur der weisse Haken sichtbar. Leer dunkel wie die Felder (transparent,
   Rand #f4f1f1), angehakt im Button-Token (Orange, Haken Weiss), Fokus im Outline-Token wie die
   Radios der Weichen-Seite. Live gemessen 2026-10-09. */
html body .tms-app .tms-component--candidate-widget [type='checkbox'] {
    border-color: var(--tms-color-gray-light);
    background-color: transparent;
}

html body .tms-app .tms-component--candidate-widget [type='checkbox']:checked {
    border-color: var(--tms-button-bg);
    background-color: var(--tms-button-bg);
}

html body .tms-app .tms-component--candidate-widget [type='checkbox']:focus {
    outline: 2px solid var(--tms-color-outline);
    outline-offset: 2px;
    box-shadow: none;
}

/* 16. Auszeichnungen, Badge "Mitglied im AUEG NETZWERK" (OT-9248, Kundenfeedback 2026-10-09: "in
   der Jobliste zu klein"). awards.css setzt jedes Logo ab lg auf max-width 150px, das Badge ist
   sehr breit (1200x208) und stand damit bei 150x26 px. Ab lg max-width 400px: 400x69 px, so hoch
   wie das GVP-Logo (150x71), Seitenverhaeltnis bleibt. Unter lg unveraendert (Tablet 696x121,
   Mobil 351x61). Live gemessen 2026-10-09. */
@media (min-width: 64rem) {
    html body .tms-app #awards img[src*='netzwerk-mitglied'] {
        max-width: 400px;
    }
}

/* 17. Stellenanzeige, Quick Facts (OT-9186: "Hintergrundfarbe im Keyfacts-Bereich ersetzen,
   Schwarzton nicht im AVEON-Brandbook"). Tangerine #E84327 mit weisser Schrift laut Brandbook
   (Farbwelt_AVEON.png im Ticket), Icons sind weiss. Weiss auf Tangerine 3,99:1, unter AA 4,5:1
   fuer die 14/16-px-Texte; Markenfarbe, deshalb a11y.skipContrast der Marke. Live gemessen
   2026-10-09. */
html body #content-talention .talention #leaf .tms-component.tms-component--quickfacts {
    background-color: #e84327;
    color: #fff;
}

html body #content-talention .talention #leaf .tms-component.tms-component--quickfacts * {
    color: #fff;
}

/* 18. Stellenanzeige, mitlaufender Bewerben-Button (OT-9186: "weisse Outline des Jetzt Bewerben
   Buttons entfernen"). jobad/jobad.css setzt fuer die Navy-Leiste des Musters tms:border-white.
   Auf der schwarzen Leiste hat das Orange allein 5,9:1 (SC 1.4.11 will 3:1), der Rahmen ist
   ueberfluessig. Transparent statt 0, damit der Button seine Hoehe behaelt. */
html body #content-talention .talention #leaf #tms-sticky-button a,
html body #content-talention .talention #leaf #tms-sticky-button a:hover {
    border-color: transparent;
}