/* =====================================================================
ProBit · jobs.css — Jobangebote-Seite + Einzelstelle + Bewerbungsformular
Website-pbautomation · 2026-07-13 (Tag 6)
Nutzt tokens.css (SSoT). Lädt auf page-jobangebote + Job-Kategorie-Singles.
===================================================================== */
/* ---------------------------------------------------------------------
0) WORTUMBRUCH — zentral fuer alle Bausteine mit freiem Text
Deutsche Komposita ("Inbetriebnahmetechniker", "Automatisierungstechnik")
sind breiter als eine Karte. Zwei Effekte greifen zusammen:
a) Flex-/Grid-Items koennen per Default (min-width:auto) nicht schmaler
werden als ihr laengstes Wort,
b) Tracks wie minmax(300px, 1fr) lassen die Spalte trotzdem auf 300px
schrumpfen -> der Text ragt aus der Box.
min-width:0 loest (a). overflow-wrap:break-word ist der NOTNAGEL, falls ein
Wort wirklich breiter ist als seine Box; es ist vererbbar und steht daher
einmal am Container statt pro Textelement.
BEWUSST KEIN hyphens:auto (User-Entscheidung 2026-08-25): Silbentrennung
mitten im Wort ("Automatisie-rungstechnik") wirkt billig. Stattdessen sind
die Karten so dimensioniert, dass die langen Komposita hineinpassen.
--------------------------------------------------------------------- */
.pb-jobcard,
.pb-jobsec,
.pb-jobintro,
.pb-jobfacts,
.pb-perk,
.pb-step {
min-width: 0;
overflow-wrap: break-word;
}
/* ---------------------------------------------------------------------
1) JOB-KARTEN (Shortcode [pb_jobs] → .pb-jobs / .pb-jobcard)
--------------------------------------------------------------------- */
.pb-jobs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--pb-space-5);
margin: var(--pb-space-5) 0 var(--pb-space-6);
}
.pb-jobcard {
display: flex;
flex-direction: column;
gap: 12px;
background: var(--pb-surface);
border: 1px solid var(--pb-card-border);
border-radius: var(--pb-radius-md);
padding: 1.6rem 1.6rem 1.5rem;
text-decoration: none;
color: inherit;
transition: transform var(--pb-transition), box-shadow var(--pb-transition),
border-color var(--pb-transition);
}
.pb-jobcard:hover,
.pb-jobcard:focus-visible {
transform: translateY(-3px);
box-shadow: var(--pb-shadow-md);
border-color: var(--pb-cyan);
}
/* Karte ist ein Link → Theme-Unterstreichung auf allen Karten-Texten entfernen. */
body:not(.home) .entry-content a.pb-jobcard,
body:not(.home) .entry-content a.pb-jobcard:hover,
body:not(.home) .entry-content a.pb-jobcard:focus {
text-decoration: none;
}
.pb-jobcard__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
color: var(--pb-cyan-ink);
}
.pb-jobcard__eyebrow::before {
content: "";
width: 9px;
height: 9px;
border-radius: 2px;
background: var(--pb-cyan);
flex: none;
}
.pb-jobcard__title {
/* balance verteilt die Zeilen gleichmaessig statt "SPS" / langes Wort /
"(m/w/d)" — deutlich ruhigeres Schriftbild bei langen Jobtiteln. */
text-wrap: balance;
font-size: var(--pb-fs-lg);
line-height: var(--pb-lh-snug);
color: var(--pb-heading);
font-weight: 600;
margin: 0;
}
.pb-jobcard__title span {
color: var(--pb-text-muted);
font-weight: 400;
font-size: 0.85em;
}
.pb-jobcard__badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pb-jobbadge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--pb-fs-sm);
color: var(--pb-text-muted);
background: var(--pb-surface-alt);
border: 1px solid var(--pb-line);
border-radius: 999px;
padding: 5px 12px;
line-height: 1.2;
}
.pb-jobbadge svg { width: 15px; height: 15px; flex: none; opacity: 0.8; }
.pb-jobcard__teaser {
font-size: var(--pb-fs-sm);
line-height: var(--pb-lh-body);
color: var(--pb-text-muted);
margin: 2px 0 0;
}
.pb-jobcard__more {
margin-top: auto;
padding-top: 6px;
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
font-weight: 600;
font-size: var(--pb-fs-sm);
color: var(--pb-blue);
}
.pb-jobcard__more svg { width: 17px; height: 17px; transition: transform var(--pb-transition); }
.pb-jobcard:hover .pb-jobcard__more svg { transform: translateX(4px); }
.pb-jobs__empty {
color: var(--pb-text-muted);
font-size: var(--pb-fs-base);
padding: var(--pb-space-4) 0;
}
/* ---------------------------------------------------------------------
2) BEWERBUNGSFORMULAR (.wps-form — CF7 844 + 946)
--------------------------------------------------------------------- */
.wps-form {
max-width: 100%;
margin: var(--pb-space-5) 0 0;
background: var(--pb-surface);
border: 1px solid var(--pb-card-border);
border-radius: var(--pb-radius-lg);
padding: clamp(1.5rem, 4vw, 2.5rem);
}
.wps-form > h2 {
font-size: var(--pb-fs-xl);
color: var(--pb-heading);
margin: 0 0 0.25rem;
}
.wps-form > h3 {
font-size: 0.82rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pb-text-muted);
font-weight: 600;
margin: var(--pb-space-5) 0 var(--pb-space-3);
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--pb-line);
}
.wps-form > h3:first-of-type { margin-top: var(--pb-space-4); }
.wps-form > p { font-size: var(--pb-fs-sm); color: var(--pb-text-muted); margin: 0 0 var(--pb-space-3); }
.wps-form label {
display: block;
font-size: var(--pb-fs-base); /* 18px, war 15px — Feldbezeichnung darf lesbar sein */
line-height: var(--pb-lh-snug); /* sonst geerbte 32.64px vom Theme = doppelter Abstand */
font-weight: 500;
color: var(--pb-text);
/* 24px ueber / 8px unter: Label gehoert sichtbar zum Feld DARUNTER (Naehe-Prinzip). */
margin: var(--pb-space-5) 0 8px;
}
/* CF7 haengt hinter jedes Label ein
. Unser Label ist bereits display:block,
der
erzeugt daher nur eine leere Zeilenbox (~33px Luft) vor dem Feld. */
.wps-form label + br { display: none; }
/* CF7 wrappt jedes Control — als Block mit Abstand darstellen */
.wps-form .wpcf7-form-control-wrap { display: block; }
.wps-form input[type="text"],
.wps-form input[type="email"],
.wps-form input[type="tel"],
.wps-form select,
.wps-form textarea {
width: 100%;
box-sizing: border-box;
font: inherit;
font-size: var(--pb-fs-base);
color: var(--pb-text);
background: var(--pb-surface);
border: 1px solid var(--pb-card-border);
border-radius: var(--pb-radius-md);
padding: 0.7rem 0.9rem;
transition: border-color var(--pb-transition), box-shadow var(--pb-transition);
}
.wps-form textarea { min-height: 130px; resize: vertical; line-height: var(--pb-lh-body); }
.wps-form input::placeholder,
.wps-form textarea::placeholder { color: #9a9a9a; }
.wps-form input[type="text"]:focus,
.wps-form input[type="email"]:focus,
.wps-form input[type="tel"]:focus,
.wps-form select:focus,
.wps-form textarea:focus {
outline: none;
border-color: var(--pb-cyan);
box-shadow: 0 0 0 3px rgba(41, 163, 224, 0.22);
}
/* Select mit eigenem Chevron statt System-Look */
.wps-form select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23002F66' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.9rem center;
padding-right: 2.6rem;
cursor: pointer;
}
/* ---- Datei-Upload: aus XP-Look → moderne Drop-Zone -------------------- */
.wps-form input[type="file"] {
width: 100%;
box-sizing: border-box;
font-size: var(--pb-fs-sm);
color: var(--pb-text-muted);
border: 1.5px dashed var(--pb-card-border);
border-radius: var(--pb-radius-md);
padding: 0.9rem;
background: var(--pb-surface-alt);
cursor: pointer;
transition: border-color var(--pb-transition), background var(--pb-transition);
}
.wps-form input[type="file"]:hover,
.wps-form .pb-file--drag input[type="file"] {
border-color: var(--pb-cyan);
background: #fff;
}
.wps-form input[type="file"]::file-selector-button {
margin-right: 14px;
padding: 0.55rem 1.1rem;
border: none;
border-radius: var(--pb-radius-sm);
background: var(--pb-blue);
color: #fff;
font: inherit;
font-size: var(--pb-fs-sm);
font-weight: 600;
cursor: pointer;
transition: background var(--pb-transition);
}
.wps-form input[type="file"]::file-selector-button:hover { background: var(--pb-blue-600); }
/* WebKit-Legacy-Pendant */
.wps-form input[type="file"]::-webkit-file-upload-button {
margin-right: 14px;
padding: 0.55rem 1.1rem;
border: none;
border-radius: var(--pb-radius-sm);
background: var(--pb-blue);
color: #fff;
font-weight: 600;
cursor: pointer;
}
/* JS-Enhancement: gewählte Datei als Chip */
.pb-file-chip {
display: none;
align-items: center;
gap: 10px;
margin-top: 8px;
border: 1px solid var(--pb-line);
border-radius: var(--pb-radius-md);
padding: 0.55rem 0.75rem;
background: var(--pb-surface);
}
.pb-file-chip.is-set { display: flex; }
.pb-file-chip__icon {
flex: none; width: 32px; height: 32px; border-radius: var(--pb-radius-sm);
background: rgba(0, 47, 102, 0.08); color: var(--pb-blue);
display: flex; align-items: center; justify-content: center;
}
.pb-file-chip__icon svg { width: 18px; height: 18px; }
.pb-file-chip__name { flex: 1; min-width: 0; font-size: var(--pb-fs-sm); color: var(--pb-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-file-chip__size { font-size: 0.8rem; color: var(--pb-text-muted); flex: none; }
/* ---- Checkbox (Datenschutz) ----------------------------------------- */
.wps-form .wpcf7-checkbox { display: block; margin-top: var(--pb-space-4); }
.wps-form .wpcf7-checkbox .wpcf7-list-item { margin: 0; }
.wps-form .wpcf7-checkbox label {
display: flex;
align-items: flex-start;
gap: 11px;
margin: 0;
font-weight: 400;
cursor: pointer;
}
.wps-form .wpcf7-checkbox input[type="checkbox"] {
flex: none;
width: 20px;
height: 20px;
margin-top: 2px;
accent-color: var(--pb-blue);
cursor: pointer;
}
.wps-form .wpcf7-checkbox .wpcf7-list-item-label {
font-size: var(--pb-fs-sm);
color: var(--pb-text-muted);
line-height: var(--pb-lh-snug);
}
/* ---- Absende-Button -------------------------------------------------- */
.wps-form input[type="submit"] {
margin-top: var(--pb-space-5);
display: inline-block;
font: inherit;
font-size: var(--pb-fs-base);
font-weight: 600;
color: #fff;
background: var(--pb-blue);
border: none;
border-radius: var(--pb-radius-md);
padding: 0.85rem 2rem;
cursor: pointer;
transition: background var(--pb-transition), transform var(--pb-transition);
}
.wps-form input[type="submit"]:hover { background: var(--pb-blue-600); }
.wps-form input[type="submit"]:active { transform: scale(0.98); }
/* CF7-Statusmeldungen ruhig einbetten */
.wps-form .wpcf7-response-output,
.wpcf7-form > .wpcf7-response-output {
margin-block: var(--pb-space-4) 0 !important;
border-radius: var(--pb-radius-sm);
font-size: var(--pb-fs-sm);
padding: 0.7rem 1rem;
}
.wps-form .wpcf7-not-valid-tip { font-size: 0.85rem; color: #b03022; margin-top: 4px; }
.wps-form .wpcf7-spinner { margin-top: var(--pb-space-4); }
/* ---------------------------------------------------------------------
3) EINZELSTELLE — kleiner Bewerbungs-Abschnitt vor dem Formular
(pb-article-Layout kommt aus news.css)
--------------------------------------------------------------------- */
.pb-article .wps-form { margin-left: auto; margin-right: auto; }
/* Tag 9 - Schmale Schirme: die langen Berufsbezeichnungen sind laenger als
die Textbox. Gemessen bei 375px: "Elektroanlagentechniker" = 402px in
einer 296px-Box; ohne diese Regel schneidet html{overflow-x:clip} ab.
Groesse aus dem Verhaeltnis Wortbreite:Boxbreite bemessen, nicht geraten. */
@media (max-width: 520px) {
/* Der Stellentitel steht seit dem Hero-Umbau in .pb-page-hero__title.
Gemessen bei 375px: "SPS Inbetriebnahmetechniker" ragte 84px aus der
296px-Box; noetige Groesse aus dem Verhaeltnis Wortbreite:Boxbreite. */
.pb-page-hero--job .pb-page-hero__title { font-size: 1.65rem; }
.wps-form > h2 { font-size: 1.55rem; }
}
/* ---------------------------------------------------------------------
4) STELLENANZEIGE-EINZELSEITE (Content-Filter inc/jobs-layout.php)
--------------------------------------------------------------------- */
/* Fakten-Band */
.pb-jobfacts {
background: var(--pb-blue);
color: #fff;
border-radius: var(--pb-radius-md);
padding: 1.1rem 1.3rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 14px;
margin: 0 0 var(--pb-space-5);
}
.pb-jobfacts__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-jobfacts__chip {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255, 255, 255, 0.14); color: #fff;
font-size: var(--pb-fs-sm); padding: 5px 12px; border-radius: 999px;
}
.pb-jobfacts__chip svg { width: 15px; height: 15px; opacity: 0.9; }
.pb-jobfacts__salary {
display: inline-flex; align-items: center; gap: 7px;
font-weight: 600; font-size: var(--pb-fs-base);
}
.pb-jobfacts__salary svg { width: 18px; height: 18px; color: var(--pb-cyan-bright); }
.pb-jobfacts__apply {
margin-left: auto;
background: var(--pb-cyan); color: var(--pb-blue);
font-weight: 600; font-size: var(--pb-fs-sm);
padding: 0.6rem 1.15rem; border-radius: var(--pb-radius-sm);
text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
white-space: nowrap; transition: background var(--pb-transition);
}
.pb-jobfacts__apply:hover { background: var(--pb-cyan-bright); }
.pb-jobfacts__apply svg { width: 16px; height: 16px; }
/* Intro-Lead */
/* Tag 9: Lesespalte. Der Intro lief ueber die volle Inhaltsbreite
(gemessen 1136px = 111-125 Zeichen pro Zeile), jetzt ~75 wie ueberall. */
.pb-jobintro { font-size: var(--pb-fs-md); line-height: var(--pb-lh-body); color: var(--pb-text); margin-bottom: var(--pb-space-5); max-width: var(--pb-measure-read); }
.pb-jobintro p { margin: 0 0 var(--pb-space-3); }
.pb-jobintro p:last-child { margin-bottom: 0; }
/* Aufgaben / Profil als Karten mit Check-Listen */
.pb-jobgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--pb-space-4); margin-bottom: var(--pb-space-5); }
.pb-jobsec { background: var(--pb-surface); border: 1px solid var(--pb-card-border); border-radius: var(--pb-radius-md); padding: 1.3rem 1.4rem; }
.pb-jobsec__h { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.pb-jobsec__ic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(41, 163, 224, 0.14); color: var(--pb-cyan-ink); display: flex; align-items: center; justify-content: center; }
.pb-jobsec__ic svg { width: 20px; height: 20px; }
.pb-jobsec__h h3 { margin: 0; font-size: var(--pb-fs-lg); color: var(--pb-heading); font-weight: 600; }
.pb-jobsec ul.pb-chk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pb-jobsec ul.pb-chk li {
position: relative; margin: 0; padding-left: 30px;
font-size: var(--pb-fs-sm); line-height: var(--pb-lh-snug); color: var(--pb-text);
}
.pb-jobsec ul.pb-chk li::before {
content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px;
background: no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d9e75' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E");
}
/* Abschnitts-Label (Benefits / Schritte) */
.pb-sec-h { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pb-text-muted); font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: var(--pb-space-4); }
.pb-sec-h__dot { width: 9px; height: 9px; border-radius: 2px; background: var(--pb-cyan); flex: none; }
/* Benefit-Kacheln */
.pb-perkswrap { margin-bottom: var(--pb-space-5); }
/* Kachelbreite richtet sich nach dem LAENGSTEN WORT, nicht nach der Optik:
bei 180px (effektiv 197px, davon ~162px Text) zerriss `overflow-wrap` die
Komposita mitten im Wort ("Industrieautomatisier-ung",
"Entwicklungsmoeglichkei-ten"). 230px ergeben ~226px Textbreite — genug
fuer das laengste vorkommende Wort. WICHTIG: das Icon (34px) + gap (11px)
+ Padding (35px) fressen 80px der Kachel — die nutzbare Textbreite ist
also rund 80px kleiner als die Kachel. Danach bemessen, nicht nach der
Kachelbreite. Lieber eine Spalte weniger als zerrissene Woerter.
grid-auto-rows:1fr haelt die Reihen gleich hoch. */
.pb-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.pb-perk { display: flex; align-items: flex-start; gap: 11px; background: var(--pb-surface-alt); border-radius: var(--pb-radius-md); padding: 1rem 1.1rem; min-width: 0; }
.pb-perk__ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #fff; color: var(--pb-cyan-ink); display: flex; align-items: center; justify-content: center; }
.pb-perk__ic svg { width: 20px; height: 20px; }
/* min-width:0 muss am Flex-Item selbst stehen (nicht vererbbar); Umbruch kommt
aus der zentralen Regel in Abschnitt 0. */
.pb-perk__t { font-size: 0.88rem; line-height: 1.45; color: var(--pb-text); min-width: 0; }
/* 3-Schritte-Streifen */
.pb-steps { margin-bottom: var(--pb-space-5); }
.pb-steps__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--pb-space-4); }
.pb-step { display: flex; align-items: flex-start; gap: 12px; }
.pb-step__n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pb-blue); color: #fff; font-weight: 600; font-size: var(--pb-fs-sm); display: flex; align-items: center; justify-content: center; }
/* line-height MUSS am Block stehen: bei inline-Kindern bestimmt der "Strut" des
Blocks die Zeilenboxhoehe (max aus Strut und eigener line-height). Eine
line-height nur am inline- verpufft daher (Theme-Erbe war 33px). */
.pb-step__b { min-width: 0; line-height: var(--pb-lh-snug); }
.pb-step__b b { display: block; font-size: var(--pb-fs-base); color: var(--pb-heading); font-weight: 600; margin-bottom: 5px; }
.pb-step__b span { display: block; font-size: var(--pb-fs-sm); color: var(--pb-text-muted); line-height: var(--pb-lh-snug); }
/* Stellenanzeige breiter als die News-Lesespalte (720px) — mehr Raum für die Grids. */
/* Tag 9: Stellenanzeige auf das Container-Mass der uebrigen Seiten
(Inhalt endet damit auf x=145/1281 wie Hero, Raster und Kacheln). */
body.single-post .pb-article.category-jobangebote { max-width: var(--pb-container); }
/* ---------------------------------------------------------------------
TAG 9 - NAVY-HERO AUF DER STELLENANZEIGE (User-Entscheidung)
Die Stellenanzeigen waren die einzigen Seiten ohne Hero. Der Hero traegt
jetzt selbst den Abstand zum fixen Header, deshalb faellt der Vorlauf des
Artikels weg - sonst klaffte darueber eine leere Flaeche.
Leiterbahnen und Label-Sprache kommen automatisch aus site-fx (die Regeln
haengen an .pb-page-hero).
--------------------------------------------------------------------- */
body.single-post .pb-article.category-jobangebote { padding-top: 0; }
@media (min-width: 960px) {
body.single-post .pb-article.category-jobangebote { padding-top: 0; }
}
/* Der Hero sitzt im Artikel-Container - der Full-Bleed-Ausbruch rechnet vom
halben Container aus, deshalb hier explizit auf die Bleed-Tokens. */
.pb-page-hero--job {
width: var(--pb-bleed-w);
margin-left: var(--pb-bleed-m);
margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
}
/* Fakten-Band schliesst direkt an den Hero an. */
.pb-article.category-jobangebote .pb-jobfacts { margin-top: 0; }
/* Bewerbungsformular auf der Einzelstelle auf angenehme Lesebreite begrenzen. */
/* Tag 9: Karte und Statusmeldung teilen eine Breite. Die Meldung ist ein
GESCHWISTER der Karte (CF7 haengt sie ans