/* ============================================================
karriere.css - die oeffentliche Seite
Traegt AUSSCHLIESSLICH --k-* Tokens, nie --e-*. Die Buehne
gehoert dem Betrieb, nicht Evopio. Umgekehrt taucht --k-* nie
im Werkzeug auf; tests/test_designsystem.py bewacht beides.
Gebaut fuer den Bewerber, nicht fuer den Betrieb: mobil zuerst,
Ansprechpartner sichtbar, Formular ohne Pflichtfelder ausser
Name und Telefon.
============================================================ */
body.karriere{background:#FFFFFF;color:#14181C}
body.karriere::before{display:none} /* keine Evopio-Atmosphaere auf Kundenseiten */
/* ---------- Kopf ---------- */
.k-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:16px 24px;border-bottom:1px solid #EAEDF0;max-width:1120px;margin:0 auto}
.k-marke{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:700;
letter-spacing:-.02em;color:#14181C}
.k-marke img{height:30px;width:auto}
.k-zeichen{width:32px;height:32px;border-radius:9px;background:var(--k-farbe);
color:var(--k-auf);display:grid;place-items:center;font-size:13px;font-weight:700;
box-shadow:inset 0 0 0 1px var(--k-kante)}
.k-tel{font-size:14.5px;font-weight:600;color:var(--k-text)}
/* ---------- Stellenseite: Split ---------- */
.k-split{max-width:1120px;margin:0 auto;padding:34px 24px 60px;
display:grid;grid-template-columns:1fr 366px;gap:44px;align-items:start}
.k-haupt{min-width:0}
.k-haupt h1{font-size:clamp(26px,3.4vw,36px);line-height:1.12;letter-spacing:-.03em;
font-weight:700;margin-bottom:22px;text-wrap:balance}
.k-eck{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;
background:#EAEDF0;border:1px solid #EAEDF0;border-radius:14px;overflow:hidden;
margin-bottom:28px}
.k-eck-punkt{background:#fff;padding:14px 16px}
.k-eck-punkt span{display:block;font-size:12.5px;color:#6B747D;margin-bottom:3px}
.k-eck-punkt b{font-size:16px;font-weight:700;letter-spacing:-.01em}
.k-text{font-size:16px;line-height:1.65;color:#3A424A;max-width:62ch}
.k-text p{margin-bottom:14px}
.k-text ul{margin:0 0 14px 20px}
.k-text li{margin-bottom:6px}
.k-text h2,.k-text h3{font-size:18px;font-weight:700;color:#14181C;
margin:24px 0 10px;letter-spacing:-.015em}
.k-andere{margin-top:38px;padding-top:26px;border-top:1px solid #EAEDF0}
.k-andere h2{font-size:16px;font-weight:700;margin-bottom:12px;letter-spacing:-.015em}
.k-andere-zeile{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
border-bottom:1px solid #F1F3F5;font-size:15px;color:#14181C}
.k-andere-zeile b{color:#6B747D;font-weight:500;font-size:14px;flex:none}
/* ---------- Bewerbungsspalte ---------- */
.k-seite{position:sticky;top:24px}
.k-person{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.k-avatar{width:46px;height:46px;border-radius:50%;background:var(--k-farbe);
color:var(--k-auf);display:grid;place-items:center;font-weight:700;font-size:15px;flex:none;
box-shadow:inset 0 0 0 1px var(--k-kante)}
.k-person b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.k-person span{font-size:13px;color:#6B747D}
.k-form{background:#FBFCFD;border:1px solid #E6EAEE;border-radius:16px;padding:22px}
.k-form h2{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
.k-form .feld label{font-size:13.5px;font-weight:600;color:#14181C}
/* `:not([type=radio])`: die Regel setzt width:100% - ohne die Ausnahme
wird der Radiobutton selbst formularbreit und schiebt seine
Beschriftung aus dem Kasten. Dasselbe Muster hat bei EdelmutSales
schon einmal eine Filterzeile gesprengt. */
.k-form .feld input:not([type=radio]):not([type=checkbox]),
.k-form .feld textarea{border:1.5px solid #D8DDE3;border-radius:10px;
background:#fff;font-size:16px;padding:12px 13px;font-family:inherit;color:#14181C;width:100%}
.k-form .feld input:not([type=radio]):focus,
.k-form .feld textarea:focus{outline:0;border-color:var(--k-farbe);
box-shadow:0 0 0 3px var(--k-hauch)}
.k-form .feld .hilfe{font-size:12.5px;color:#6B747D}
.k-form .feld.fehler input{border-color:#C22B22}
.k-opt{color:#6B747D;font-weight:500} /* gemessen 4.63:1, #8A939C waren 3.04 */
/* Die Kante als inset-Schatten, nicht als border: eine Hausfarbe nahe
Weiss braucht die sichtbare Grenze (WCAG 1.4.11, 3:1 fuer Flaechen),
und der Knopf soll dabei nicht seine Groesse aendern. Bei kraeftigen
Farben ist die Kante die Farbe selbst und faellt nicht auf. */
.k-knopf{width:100%;background:var(--k-farbe);color:var(--k-auf);border:0;border-radius:12px;
padding:15px;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;margin-top:4px;
box-shadow:inset 0 0 0 1px var(--k-kante)}
.k-knopf:active{transform:translateY(1px)}
.k-knopf:focus-visible{outline:3px solid var(--k-tief);outline-offset:2px}
.k-hinweis{font-size:12px;color:#6B747D;line-height:1.5;margin-top:12px}
.k-hinweis a{color:var(--k-text);text-decoration:underline}
.k-fehler{background:#FCEDEC;color:#A8241C;border-radius:10px;padding:11px 13px;
font-size:13.5px;font-weight:600;margin-bottom:14px}
.k-anruf{display:block;text-align:center;margin-top:14px;padding:13px;
border:1.5px solid #D8DDE3;border-radius:12px;font-size:15px;font-weight:600;color:#14181C}
.k-danke{background:var(--k-hauch);border:1px solid var(--k-rand);border-radius:16px;
padding:24px;font-size:15px;line-height:1.55;color:#2A323A}
.k-danke b{display:block;font-size:17px;font-weight:700;color:#14181C;margin-bottom:6px}
.k-danke-hinweis{display:block;margin-top:10px;padding-top:10px;font-size:13.5px;
border-top:1px solid var(--k-rand);color:#4A525A}
/* Der Dateiwaehler. Ohne eigene Regel steht dort der Systemknopf des
Browsers mitten in einem sonst durchgestalteten Formular. */
.k-form input[type=file]{border:1.5px dashed #D8DDE3;background:#fff;padding:11px 13px;
font-size:14px;cursor:pointer;border-radius:10px}
.k-form input[type=file]::file-selector-button{border:0;border-radius:8px;
background:#EEF1F4;color:#14181C;font-family:inherit;font-size:13px;font-weight:600;
padding:7px 12px;margin-right:12px;cursor:pointer}
.k-besetzt{background:#F5F7F9;border:1px solid #E6EAEE;border-radius:16px;padding:22px;
font-size:15px;line-height:1.55;color:#4A525A}
.k-besetzt b{display:block;font-size:16.5px;color:#14181C;margin-bottom:6px}
/* ---------- Karriereseite ---------- */
.k-liste{max-width:820px;margin:0 auto;padding:44px 24px 70px}
.k-hero h1{font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:-.03em;
font-weight:700;margin-bottom:14px;text-wrap:balance}
.k-ueber{font-size:17px;line-height:1.6;color:#4A525A;max-width:58ch;margin-bottom:34px}
.k-stellen{display:flex;flex-direction:column;gap:10px}
.k-stelle{display:flex;align-items:center;justify-content:space-between;gap:18px;
padding:20px 22px;border:1px solid #E6EAEE;border-radius:16px;background:#fff;
transition:border-color .15s,transform .15s}
.k-stelle:hover{border-color:var(--k-farbe);transform:translateY(-1px)}
.k-stelle h2{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
.k-stelle-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:#6B747D}
.k-pfeil{font-size:20px;color:var(--k-text);flex:none}
.k-nichts{border:1.5px dashed #D8DDE3;border-radius:16px;padding:32px;text-align:center;
color:#4A525A;font-size:15px;line-height:1.6}
.k-nichts b{display:block;font-size:18px;color:#14181C;margin-bottom:6px}
.k-nichts .k-anruf{max-width:280px;margin:16px auto 0}
.k-rechts{max-width:720px;margin:0 auto;padding:44px 24px 70px}
.k-rechts h1{font-size:28px;font-weight:700;letter-spacing:-.025em;margin-bottom:20px}
/* ---------- Fuss ---------- */
.k-fuss{border-top:1px solid #EAEDF0;margin-top:20px}
.k-fuss-inhalt{max-width:1120px;margin:0 auto;padding:22px 24px;display:flex;
justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:#6B747D}
.k-fuss-links{display:flex;gap:18px}
.k-fuss-links a{color:#4A525A}
.k-fuss-links a:hover{color:var(--k-text)}
@media (max-width:860px){
.k-split{grid-template-columns:1fr;gap:28px;padding:24px 18px 50px}
.k-seite{position:static}
.k-kopf{padding:14px 18px}
.k-liste{padding:30px 18px 50px}
.k-stelle{padding:17px 18px}
}
/* Selbstauskunft. Bewusst nuechtern: hier steht, was ueber einen
Menschen gespeichert ist - das ist kein Ort fuer Gestaltung. */
.k-daten{margin-top:22px;border:1px solid #EAEDF0;border-radius:14px;overflow:hidden}
.k-daten-zeile{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:13px 16px;
border-bottom:1px solid #F1F3F5;font-size:14.5px}
.k-daten-zeile:last-child{border-bottom:0}
.k-daten-zeile span{color:#6B747D}
.k-daten-zeile b{font-weight:600;color:#14181C}
.k-daten-zeile.lang b{white-space:pre-wrap;font-weight:400;line-height:1.55}
.k-loeschen{margin-top:16px;display:flex;flex-direction:column;gap:12px;
align-items:flex-start}
.k-loeschen label{display:flex;align-items:center;gap:9px;font-size:14.5px;
cursor:pointer}
.k-knopf.schmal{width:auto;padding:13px 22px;font-size:15px}
@media (max-width:640px){ .k-daten-zeile{grid-template-columns:1fr;gap:4px} }
.k-empfohlen{background:var(--k-hauch);border:1px solid var(--k-rand);border-radius:12px;
padding:11px 14px;font-size:13.5px;line-height:1.5;color:#2A323A;margin-bottom:14px}
/* Pre-Screen. Antippbare Flaechen statt nackter Radiobuttons: das
Formular wird zu drei Vierteln auf dem Handy ausgefuellt, und ein
14-px-Kreis trifft dort niemand. */
/* Gestapelt, nicht umgebrochen. Die Spalte ist 366 px breit, und
"keine Erfahrung" oder "in Ausbildung" brechen darin mitten im Wort,
wenn die Punkte nebeneinander stehen. Untereinander liest es sich
besser und trifft sich auf dem Handy zuverlaessiger. */
.k-wahl{display:flex;flex-direction:column;gap:6px}
.k-wahl-punkt{display:flex;align-items:center;gap:10px;cursor:pointer;
border:1.5px solid #D8DDE3;border-radius:10px;padding:10px 13px;font-size:14.5px;
background:#fff;min-height:44px}
.k-wahl-punkt:has(input:checked){border-color:var(--k-kante);background:var(--k-hauch);
font-weight:600}
.k-wahl-punkt input{accent-color:var(--k-farbe);width:17px;height:17px;flex:none;
margin:0;border:0;padding:0}
.k-wahl-punkt span{flex:1}
.k-wahl-punkt:focus-within{box-shadow:0 0 0 3px var(--k-hauch)}
/* Was der Betrieb bietet. Ueber der Beschreibung, weil es die Frage
beantwortet, wegen der jemand wechselt - der Fliesstext daneben
beantwortet, was er dann tut. */
.k-bietet{margin-bottom:26px}
.k-bietet h2{font-size:16px;font-weight:700;letter-spacing:-.015em;margin-bottom:10px}
.k-bietet ul{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;list-style:none;
margin:0;padding:0}
.k-bietet li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.5;
color:#2A323A}
.k-bietet li::before{content:"";position:absolute;left:4px;top:8px;width:7px;height:7px;
border-radius:50%;background:var(--k-farbe)}
@media (max-width:640px){ .k-bietet ul{grid-template-columns:1fr} }
/* --- Kopfbild und Betriebsfotos ----------------------------------------- */
/* Feste Seitenverhaeltnisse und width/height am Bild: ohne die springt die
Seite beim Laden, und genau das hat auf edelmutmedia.de den CLS auf 0,46
getrieben. Das Bild bekommt seinen Platz, bevor es da ist. */
/* Flacher als 8:3. Auf einem breiten Schirm waren das 600 px Bild vor
dem ersten Wort - der Bewerber sah eine Fläche und musste scrollen,
um zu erfahren, worum es geht. `max-height` deckelt es zusätzlich,
weil ein Seitenverhältnis allein bei jeder Breite anders ausfällt. */
.k-kopfbild { width: 100%; aspect-ratio: 21 / 6; max-height: 340px;
overflow: hidden;
background: var(--k-hauch); }
.k-kopfbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-fotos { display: grid; gap: 10px; margin: 40px 0 8px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* `height: auto` ist hier Pflicht, nicht Kosmetik: die width/height-
Attribute am (die den Platz vor dem Laden reservieren) werden zu
einer festen Hoehe von 600 px, und solange die steht, ignoriert der
Browser `aspect-ratio` - die Fotos standen 381 x 600 statt 381 x 286. */
.k-fotos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
display: block; border-radius: 14px; background: var(--k-hauch); }
@media (max-width: 640px) {
.k-kopfbild { aspect-ratio: 16 / 9; max-height: 200px; }
.k-fotos { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
/* Initiativbewerbung. Sie steht unter den Stellen und soll wie eine
Einladung aussehen, nicht wie ein zweites Formular - deshalb ruhiger
als die Stellenkarte und ohne Rahmen in der Hausfarbe. */
.k-initiativ{margin:40px 0 8px;padding:28px;border-radius:18px;
background:var(--k-hauch);border:1px solid var(--k-kante)}
.k-initiativ h2{margin:0 0 8px;font-size:1.25rem}
.k-initiativ p{margin:0 0 18px;color:var(--k-text)}
.k-initiativ label{display:block;margin:14px 0 5px;font-weight:600;font-size:.94rem}
.k-initiativ label span{font-weight:400;color:var(--k-text);opacity:.7}
.k-initiativ input,.k-initiativ textarea{width:100%;padding:11px 13px;
border:1px solid var(--k-rand);border-radius:11px;font:inherit;background:#fff}
.k-initiativ button{margin-top:18px;padding:13px 22px;border:0;border-radius:11px;
background:var(--k-farbe);color:var(--k-auf);font:inherit;font-weight:700;
cursor:pointer}
.k-fehler{margin-bottom:14px;padding:11px 14px;border-radius:11px;
background:#FDECEC;color:#8A1C1C}
/* Das Band über der Entwurfsvorschau. Bewusst in Evopio-Grün und nicht in
der Kundenfarbe: es gehört nicht zur Anzeige, sondern zum Werkzeug -
wer es in Hausfarbe sähe, hielte es für einen Teil der Seite. */
.k-vorschau{background:#0A7A56;color:#fff;padding:11px 20px;font-size:.92rem;
font-weight:600;text-align:center}
/* Kopfzeile mit Branche und Grösse - eine Zeile, kein Kasten. */
.k-eckdaten{margin:6px 0 0;font-size:.95rem;color:var(--k-text);opacity:.8}
/* Filter über der Stellenliste. Ruhig: er ist ein Werkzeug, keine
Aufforderung, und die Stellen sollen den Blick bekommen. */
.k-filter{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
margin:26px 0 4px}
.k-filter label{display:flex;align-items:center;gap:8px;font-size:.92rem;
color:var(--k-text)}
.k-filter select{padding:9px 12px;border:1px solid var(--k-rand);
border-radius:11px;font:inherit;background:#fff;max-width:230px}
.k-filter-weg{font-size:.9rem;color:var(--k-text);text-decoration:underline}
/* Das Video lädt erst auf Klick - der Fuss verspricht keine Cookies. */
.k-video{margin:28px 0 8px}
.k-video-start{display:flex;align-items:center;gap:14px;padding:20px 24px;
border:1px solid var(--k-rand);border-radius:16px;background:var(--k-hauch);
color:var(--k-tief);font-weight:700;text-decoration:none}
.k-video-pfeil{width:42px;height:42px;flex:none;display:grid;place-items:center;
border-radius:50%;background:var(--k-farbe);color:var(--k-auf);font-size:15px}
.k-video-start em{display:block;font-weight:400;font-size:.85rem;opacity:.75;
font-style:normal}
.k-video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:16px}
/* Der Stand auf der Selbstauskunft. Ein Satz, keine Fortschrittsleiste -
eine Leiste suggeriert einen Ablauf mit Zeitplan, den es nicht gibt. */
.k-stand{margin:22px 0 0;padding:16px 20px;border-radius:14px;
background:var(--k-hauch);border:1px solid var(--k-rand)}
.k-stand b{display:block;font-size:1.02rem}
.k-stand span{color:var(--k-text);opacity:.75;font-size:.92rem}
/* Der Ansprechpartner im Kopf. Er stand bis zum 06.09.2026 nur im
Leerzustand - also genau dann nicht, wenn jemand eine Stelle gefunden
hat und anrufen will. Im Handwerk ist der Anruf der kuerzere Weg. */
.k-wer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
margin-top:22px;padding:14px 16px;border:1px solid #E6EAEE;
border-radius:14px;background:#FBFCFD}
.k-wer-bild{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.k-wer-text{min-width:0}
.k-wer-text b{display:block;color:#14181C;font-size:16px}
.k-wer-text span{font-size:14px;color:#6B747D}
/* `.k-anruf` ist sonst ein Knopf ueber die volle Breite (Leerzustand).
Hier steht er in einer Zeile neben dem Namen. */
.k-wer .k-anruf{margin:0 0 0 auto;display:inline-block;width:auto;
padding:11px 20px;white-space:nowrap}
/* Vorteile an der Stellenzeile. Der Betrieb hakt bis zu zwoelf an, und
die Karriereseite kannte bisher keinen einzigen. */
.k-vorteile{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.k-vorteil{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:100px;
background:var(--k-hauch);color:var(--k-tief)}
/* Kleingedrucktes unter einem Formular oder einer Liste. Es gab dafuer
drei Klassennamen und keine einzige Regel - `k-klein`,
`k-hinweis-klein` und `k-fuss-evopio` standen im Markup und wurden vom
Fliesstext geerbt. Jetzt eine Regel, drei Namen darauf. */
.k-klein, .k-hinweis-klein, .k-fuss-evopio{
font-size:12.5px;line-height:1.55;color:#6B747D}
.k-klein{margin-top:14px}
.k-hinweis-klein{margin-top:12px}
/* Der Textblock einer Stellenzeile. Ohne Regel wuchs er nicht mit und
liess den Pfeil rechts kleben; `min-width:0` erlaubt das Kuerzen
langer Titel, statt die Zeile zu sprengen. */
.k-stelle-text{flex:1;min-width:0}
/* --- Terminwahl durch den Bewerber (B-42) ------------------------------
Grosse Ziele: diese Seite wird auf dem Handy geoeffnet, oft mit einer
Hand, oft draussen. 44px ist die Untergrenze, unter der danebengetippt
wird - und ein danebengetippter Termin ist ein verpasster Termin. */
.tw-wahl{margin-top:24px}
/* `min-inline-size:0` ist kein Schnoerkel: ein