/* Job Postings (Simple Job Board) -> Avada-Markendesign angeglichen.
Plugin-Markup/-Klassen bleiben unveraendert, hier nur Farben/Typo/Buttons/Icons
auf die Avada-Farbvariablen (--awb-colorN) umgelegt, analog Privatkunden-Seiten. */
/* --- Karten (Uebersichtsliste + Einzelansicht-Wrapper teilen sich .v1) --- */
.sjb-page .list-data .v1 {
background: var(--awb-color1);
border: 1px solid var(--awb-color3);
}
/* --- Seitentitel (Avada-Titelleiste statt Plugin-.job-title, siehe unten) ---
job_board_pages_layout=theme-layout: die Plugin-eigene Titel-Vorlage (.job-title)
wird NICHT gerendert, stattdessen Avada-Titelleiste .fusion-post-title. Avada's
eigene post_title-Typografie-Regel ist auf .fusion-portfolio-content etc. begrenzt
und greift bei diesem CPT nicht -> hier nachgezogen, matcht die Avada-Variablen 1:1. */
/* 2026-08-07 Korrektur lt. Kunden-PDF: Titel wirkte klein/linksbuendig.
VORHER (siehe Backup Jobboard_CSS.css.bak-vor-h1-groesse-20260807): nur
font-family/font-weight/font-style/color, kein font-size, kein text-align.
font-size zieht jetzt bewusst die globale H1-Basisgroesse
(--h1_typography-font-size, aktuell 2em) statt der Blog-Post-Titel-Groesse
(--post_title_typography-font-size, aktuell 1.25em) -> konsistent zur
echten H1-Optik im uebrigen Content. Wirkt global auf alle Jobpost-Seiten
(is_singular('jobpost') || is_post_type_archive('jobpost')). */
/* 2026-08-07 Nachtrag: font-size/text-align griffen zunaechst nicht - Avada's
fusion-dynamic-css definiert "#wrapper #main .post > h1.fusion-post-title" (2 IDs!)
fuer font-size, das schlaegt jede reine Klassen-Regel unabhaengig von der Ladereihenfolge.
!important ist hier der einzige praktikable Weg (Praezedenzfall: Waschtabelle_CSS.css). */
.jobpost-template-default .fusion-post-title {
font-family: var(--post_title_typography-font-family);
font-weight: var(--post_title_typography-font-weight);
font-style: var(--post_title_typography-font-style);
color: var(--post_title_typography-color);
font-size: var(--h1_typography-font-size) !important;
text-align: center !important;
}
/* --- Ueberschriften innerhalb des Job-Inhalts --- */
.sjb-page .job-title,
.sjb-page .job-features h3,
.sjb-page #sjb-application-form h3 {
color: var(--awb-color7);
font-family: var(--h3_typography-font-family);
font-weight: var(--h3_typography-font-weight);
font-style: var(--h3_typography-font-style);
}
/* --- Fliesstext --- */
.sjb-page .job-description,
.sjb-page .job-features table.table td,
.sjb-page .company-tagline {
color: var(--awb-color8);
font-family: var(--body_typography-font-family);
}
/* --- Meta-Icons (Typ / Ort / Datum) --- */
.sjb-page .job-type i,
.sjb-page .job-location i,
.sjb-page .job-date i {
color: var(--awb-color5);
}
/* --- Buttons: Schnellbewerbung / Mehr erfahren (Avada-Button-Kanon) --- */
.sjb-page .btn.btn-primary {
background-color: var(--awb-color4);
border: 1px solid var(--awb-color5);
color: var(--awb-color7);
text-transform: uppercase;
border-radius: 15px;
font-family: var(--button_typography-font-family);
font-style: var(--button_typography-font-style);
font-weight: var(--button_typography-font-weight);
transition: background-color .2s ease, color .2s ease;
}
.sjb-page .btn.btn-primary:hover,
.sjb-page .btn.btn-primary:focus {
background-color: var(--awb-color7);
border-color: var(--awb-color7);
color: var(--awb-color1);
}
/* --- "Weniger anzeigen" = sekundaerer Button (dunkel, weisser Text) --- */
.sjb-page .v1 .sjb-view-less-btn a {
background-color: var(--awb-color8);
border-color: var(--awb-color8);
color: var(--awb-color1);
border-radius: 15px;
text-transform: uppercase;
}
/* --- B3 (2026-08-06): natives Bewerbungsformular, Feldrahmen kaum sichtbar im Standard-Stil --- */
.sjb-page #sjb-application-form .form-control {
border: 1px solid var(--awb-color5);
border-radius: 4px;
}
.sjb-page #sjb-application-form .form-control:focus {
border-color: var(--awb-color5);
box-shadow: none;
}
.sjb-page #sjb-application-form label {
color: var(--awb-color8);
}
.sjb-page #sjb-application-form input[type="checkbox"],
.sjb-page #sjb-application-form input[type="radio"] {
accent-color: var(--awb-color5);
}
.sjb-page #sjb-application-form .btn.btn-app-modal-close {
background-color: var(--awb-color1);
border: 1px solid var(--awb-color8);
color: var(--awb-color8);
text-transform: uppercase;
border-radius: 15px;
font-family: var(--button_typography-font-family);
font-style: var(--button_typography-font-style);
font-weight: var(--button_typography-font-weight);
}
/* --- Runde 3 (2026-08-07): leeres section_heading-Feld als reiner Box-Trenner
(DSGVO soll optisch nicht im "Gewuenschte Anlagen"-Rahmen stecken). Plugin-CSS
setzt fuer .form-box h3 nur margin-left/right, kein Kollaps -> hier ergaenzt,
damit ein Label-loses keine spuerbare Leerzeile erzeugt und nur die
duenne .form-box-Randlinie als Trennung uebrig bleibt. */
.sjb-page #sjb-application-form .form-box h3:empty {
margin: 0;
line-height: 0;
}
/* --- Runde 4 (2026-08-07): grauen Rahmen der Formular-Abschnitte (Gewuenschte Anlagen,
DSGVO-Trenner, *Pflichtfelder) entfernen - Kundenwunsch. Plugin-Default setzt
border:1px solid #e1e1e1 auf .form-box, hier auf allen drei Abschnitten neutralisiert. */
.sjb-page #sjb-application-form .form-box {
border: none;
}
/* --- Runde 5 (2026-08-07): DSGVO-Kaestchen (checkbox-Feldtyp) groesser, mehr Abstand
zum Text, vertikal mittig neben dem Text - Kundenwunsch. Betrifft aktuell nur DSGVO
(einziges checkbox-Feld), greift generisch fuer jedes label.small (checkbox/radio). */
.sjb-page #sjb-application-form label.small {
display: flex;
align-items: center;
gap: 10px;
}
.sjb-page #sjb-application-form label.small input[type="checkbox"],
.sjb-page #sjb-application-form label.small input[type="radio"] {
width: 18px;
height: 18px;
flex-shrink: 0;
margin: 0;
}
/* --- Runde 6b (2026-08-07): Korrektur - das Plugin-eigene JS (file.convert() in
simple-job-board-public.js) versteckt den nativen Input per opacity:0 und ersetzt ihn
durch eigene /-Elemente innerhalb von .file (daher zeigte die vorherige
::file-selector-button-Regel nur kurz vor dem JS-Lauf, dann Rueckfall auf Plugin-Grau).
Hier stattdessen die tatsaechlich sichtbaren Plugin-Elemente ueberschrieben, gleiche
Selektor-Spezifitaet wie das Plugin-CSS, gewinnt durch Ladereihenfolge (rg-jobboard-css
haengt als Abhaengigkeit von simple-job-board-frontend und laedt danach). */
.sjb-page .sjb-detail .list-data .v1 .jobpost-form .file {
background: #fff;
border: 1px solid var(--awb-color5);
border-radius: 4px;
box-shadow: none;
}
.sjb-page .sjb-detail .list-data .v1 .jobpost-form .file:hover {
border-color: var(--awb-color5);
}
.sjb-page .sjb-detail .list-data .v1 .jobpost-form .file div {
background-color: var(--awb-color4);
border: 1px solid var(--awb-color5);
color: var(--awb-color7);
text-transform: uppercase;
border-radius: 6px;
font-family: var(--button_typography-font-family);
font-style: var(--button_typography-font-style);
font-weight: var(--button_typography-font-weight);
transition: background-color .2s ease, color .2s ease;
}
.sjb-page .sjb-detail .list-data .v1 .jobpost-form .file:hover div {
background-color: var(--awb-color7);
border-color: var(--awb-color7);
color: var(--awb-color1);
}
/* --- Runde 7 (2026-08-07): Schnellbewerbung-Popup hat einen ZWEITEN, eigenstaendigen
Schliessen-Button (rundes "x" oben rechts, sjb-quick-apply-modal-close-btn .close,
per JS in simple-job-board-public.js erzeugt - nicht derselbe wie der "Schliessen"-Button
IM Formular). Avadas globales CSS setzt eine generische bare .close-Klasse auf
color:#fff (fuer eigene Modals/Alerts gedacht) und ueberschreibt damit das Plugin-Grau
(#a4a4a4) - je nach Ladereihenfolge/Spezifitaet macht das Kreuz auf dem hellen
Popup-Hintergrund unsichtbar. !important als einzig zuverlaessiger Weg (gleiches Muster
wie beim H1-Titel-Fix), da Avadas exakte konkurrierende Regel nicht zuverlaessig
spezifitaets-technisch zu unterbieten ist. */
.sjb-page .popup-outer .sjb-quick-apply-modal-close-btn .close {
color: var(--awb-color8) !important;
opacity: 1 !important;
}
.sjb-page .popup-outer .sjb-quick-apply-modal-close-btn .close:hover,
.sjb-page .popup-outer .sjb-quick-apply-modal-close-btn .close:focus {
color: var(--awb-color5) !important;
}