/* Korrekturen am Klon, geladen nach dem Klon-CSS (components/clone/head.hbs).
   Jede Regel mit Begruendung. Markenfarben werden nie angepasst. */

/* PM-8752: Jobsuche auf grossen Bildschirmen. Das Klon-CSS setzt .jumbotron auf
   padding-top 25vh, auf 27"-Bildschirmen (1440px Fensterhoehe) 360px Leerraum ueber
   der h1. Deckel 225px = Wert bei 900px Fensterhoehe, darunter unveraendert. Erst
   ab 992px: darunter gilt weiter 5vh aus dem Klon-CSS. */
@media (min-width: 992px) {
    .job-list-module .jumbotron {
        padding-top: min(25vh, 225px);
    }
}

/* OT-9061: Schalter GEA, Aptar und Becker nebeneinander. Die gemeinsame Regel setzt jeden
   Schalter auf volle Rasterbreite (1,4,0, hier 1,4,1). Ab lg (64rem) hat das Filterraster 3 Spalten, dort
   je ein Schalter pro Spalte, buendig unter Jobtitel, Bereich und Arbeitszeitmodell. Darunter
   1 Spalte, Schalter untereinander. "nur interne Stellenangebote" bleibt in eigener Zeile. */
@media (min-width: 64rem) {
    body .tms-app #tms-filter-wrap .tms-filter-item-wrap .tms-filter-item:is(.tms-filter-item--osm_gea, .tms-filter-item--osm_aptar, .tms-filter-item--osm_becker) {
        grid-column: auto;
    }
}

/* Stellenanzeige, Stoerer unter der Anzeige (PM-8798 "Buttonfarbe des CTAs auf CI des Unternehmens
   anpassen", aktuell grau). Im Layout fuer Stellenanzeigen gilt nur die Default-Badge-CSS
   (components/badge/badge.css), die Marken-Tokens greifen nur auf /jobs. Initiativ-Button (letzter
   Link) hier in den Button-Farben der Marke, Form und Groesse unveraendert. Nur auf Layout-Seiten
   (Stoerer folgt dem Bewerbungs-Container), /jobs unberuehrt. Wie vakant-personal und jobmeetslife. */
html body .tms-app .tms-component--application-form ~ #badge .tms-component--badge-actions a:last-child {
    border-color: var(--tms-button-border);
    background-color: var(--tms-button-bg);
    color: var(--tms-button-fg);
}

html body .tms-app .tms-component--application-form ~ #badge .tms-component--badge-actions a:last-child:hover {
    border-color: var(--tms-button-bg-hover);
    background-color: var(--tms-button-bg-hover);
    color: var(--tms-button-fg-hover);
}

/* Stellenanzeige, Abstand Ansprechpartner bis Stoerer (PM-8798 "Abstand Ansprechpartner und CTA
   verkleinern", analog zu Vakant, job meets life). Aussenabstand unter #tms-contact (96px), unter
   der Anzeigen-Sektion (96px) und Innen-/Aussenabstand ihres Containers (je 32px) entfallen, es
   bleiben die Abstaende von Bewerbungs-Container, aehnlichen Jobs und Stoerer. */
html body #content-talention .talention #leaf #tms-contact {
    margin-bottom: 0;
}

html body #content-talention .talention #leaf .tms-component.tms-component--jobad {
    margin-bottom: 0;
}

html body #content-talention .talention #leaf .tms-component.tms-component--jobad > .tms-component-container {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* OT-9459 "Auszeichnung Charta der Vielfalt vergroessern". Die gemeinsame Regel deckelt jedes
   Siegel ab lg auf 150px Breite, das Querformat der Charta (600x191) wird dabei 48px hoch und
   wirkt neben den hochformatigen Siegeln (150 bis 198px hoch) verloren. Ab lg 300px Breite
   (96px hoch), Bilddatei hat 600px, bleibt scharf. Darunter unveraendert. */
@media (min-width: 64rem) {
    body .tms-app #awards img[src*='award-charta'] {
        max-width: 300px;
    }
}

/* OT-9459 "Mitlaufender Bewerber Button mit Quick Facts: Text ueber Buttons vergroessern".
   Gemeinsam text-sm (14px). Ab md 18px wie die Listen der Anzeige, darunter 16px wie der
   Fliesstext, damit die Leiste auf dem Handy nicht zu hoch wird. */
html body #content-talention .talention #leaf #tms-sticky-button .tms-sticky-facts {
    font-size: 1rem;
    line-height: 1.5;
}

@media (min-width: 48rem) {
    html body #content-talention .talention #leaf #tms-sticky-button .tms-sticky-facts {
        font-size: 1.125rem;
    }
}

/* OT-9577 "in der Jobliste die Logos von GEA, APTAR, Schmidt und Becker anzeigen. Wie bei
   Netinera". Logos liegen fuer GEA und Aptar vor, die anderen folgen. Die Jobliste zeigt dafuer die
   Schalter osm_gea und osm_aptar als Properties (jobListProperties in layers.config.json). Das
   Widget rendert je Stelle den Wert als Klasse (--true/--false) mit leerem Text. Logo nur bei
   --true, an Stelle des Icons. Bei --false bleibt die Property unsichtbar. Bildpfade relativ zu
   vendor/css, damit sie auf der CDN-Basis aufloesen. */
html body .tms-app #tms-jobfeed-list .jobfeed-item-property:is(.jobfeed-item-property--osm_gea, .jobfeed-item-property--osm_aptar) {
    display: none;
}

html body .tms-app #tms-jobfeed-list .jobfeed-item-property:is(.jobfeed-item-property--osm_gea, .jobfeed-item-property--osm_aptar):has(.jobfeed-item-property-value--true) {
    display: inline-flex;
}

html body .tms-app #tms-jobfeed-list .jobfeed-item-property:is(.jobfeed-item-property--osm_gea, .jobfeed-item-property--osm_aptar)::before {
    width: auto;
    height: 1.75rem;
    mask: none;
    background: transparent no-repeat left center / contain;
}

html body .tms-app #tms-jobfeed-list .jobfeed-item-property.jobfeed-item-property--osm_gea::before {
    aspect-ratio: 421 / 128;
    background-image: url('../img/joblist-logo-gea.png');
    content: '' / 'GEA';
}

html body .tms-app #tms-jobfeed-list .jobfeed-item-property.jobfeed-item-property--osm_aptar::before {
    aspect-ratio: 870 / 311;
    background-image: url('../img/joblist-logo-aptar.png');
    content: '' / 'Aptar';
}

/* OT-9577: Unter 48rem stehen die Buttons direkt unter der Property-Zeile (2px Abstand). Text hat
   eigenen Zeilendurchschuss, das Logo fuellt seine Hoehe ganz aus und stiess an den Button. */
@media (width < 48rem) {
    html body .tms-app #tms-jobfeed-list .tms-jobfeed-item-property-wrap:has(:is(.jobfeed-item-property--osm_gea, .jobfeed-item-property--osm_aptar) .jobfeed-item-property-value--true) {
        margin-bottom: 0.5rem;
    }
}