@charset "UTF-8";
/* ==========================================================================
   KAHRAMAN GMBH & CO. KG — VODAFONE SHOPS
   career.css · Seite „Karriere"
   --------------------------------------------------------------------------
   Grundlage : Kahraman Designsystem v1.0 (global.css)
   Präfix    : kh-career  ·  Schema: kh-block__element--modifier

   Hier steht nur, was es ausschliesslich auf der Karriereseite gibt:
   Kopfbereich, Aspektraster, Themenfelder, Stellenbereich, Ablaufschritte
   und Fragenblock. Abschnitte, Container, Typografie, Karten, Medienrahmen,
   Markenfläche, Ringgeometrie und Schaltflächen kommen aus global.css.

   Rot ist Werkzeug, kein Anstrich. Auf dieser Seite trägt genau eine Fläche
   Rot — der Kopfbereich. Sonst erscheint es nur als Kante über einem Aspekt,
   als Ziffer im Ablauf, als Oberkante des Stellenbereichs und auf der
   primären Schaltfläche.
   ========================================================================== */


/* ==========================================================
   00. VERTIKALER RHYTHMUS
   ==========================================================
   Gemessen vor der Überarbeitung: alle acht Abschnitte lagen auf
   kh-section--tight und damit auf identischen 48,8px oben wie unten,
   bei streng abwechselnd weissem und hellgrauem Grund.

   Die Abstände folgen weiterhin dem 4px-System, sind aber nach
   Gewicht gestaffelt: Auftakt und Abschluss atmen, Aufzählungen
   stehen dichter. Die Elementor-Polster bleiben leer.
   ========================================================== */

.kh-career { padding-block: clamp(48px, 4vw + 24px, 80px); }

.kh-career-hero             { padding-block: clamp(56px, 5vw + 28px, 104px) clamp(40px, 3vw + 20px, 64px); }
.kh-career-intro            { padding-block: clamp(48px, 4vw + 24px, 96px); }
.kh-career-why              { padding-block: clamp(40px, 3vw + 20px, 72px); }
.kh-career-topics           { padding-block: clamp(48px, 4vw + 24px, 88px); }
.kh-career-jobs             { padding-block: clamp(48px, 4vw + 28px, 96px); }
.kh-career-process-section  { padding-block: clamp(48px, 4vw + 24px, 88px); }
.kh-career-questions        { padding-block: clamp(40px, 3vw + 20px, 72px); }
.kh-career-cta              { padding-block: clamp(56px, 5vw + 28px, 112px); }


/* ==========================================================
   01. KOPFBEREICH — ROTE MARKENFLAECHE
   ==========================================================
   Vorher: Text in der linken Hälfte, rechte Hälfte auf 1440px
   vollständig weiss. Jetzt trägt der Kopf die Marke.

   Die Farbrollen kommen vollständig aus global.css, weil der
   Abschnitt zusätzlich kh-section--brand trägt — Überschrift,
   Lead, Eyebrow und beide Schaltflächenarten sind dort für rote
   Flächen bereits definiert. Die Pillenform des Eyebrows und die
   Ringgeometrie stehen in global.css, Abschnitt 23.

   Hier steht nur, was diese Seite eigenhändig braucht: Mass,
   Rhythmus und die Lage des Kreises.
   ========================================================== */

.kh-career-hero {
  padding-block: clamp(56px, 5vw + 28px, 120px) clamp(48px, 4vw + 24px, 96px);

  /* MASS, LAGE UND DAUER DES MOTIVS STEHEN WEITER UNTEN
     Hier standen bis zuletzt --kh-ring-cx: 76%, --kh-ring-cy: 24%,
     --kh-mark-size und --kh-radar-dauer: 12s. Alle vier wurden vom
     Abschnitt „ZURÜCK AUF DAS FREIGEGEBENE MOTIV-SYSTEM" am Ende
     dieser Datei überschrieben und waren damit auf jeder Breite
     wirkungslos — toter Code, der beim nächsten Lesen in die Irre
     geführt hätte. Entfernt; gültig ist nur noch der eine Block.

     Was hier bleibt, ist die Klarzone: sie wird unten nicht neu
     gesetzt. */

  /* HELLIGKEIT UND KLARZONE — JETZT WIE AUF DER REFERENZ
     Hier stand --kh-radar-klar: 52% bei voller Helligkeit, also
     dem Vorgabewert --kh-radar-hell: .3. Das war rechnerisch
     zulässig (im Motiv liegt auf dieser Seite kein Fliesstext),
     sah aber anders aus als das Vorbild: Startseite und „Über uns"
     fahren beide 85 % Klarzone bei .09 Helligkeit und zeichnen
     damit dünne, ruhige Kreise. Mit .3 wird aus denselben Wellen
     eine helle Scheibe mit Hof — im Screenshot-Vergleich bei
     1440px deutlich lauter als die beiden Referenzseiten und
     genau das, was der Masterprompt als „Glow" ausschliesst.

     Also dieselben zwei Werte wie dort. Das ist zugleich der
     sicherere Weg: 9 Prozent Weiss liegen unter der in global.css
     hergeleiteten Grenze von 10,8 Prozent (4,50:1), und zwar auf
     dem GESAMTEN Radius. Die Welle darf damit überall laufen — was
     unter 64em auch nötig ist, weil das Motiv dort hinter den
     Schaltflächen beginnt (nächster Text bei 83 Prozent des
     Radius, gemessen bei 390px). */
  --kh-radar-hell: .09;
  --kh-radar-klar: 85%;
}

.kh-career-hero__header { max-width: none; }

/* Die Überschrift ist der Blickfang der Seite. */
.kh-career-hero .kh-h1 .elementor-heading-title {
  font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 19ch;
}

/* ELEMENTOR-FALLE · Satzbreite
   Elementor setzt mit

       .elementor.elementor .e-con > .elementor-widget { max-width: 100% }

   eine Regel der Gewichtung (0,4,0) auf jedes Widget. Eine Satzbreite
   am Widget selbst kommt dagegen nicht an. Sie gehört deshalb auf das
   innere Titelelement, das keine konkurrierende Regel hat. */
.kh-career-hero .kh-section-header__lead .elementor-heading-title {
  max-width: 48ch;
  font-weight: var(--kh-font-weight-regular);
}

/* NACHTRAG 20.10.2026 · DER MENSCHLICHE SATZ MUSS TRAGEN
   -------------------------------------------------------------
   Der Kopf sagt „Gemeinsam Zukunft verbinden" — das koennte
   jede Unternehmensseite sein. Der einzige Satz, der diese
   Seite als Karriereseite ausweist, ist der darunter: „Sie
   moechten mit Menschen arbeiten …". Er stand bei 1440px in
   18px neben einem 52px grossen Faktenpanel und war damit das
   leiseste Element der roten Flaeche.

   Eine Stufe groesser und auf 42 Zeichen gesetzt: er bricht
   damit in drei kurze, gut lesbare Zeilen und steht als eigene
   Aussage neben der Ueberschrift, nicht als Beiwerk darunter.
   Kein Wort aendert sich. */
.kh-career-hero .kh-section-header__lead .elementor-heading-title {
  font-size: clamp(1.0625rem, .95rem + .55vw, 1.375rem);
  line-height: 1.5;
  max-width: 42ch;
  color: rgba(255, 255, 255, .94);
}


/* ==========================================================
   02. EINSTIEG — Text und Bild
   ==========================================================
   Vorher zwei gleich breite Spalten. Jetzt 55/45 zugunsten des
   Textes, und das Bild bekommt einen Rahmen statt einer nackten
   Kante.
   ========================================================== */

@media (min-width: 62em) {

  .kh-career-intro .kh-grid--split {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 4vw, 72px);
  }
}

.kh-career-intro .elementor-widget-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--kh-radius-lg);
  background-color: var(--kh-color-surface-100);
  aspect-ratio: 4 / 3;
}

.kh-career-intro .elementor-widget-image > .elementor-widget-container,
.kh-career-intro .elementor-widget-image figure { display: block; block-size: 100%; }

.kh-career-intro .elementor-widget-image img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}


/* ==========================================================
   03. ASPEKTE — VERSETZTES EDITORIAL-RASTER
   ==========================================================
   Vorher vier gleich hohe Spalten mit roter Oberkante — dieselbe
   Viererreihe, die auf dieser Seite dreimal hintereinander stand.
   Jetzt läuft jede Spalte eine Stufe tiefer als die vorige und
   trägt eine Ordnungsziffer. Derselbe Inhalt, aber eine
   Komposition statt eines Rasters.

   Die Ziffer ist rein ordnend und steht zusätzlich zur
   Überschrift — sie trägt keine Information allein.

   Diese Treppe wird derzeit nur hier gebraucht. Sobald eine
   zweite Seite sie braucht, gehört sie nach global.css.
   ========================================================== */

.kh-career-aspects {
  display: grid;
  gap: var(--kh-space-lg);
  grid-template-columns: 1fr;
  counter-reset: kh-career-aspect;
}

/* NACHTRAG 20.10.2026 · DIE ZIFFERN GEHOEREN DEM ABLAUF
   -------------------------------------------------------------
   Hier standen vier gleich breite Spalten mit grossen
   Ordnungsziffern 01–04. Weiter unten steht der
   Bewerbungsablauf — ebenfalls vier Spalten, ebenfalls
   nummeriert, dort aber mit rotem Punkt auf einer Schiene.
   Zwei nummerierte Viererreihen auf einer Seite: die Ziffer
   verliert damit genau das, was sie leisten soll.

   Nummerieren heisst „eins nach dem anderen". Beim Ablauf
   stimmt das, beim Arbeitsumfeld nicht — Kundenkontakt und
   Themenvielfalt stehen nebeneinander. Die Ziffern entfallen
   hier also aus demselben inhaltlichen Grund, aus dem sie bei
   den Themenfeldern nie eingeführt wurden (siehe Abschnitt 04).

   An ihre Stelle tritt eine Rangfolge. Zwei der vier Aussagen
   beschreiben die Arbeit („Persönlicher Kundenkontakt",
   „Abwechslungsreiche Themen") — sie tragen den Abschnitt und
   stehen gross. Die beiden anderen („Shops in mehreren
   Regionen", „Erfahrung seit 1999") sind Angaben zum
   Unternehmen; sie bleiben vollständig erhalten, stehen aber
   als leise Fussleiste darunter. Aus vier Gleichen werden zwei
   Aussagen mit zwei Belegen — und damit etwas anderes als die
   Viererreihe des Ablaufs.

   Die durchgehende 2px-Kante bleibt: sie eroeffnet den
   Abschnitt. */

.kh-career-aspects {
  border-block-start: 2px solid var(--kh-color-ink-900);
  padding-block-start: var(--kh-space-xl);
}

@media (min-width: 48em) {

  .kh-career-aspects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kh-space-xl) clamp(32px, 4vw, 72px);
  }
}

/* ELEMENTOR-FALLE · display UND Reihenfolge
   Die Spalten sind Elementor-Container und tragen .e-con.e-flex
   mit display:flex (0,2,0). Ein display:grid mit einer Klasse
   (0,1,0) verliert dagegen — gemessen lagen Ziffer, Strich,
   Überschrift und Text übereinander, der rote Strich stand
   hinter dem Text statt davor.

   Drei Klassen (0,3,0) setzen das Raster durch, und vier feste
   Zeilennummern legen die Reihenfolge fest, statt sie aus der
   Quelltextfolge der Pseudo-Elemente abzuleiten. */
.kh-career-why .kh-career-aspects .kh-career-aspect {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 0;
  border: 0;
  padding-top: 0;
}

/* ENTFALLEN: ZIFFER UND ROTER STRICH JE SPALTE
   Beide hingen an ::before und ::after des Eintrags. Die Ziffer
   ist zum Ablauf gewandert (sie stand dort ohnehin schon), der
   rote Strich war ihr Trenner und hat ohne sie keine Aufgabe
   mehr. Elementor setzt diese beiden Pseudos auf
   position:absolute; mit ihrem Wegfall entfaellt auch der
   position:static-Ausgleich, der dafuer noetig war. */
.kh-career-why .kh-career-aspects .kh-career-aspect::before,
.kh-career-why .kh-career-aspects .kh-career-aspect::after {
  content: none;
}

.kh-career-why .kh-career-aspects .kh-career-aspect__title {
  grid-row: auto;
  margin: 0 0 var(--kh-space-2xs);
}

.kh-career-why .kh-career-aspects .kh-career-aspect__text {
  grid-row: auto;
  margin: 0;
}

.kh-career-aspect__text {
  margin: 0;
  color: var(--kh-color-ink-700);
}

/* DIE BEIDEN AUSSAGEN
   Groesser gesetzt als zuvor — sie tragen den Abschnitt jetzt
   allein. Die Satzbreite gehoert ans innere Titelelement (siehe
   Elementor-Falle oben). */
.kh-career-why .kh-career-aspects .kh-career-aspect:nth-child(-n+2) .kh-career-aspect__title .elementor-heading-title {
  font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.kh-career-why .kh-career-aspects .kh-career-aspect:nth-child(-n+2) .kh-career-aspect__text .elementor-heading-title {
  font-size: var(--kh-text-base);
  line-height: var(--kh-leading-normal);
  max-width: 42ch;
}

/* DIE BEIDEN BELEGE
   Eine Fussleiste, kein drittes und viertes Feld: Haarlinie
   darueber, kleiner Satz, Benennung und Angabe nebeneinander
   statt uebereinander. Der Groessensprung zu den beiden
   Aussagen ist das Ordnungsmittel. */
.kh-career-why .kh-career-aspects .kh-career-aspect:nth-child(n+3) {
  padding-block-start: var(--kh-space-md);
  border-block-start: 1px solid var(--kh-color-line-200);
}

.kh-career-why .kh-career-aspects .kh-career-aspect:nth-child(n+3) .kh-career-aspect__title .elementor-heading-title {
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-snug);
}

.kh-career-why .kh-career-aspects .kh-career-aspect:nth-child(n+3) .kh-career-aspect__text .elementor-heading-title {
  font-size: var(--kh-text-sm);
  line-height: 1.55;
  color: var(--kh-color-ink-500);
}

/* Benennung und Angabe des Belegs stehen nebeneinander — damit
   wird die Zeile zur Fussnote und nicht zur dritten kleinen
   Karte.

   GEMESSEN UND KORRIGIERT · ERST AB 62em
   Zuerst stand diese Regel ab 48em. Dort ist die Spalte aber
   nur 317px breit (zwei Spalten in 768px), und die laengste
   Benennung „Shops in mehreren Regionen" liess fuer die Angabe
   daneben kaum Platz: gemessen wurden die beiden Belege mit
   179px HOEHER als die beiden Aussagen darueber mit 130px —
   die Rangfolge stand damit auf dem Kopf. Ab 62em sind es
   529px je Spalte; dort traegt die Zeile. Darunter bleiben die
   Belege klein, aber zweizeilig. */
@media (min-width: 62em) {

  .kh-career-why .kh-career-aspects .kh-career-aspect:nth-child(n+3) {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    column-gap: var(--kh-space-md);
    align-items: baseline;
  }

  .kh-career-why .kh-career-aspects .kh-career-aspect:nth-child(n+3) .kh-career-aspect__title {
    margin-block-end: 0;
  }
}

/* NACHTRAG 20.10.2026 · DIE UEBERSCHRIFT KOMMT IN DIE HIERARCHIE
   Dieselbe Begruendung wie bei „Ihre naechste Aufgabe" weiter
   unten: Elementor faerbt jede Ueberschrift ueber
   .elementor-widget-heading .elementor-heading-title rot und
   gewinnt damit gegen die Klasse am Wrapper. Rote Augenbraue
   plus rote Ueberschrift sind zwei rote Ebenen uebereinander. */
.kh-career-why .kh-section-header__title .elementor-heading-title {
  color: var(--kh-color-ink-900);
}


/* ==========================================================
   04. THEMENFELDER — DIE KONTRASTFLAECHE DER SEITE
   ==========================================================
   WAS SICH GEAENDERT HAT UND WARUM

   Der Abschnitt stand hell, direkt nach der Treppe 01–04 des
   Arbeitsumfelds, und zeigte vier gleich grosse Blöcke in einem
   2x2-Raster. Zwei Vierergruppen hintereinander, beide hell,
   beide gleich gewichtet — die Seite fiel an dieser Stelle in
   einen Trott.

   Jetzt ist es die einzige dunkle Fläche vor dem Abschluss und
   damit der Kontrastpunkt der Dramaturgie: rot, weiss, hell,
   DUNKEL, weiss, hell, hell, dunkel.

   Die Komposition ist bewusst eine andere als oben: dort eine
   Treppe aus vier Spalten, hier ein Zweispalter mit einer
   durchlaufenden Zeilenliste. Gleiche Inhalte, andere Handschrift.
   ========================================================== */

@media (min-width: 62em) {

  .kh-career-topics > .kh-container {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    column-gap: clamp(40px, 5vw, 96px);
    align-items: start;
  }

  /* Die Kopfsäule bleibt stehen, während die Themen durchlaufen. */
  .kh-career-topics .kh-section-header {
    position: sticky;
    top: var(--kh-space-3xl);
    grid-column: 1;
    margin-bottom: 0;
  }

  /* 16ch statt 13ch: bei 13 brach „Womit Sie bei uns zu tun haben"
     in drei sehr kurze Zeilen. */
  .kh-career-topics .kh-section-header__title .elementor-heading-title {
    font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    max-width: 16ch;
  }

  .kh-career-topics .kh-career-fields { grid-column: 2; }
}

.kh-career-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-block-start: 1px solid rgba(255, 255, 255, .18);
}

/* Die Zeile: Ziffer, Begriff, Erläuterung. Kein Kasten, kein
   Radius, kein Schatten — auf der dunklen Fläche trägt der
   Zeilenabstand, nicht der Rahmen. */
.kh-career-topics .kh-career-fields .kh-career-field {
  position: relative;
  display: grid;
  grid-template-columns: 2px minmax(0, 1fr);
  column-gap: var(--kh-space-md);
  row-gap: var(--kh-space-2xs);
  padding-block: var(--kh-space-lg);
  border-block-end: 1px solid rgba(255, 255, 255, .18);
}

/* GEMESSEN UND KORRIGIERT · EIN NUMMERNSYSTEM ZU VIEL
   Der erste Entwurf nummerierte auch diese Zeilen 01–04. Damit
   hatte die Seite VIER nummerierte Vierergruppen: Arbeitsumfeld
   (Treppe), Themenfelder, Ablauf (Reihenfolge) und Fragen. Die
   Kompositionen waren zwar verschieden, das Ordnungsmittel war
   es nicht.

   Hier entfällt die Ziffer, und zwar aus einem inhaltlichen
   Grund: Beratung, Tarife, Geräte und Hilfe vor Ort sind
   nebeneinander, nicht nacheinander. Eine Nummerierung hätte
   eine Reihenfolge behauptet, die es nicht gibt. Beim Ablauf
   gibt es sie — dort bleiben die Ziffern.

   An ihrer Stelle steht eine ruhende rote Kante. */
.kh-career-topics .kh-career-fields .kh-career-field::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: start;
  inline-size: 2px;
  block-size: 100%;
  border-radius: var(--kh-radius-xs);
  background-color: var(--kh-color-primary-on-dark);
}

.kh-career-topics .kh-career-fields .kh-career-field > :first-of-type {
  grid-column: 2;
  grid-row: 1;
}

.kh-career-topics .kh-career-fields .kh-career-field > :last-of-type {
  grid-column: 2;
  grid-row: 2;
  max-width: 58ch;
}

/* NACHTRAG 20.10.2026 · AUS VIER BLOECKEN WIRD EINE NOTIZ
   -------------------------------------------------------------
   Die vier Zeilen standen je zweizeilig: Begriff oben,
   Erlaeuterung darunter. Richtig gegliedert, aber in der Summe
   wieder vier gleich gebaute Bloecke — und mit 477px bei 1440px
   die hoechste Teilflaeche der Seite, obwohl sie den kuerzesten
   Text traegt.

   Ab Tablet laufen Begriff und Erlaeuterung deshalb in EINER
   Zeile: „Beratung  Zuhören, Bedarf verstehen …". Keine zweite
   Spalte, an der sich etwas ausrichtet — der Farbwechsel von
   Weiss nach 72 % Weiss trennt, nicht eine Kante. Das ist
   bewusst etwas anderes als das Register auf „Ueber uns", wo
   Benennung und Erlaeuterung in zwei ausgerichteten Spalten
   stehen.

   Dafuer muss der Fliesszusammenhang zurueck: die Zeile wird
   wieder ein Block, die beiden Elementor-Widgets und ihre
   inneren Huellen werden inline. Die rote Kante kann dann kein
   Rasterelement mehr sein und haengt absolut an der Zeile. */
@media (min-width: 48em) {

  .kh-career-topics .kh-career-fields .kh-career-field {
    display: block;
    padding-block: var(--kh-space-md);
    padding-inline-start: var(--kh-space-md);
  }

  .kh-career-topics .kh-career-fields .kh-career-field::before {
    position: absolute;
    inset-block: var(--kh-space-md);
    inset-inline-start: 0;
    block-size: auto;
  }

  .kh-career-topics .kh-career-fields .kh-career-field > .elementor-widget,
  .kh-career-topics .kh-career-fields .kh-career-field > .elementor-widget > .elementor-widget-container,
  .kh-career-topics .kh-career-fields .kh-career-field > .elementor-widget .elementor-heading-title {
    display: inline;
    max-width: none;
  }

  /* Ein Wortabstand zwischen Begriff und Erlaeuterung. Der
     Zeilenumbruch im Quelltext liefert bereits ein Leerzeichen;
     der Rand macht daraus eine lesbare Zaesur. */
  .kh-career-topics .kh-career-fields .kh-career-field > :first-of-type .elementor-heading-title {
    margin-inline-end: .5em;
  }
}

/* Farbrollen auf der dunklen Fläche. Weiss auf #1A1A1A ergibt
   17,4:1, die abgesenkten 72 % noch 10,9:1 — dieselben Werte wie
   im Ablauf weiter unten, als er noch dunkel stand. */
.kh-career-topics .kh-career-field .kh-h4,
.kh-career-topics .kh-career-field .kh-h4 .elementor-heading-title {
  margin: 0;
  color: var(--kh-color-ink-inverse);
}

.kh-career-topics .kh-career-field .kh-text-sm,
.kh-career-topics .kh-career-field .kh-text-sm .elementor-heading-title {
  margin: 0;
  color: rgba(255, 255, 255, .72);
}

.kh-career-topics .kh-section-header__lead,
.kh-career-topics .kh-section-header__lead .elementor-heading-title {
  color: rgba(255, 255, 255, .78);
}

/* NACHTRAG 20.10.2026 · WEISS STATT ROT AUF DER DUNKLEN FLAECHE
   global.css setzt fuer .kh-section--dark ausdruecklich
   ink-inverse auf .kh-section-header__title — die Regel traf
   aber nur den Wrapper, waehrend Elementor das innere
   Titelelement rot faerbt. Gemessen stand hier rote Augenbraue
   ueber roter Ueberschrift, beides auf #1A1A1A. Die dunkle
   Flaeche ist der Kontrastpunkt der Seite; sie braucht keinen
   zweiten roten Ton, um das zu sein. */
.kh-career-topics .kh-section-header__title .elementor-heading-title {
  color: var(--kh-color-ink-inverse);
}

@media (max-width: 29.99em) {

  .kh-career-topics .kh-career-fields .kh-career-field {
    column-gap: var(--kh-space-sm);
    padding-block: var(--kh-space-md);
  }
}


/* --- 04b. Einstieg: Rangfolge statt drei gleicher Absaetze ---

   „Arbeiten bei Kahraman" war zuletzt die schwaechste Flaeche der
   Seite: eine Ueberschrift und drei gleich gesetzte Absaetze
   nebeneinander einem Bild. Drei gleiche Gewichte sagen nicht,
   was zuerst zaehlt.

   Geaendert wird kein Wort — nur die Stufung: rote Auftaktlinie
   ueber der Ueberschrift, der erste Absatz traegt als Aussage,
   die beiden folgenden stehen als Fliesstext darunter, getrennt
   von einer Haarlinie. Dasselbe Mittel wie im Einstieg von
   „Ueber uns". */

.kh-career-intro .kh-h2 {
  position: relative;
  padding-top: var(--kh-space-md);
}

.kh-career-intro .kh-h2::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 48px;
  block-size: 3px;
  background-color: var(--kh-color-primary-500);
}

.kh-career-intro .kh-career-intro__lead,
.kh-career-intro .kh-career-intro__lead .elementor-heading-title {
  margin: 0;
  max-width: 38ch;
  font-size: var(--kh-text-lead);
  font-weight: var(--kh-font-weight-semibold);
  line-height: var(--kh-leading-normal);
  letter-spacing: -.01em;
  color: var(--kh-color-ink-900);
}

/* Die Haarlinie sitzt am Absatz NACH dem Lead. */
.kh-career-intro .kh-career-intro__lead + * {
  margin-block-start: var(--kh-space-md);
  padding-block-start: var(--kh-space-md);
  border-block-start: 1px solid var(--kh-color-line-200);
}

.kh-career-intro .kh-career-intro__lead ~ :not(.kh-career-intro__lead) .elementor-heading-title {
  max-width: 52ch;
  color: var(--kh-color-ink-700);
}


/* ==========================================================
   05. STELLEN — DIE STAERKSTE FLAECHE DER SEITE
   ==========================================================
   Der Bereich, wegen dem die Seite besucht wird. Er stand als
   kleine helle Karte zwischen zwei gleich grossen Abschnitten.
   Jetzt trägt er eine eigene Fläche über die volle Rasterbreite,
   mit roter Oberkante, Schatten und dem Vodafone-Zeichen als
   Wasserzeichen (Klasse kh-brand-mark aus global.css 23.5 — das
   Zeichen trägt nur auf heller Fläche, genau hier).

   Der Zustand „derzeit keine Stelle veröffentlicht" ist kein
   Fehler und sieht auch nicht so aus: ruhige Fläche, normaler
   Fliesstext, kein Warnton.
   ========================================================== */

/* ENTFALLEN: .kh-career-jobs__empty
   Die Klasse stammt aus einem früheren Entwurf des Leerzustands
   und kommt in den Seitendaten nicht mehr vor — nachgesucht über
   das gesamte Theme, einziger Fundort war diese Datei selbst. Der
   heutige Leerzustand heisst .kh-job-empty und steht in 06b. */

/* Der Kopf der Stellen-Fläche trägt jetzt die rote Auftaktlinie
   wie die übrigen Abschnittsköpfe dieser Seite — er ist die
   Conversion-Fläche und darf nicht beiläufiger aussehen als das
   Arbeitsumfeld darüber. */
/* ENTFALLEN: DIE ROTE AUFTAKTLINIE
   Dieselbe 48px-Linie stand auch über dem Einstieg und über den
   Themenfeldern. Dreimal derselbe Strich ist kein Akzent mehr,
   sondern ein Muster — und in der Conversion-Fläche der
   schwächste Weg, Aufmerksamkeit zu erzeugen. An ihre Stelle
   tritt das Markenzeichen im Leerzustand darunter. */
.kh-career-jobs .kh-section-header { position: relative; }

.kh-career-jobs .kh-section-header__title .elementor-heading-title {
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  max-width: 18ch;

  /* NACHTRAG 20.10.2026 · DIE ÜBERSCHRIFT KOMMT IN DIE HIERARCHIE
     Sie stand in rgb(230,0,0) bei 44px — zusammen mit der roten
     Augenbrauenzeile darüber zwei rote Ebenen übereinander. Rot
     ist der Akzent, nicht die Überschrift. Dieselbe Begründung
     steht seit dem 17.09. an der Stellenkarte („zwei rote Ebenen
     untereinander würden sich gegenseitig entwerten") — sie galt
     nur für die Karte, nicht für den Abschnittskopf darüber. */
  color: var(--kh-color-ink-900);
}

/* NACHTRAG 20.10.2026 · KOPF UND STELLEN GEHÖREN ZUSAMMEN
   -------------------------------------------------------------
   GEMESSEN, BEVOR GEÄNDERT
   Der Eindruck war „über 250px Leere zwischen Überschrift und
   Stelle". Nachgemessen bei 1440px sind es 70px zwischen der
   Unterkante des Kopfes und der Oberkante der Karte. Die Leere
   entsteht woanders: die Überschrift ist auf 18ch begrenzt und
   bricht auf zwei Zeilen, die rechte Hälfte des Kopfes bleibt
   leer, und darunter liegt die Karte über die volle Breite. Es
   fehlt also keine Höhe, es fehlt ein Zusammenhang.

   Deshalb keine Abstandskorrektur, sondern eine Komposition:
   breit steht der Kopf links in der schmalen Spalte, die Stellen
   stehen rechts daneben. Mit einer Stelle wirkt das vollständig,
   weil die Zeile neben dem Kopf steht statt unter ihm; mit fünf
   wird daraus eine Liste neben dem Kopf. Keine Sonderregel für
   den Einzelfall, keine erfundene zweite Stelle. */
@media (min-width: 62em) {

  .kh-career-jobs .kh-container {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }

  /* Der Kopf darf in der schmalen Spalte nicht zusätzlich
     beschnitten werden — 18ch waren für die volle Breite
     gerechnet. */
  .kh-career-jobs .kh-section-header__title .elementor-heading-title { max-width: 14ch; }
}


/* ==========================================================
   06. ABLAUF — DIE DUNKLE FLAECHE DER SEITE
   ==========================================================
   Aus vier nebeneinanderstehenden Blöcken wird eine waagerechte
   Zeitleiste: eine durchgehende Linie verbindet die Nummern und
   macht aus vier Punkten eine Abfolge.

   Der Ablauf ist der einzige Abschnitt, der eine Reihenfolge
   zeigt — auf dunklem Grund wird er zum Ruhepunkt der Seite.
   ========================================================== */

.kh-career-process {
  display: grid;
  gap: var(--kh-space-lg) var(--kh-space-md);
  grid-template-columns: 1fr;
  counter-reset: kh-career-step;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 48em) {
  .kh-career-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .kh-career-process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--kh-space-lg);
  }
}

.kh-career-process__step {
  position: relative;
  padding-top: calc(var(--kh-space-xl) + var(--kh-space-2xs));
}

/* Die Nummer ist die einzige rote Fläche im Abschnitt. */
.kh-career-process__step::before {
  counter-increment: kh-career-step;
  content: counter(kh-career-step);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--kh-radius-circle);
  background-color: var(--kh-color-primary-500);
  color: #FFFFFF;
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1;
}

/* ==========================================================
   06a. DER AKTIVIERTE PFAD
   ==========================================================
   Aus vier einzelnen Verbindungsstücken wird EINE Schiene über
   den ganzen Ablauf — grau im Grundzustand, rot gefüllt, sobald
   der Abschnitt im Bild steht. Erreicht die Füllung eine Station,
   leuchtet deren Ziffer einmal kurz auf und bleibt danach rot.

   WIE ES TECHNISCH LÄUFT
   Kein Skript rechnet Positionen aus. main.js 14 setzt beim
   Sichtbarwerden eine Klasse, alles Weitere sind zwei CSS-
   Eigenschaften: transform für die Füllung, transform und opacity
   für den Ring an der Station. Beide laufen in der Compositor-
   Phase — kein Layout, kein Neuzeichnen, kein Flackern.

   Die Ziffern bekommen ihren Einsatz über animation-delay. Die
   Strecke dauert 4,2 Sekunden, vier Stationen im Abstand von
   1,3 Sekunden — langsam genug, um als Bewegung gelesen zu
   werden, und einmalig.

   NUR WO DIE SCHIENE EINE GERADE IST
   Mobil senkrecht, ab 64em waagerecht. Dazwischen (2x2-Raster)
   gibt es keine durchgehende Linie — dort stehen die Ziffern
   einfach rot, ohne Bewegung. Eine Schiene, die um die Ecke
   springt, wäre eine Behauptung. */

.kh-career-process {
  position: relative;
  --kh-step-gap: var(--kh-space-lg);
  --kh-step-size: 32px;
  --kh-step-dauer: 4200ms;
}

/* Graue Schiene und rote Füllung liegen exakt übereinander. */
.kh-career-process::before,
.kh-career-process::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  /* Mobil: senkrecht, mittig durch die Ziffernspalte. */
  inset-block: calc(var(--kh-step-size) / 2) calc(var(--kh-step-size) / 2);
  inset-inline-start: calc(var(--kh-step-size) / 2 - 1px);
  inline-size: 2px;
}

.kh-career-process::before { background-color: var(--kh-color-line-200); }

.kh-career-process::after {
  background-color: var(--kh-color-primary-500);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--kh-step-dauer) cubic-bezier(.36, .06, .24, 1);
}

.kh-career-process.is-inview::after { transform: scaleY(1); }

.kh-career-process > * { position: relative; z-index: 1; }

/* Im Zweierraster gibt es keine gerade Strecke. */
@media (min-width: 48em) and (max-width: 63.99em) {

  .kh-career-process::before,
  .kh-career-process::after { content: none; }
}

@media (min-width: 64em) {

  .kh-career-process::before,
  .kh-career-process::after {
    inset-block: calc(var(--kh-step-size) / 2 - 1px) auto;
    /* Von der Mitte der ersten bis zur Mitte der letzten Ziffer.
       Die letzte Spalte ist so breit wie jede andere; davon wird
       der halbe Ziffernkreis wieder abgezogen. */
    inset-inline: calc(var(--kh-step-size) / 2)
                  calc((100% - 3 * var(--kh-step-gap)) / 4 - var(--kh-step-size) / 2);
    inline-size: auto;
    block-size: 2px;
  }

  .kh-career-process::after {
    transform: scaleX(0);
    transform-origin: 0 50%;
  }

  .kh-career-process.is-inview::after { transform: scaleX(1); }
}

/* ==========================================================
   06b. MOBIL — ZWEI SPALTEN STATT EINER
   ==========================================================
   GEMESSEN AM 19.09.2026 AUF 390px · DER FEHLER
   Mobil stand alles in einer Spalte: die Ziffer absolut auf
   top:0/left:0, Titel und Text darunter ab der linken Kante.
   Die senkrechte Schiene lief aber ueber die ganze Hoehe bei
   x=15px — also mitten durch H3 und Beschreibung. Nachgemessen:
   Titel begann bei x=10, die Schiene lag bei x=15 bis 17.

   Das war kein Pixelfehler, sondern ein Architekturfehler: die
   Schiene setzt eine Ziffernspalte voraus, die es mobil nicht gab.
   Waagerecht ab 64em hat dieselbe Schiene immer gestimmt, weil
   dort jede Ziffer eine eigene Rasterspalte hat.

   DIE KORREKTUR
   Jeder Schritt wird zu einem Zweispalter: links die Zeitleiste
   mit der Ziffer, rechts ausschliesslich Titel und Text. Keine
   negativen Aussenabstaende, keine verschobenen Ueberschriften —
   eine echte Trennung. Bei 320px bleiben damit 208px Textbreite.

   DIE SCHIENE ENDET JETZT AN DER LETZTEN ZIFFER
   Vorgefunden lief sie 80px unter Ziffer 4 weiter, bis zum Ende
   der letzten Beschreibung. Absolut positioniert liess sich das
   nicht bemessen, weil die Zeilen unterschiedlich hoch sind
   (gemessen 84px, 84px, 105px, 105px).

   Deshalb ist die Schiene hier kein absolut gesetzter Kasten mehr,
   sondern ein Rasterelement: es spannt die Zeilen 1 bis 3 und wird
   unten um genau einen Zeilenabstand plus einen halben
   Ziffernkreis verlaengert. Damit endet es in der Mitte von
   Ziffer 4 — unabhaengig davon, wie hoch die Zeilen sind.
   Nachgemessen: Ziffernmitte 361px, Schienenende 360px.

   DIE ANIMATION BLEIBT UNANGETASTET
   Es sind weiterhin genau zwei Kaesten: graue Schiene und rote
   Fuellung, eine einzige transform-Transition, dieselben
   Verzoegerungen an den Ziffern, dieselbe Regel fuer reduzierte
   Bewegung. Hier wird nur Geometrie gesetzt.
   ========================================================== */

@media (max-width: 47.99em) {

  .kh-career-process {
    /* 56px Leiste, 16px Abstand — die Vorgabe nennt 56–68 und
       16–20. Breiter waere auf 320px zu teuer. */
    --kh-step-col: 56px;
    grid-template-columns: var(--kh-step-col) minmax(0, 1fr);
  }

  /* Die Schritte spannen beide Spalten und teilen sich innen
     dieselbe Aufteilung. Beide Raster nutzen dieselbe Variable,
     dadurch liegen Ziffer und Schiene zwangslaeufig auf einer
     Achse. */
  .kh-career-process__step {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: var(--kh-step-col) minmax(0, 1fr);
    column-gap: var(--kh-space-md);
    align-items: start;

    /* Das Polster oben trug die absolut gesetzte Ziffer. Die steht
       jetzt daneben, nicht darueber. Das Polster links kommt von
       Elementor (10px) und wuerde die Achse verschieben. */
    padding-top: 0;
    padding-inline: 0;
  }

  /* Die Zeilen werden ausdruecklich vergeben. Ohne das weicht die
     automatische Platzierung den Rasterelementen der Schiene aus
     und schiebt die Schritte nach unten. Gilt fuer die vier
     Schritte dieses Ablaufs; kommt ein fuenfter dazu, gehoert hier
     eine Zeile ergaenzt. */
  .kh-career-process__step:nth-child(1) { grid-row: 1; }
  .kh-career-process__step:nth-child(2) { grid-row: 2; }
  .kh-career-process__step:nth-child(3) { grid-row: 3; }
  .kh-career-process__step:nth-child(4) { grid-row: 4; }

  /* Alles Sichtbare des Schritts gehoert in die zweite Spalte. */
  .kh-career-process__step > * { grid-column: 2; }

  /* Die Ziffer ist jetzt ein Rasterelement der ersten Spalte,
     mittig auf der Achse — nicht mehr absolut an der Kante. */
  .kh-career-process__step::before {
    position: static;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
  }

  /* Der Ring liegt weiterhin absolut ueber der Ziffer und wandert
     mit ihr in die Mitte der Leiste.

     Die Kette traegt hier .kh-career-process mit: die Grundregel
     des Rings steht in diesem Stylesheet WEITER UNTEN und setzt
     inset-inline-start auf 0. Medienabfragen erhoehen die
     Gewichtung nicht — bei gleichem Gewicht gewinnt die spaetere
     Regel. Mit zwei Klassen (0,2,0) statt einer entscheidet diese
     hier, unabhaengig von der Reihenfolge. */
  .kh-career-process .kh-career-process__step::after {
    inset-inline-start: calc((var(--kh-step-col) - var(--kh-step-size)) / 2);
  }

  .kh-career-process::before,
  .kh-career-process::after {
    position: static;
    inset: auto;
    grid-column: 1;
    grid-row: 1 / 4;
    justify-self: center;
    inline-size: 2px;
    block-size: auto;

    /* Oben: bis zur Mitte von Ziffer 1. Unten: ueber das Ende von
       Zeile 3 hinaus um den Zeilenabstand und den halben
       Ziffernkreis — also genau bis zur Mitte von Ziffer 4. */
    margin-block-start: calc(var(--kh-step-size) / 2);
    margin-block-end: calc(-1 * (var(--kh-space-lg) + var(--kh-step-size) / 2));
  }
}


/* Der Ring an der Station. Einmal, weich, dann weg. */
.kh-career-process__step::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--kh-step-size);
  block-size: var(--kh-step-size);
  border-radius: var(--kh-radius-circle);
  border: 2px solid var(--kh-color-primary-500);
  opacity: 0;
  pointer-events: none;
}

@keyframes kh-career-ping {
  0%   { opacity: 0;   transform: scale(1); }
  18%  { opacity: .5;  transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.85); }
}

@keyframes kh-career-station {
  0%   { background-color: var(--kh-color-line-300); color: var(--kh-color-ink-700); }
  100% { background-color: var(--kh-color-primary-500); color: #FFFFFF; }
}

/* Grundzustand: die Station ist noch nicht erreicht. */
.kh-career-process .kh-career-process__step::before {
  background-color: var(--kh-color-line-300);
  color: var(--kh-color-ink-700);
}

.kh-career-process.is-inview .kh-career-process__step::before {
  animation: kh-career-station 1100ms var(--kh-ease-standard) both;
}

.kh-career-process.is-inview .kh-career-process__step::after {
  animation: kh-career-ping 1100ms var(--kh-ease-standard) both;
}

.kh-career-process.is-inview .kh-career-process__step:nth-child(1)::before,
.kh-career-process.is-inview .kh-career-process__step:nth-child(1)::after { animation-delay: 0ms; }

.kh-career-process.is-inview .kh-career-process__step:nth-child(2)::before,
.kh-career-process.is-inview .kh-career-process__step:nth-child(2)::after { animation-delay: 1300ms; }

.kh-career-process.is-inview .kh-career-process__step:nth-child(3)::before,
.kh-career-process.is-inview .kh-career-process__step:nth-child(3)::after { animation-delay: 2600ms; }

.kh-career-process.is-inview .kh-career-process__step:nth-child(4)::before,
.kh-career-process.is-inview .kh-career-process__step:nth-child(4)::after { animation-delay: 3900ms; }

/* Ohne Bewegung steht der Endzustand sofort da: Schiene gefüllt,
   alle Ziffern rot, kein Ring. */
@media (prefers-reduced-motion: reduce) {

  .kh-career-process::after { transition: none; transform: none; }

  .kh-career-process .kh-career-process__step::before,
  .kh-career-process.is-inview .kh-career-process__step::before {
    animation: none;
    background-color: var(--kh-color-primary-500);
    color: #FFFFFF;
  }

  .kh-career-process.is-inview .kh-career-process__step::after { animation: none; opacity: 0; }
}

/* Im Zweierraster ohne Schiene: Ziffern direkt rot. */
@media (min-width: 48em) and (max-width: 63.99em) {

  .kh-career-process .kh-career-process__step::before,
  .kh-career-process.is-inview .kh-career-process__step::before {
    animation: none;
    background-color: var(--kh-color-primary-500);
    color: #FFFFFF;
  }

  .kh-career-process.is-inview .kh-career-process__step::after { animation: none; opacity: 0; }
}

.kh-career-process__title { margin: 0 0 var(--kh-space-2xs); }

.kh-career-process__text {
  margin: 0;
  color: var(--kh-color-ink-700);
}

/* Auf dunklem Grund: die drei Stellen, an denen career.css eine
   eigene Farbe gesetzt hatte und die sonst dunkel auf dunkel
   stünden. Gemessen: Weiss auf #1A1A1A ergibt 17,4:1, die
   abgesenkten 72 % noch 10,9:1. */

.kh-section--dark .kh-career-process__title,
.kh-section--dark .kh-career-process__title .elementor-heading-title {
  color: var(--kh-color-ink-inverse);
}

.kh-section--dark .kh-career-process__text,
.kh-section--dark .kh-career-process__text .elementor-heading-title {
  color: rgba(255, 255, 255, .72);
}

.kh-section--dark .kh-career-process__note,
.kh-section--dark .kh-career-process__note .elementor-heading-title {
  color: rgba(255, 255, 255, .72);
}

.kh-section--dark .kh-career-process__note { border-inline-start-color: rgba(255, 255, 255, .24); }

/* ENTFALLEN: ::after des Schritts war die Verbindungslinie und
   ist jetzt der Ring an der Station. Eine Flächenfarbe darauf
   würde ihn zur Scheibe machen. */

/* NACHTRAG 20.10.2026 · DIE UEBERSCHRIFT KOMMT IN DIE HIERARCHIE
   Dritte Stelle derselben Elementor-Falle (siehe „Offene
   Stellen" und „Arbeitsumfeld"): rote Augenbraue „ABLAUF" ueber
   roter Ueberschrift. Rot traegt auf dieser Seite die Ziffern
   des Ablaufs — das ist hier der Akzent, nicht die Zeile
   darueber. */
.kh-career-process-section .kh-section-header__title .elementor-heading-title {
  color: var(--kh-color-ink-900);
}

/* Der Hinweis, dass der Ablauf typisch und nicht zugesichert ist. */
.kh-career-process__note {
  margin: var(--kh-space-lg) 0 0;
  padding-inline-start: var(--kh-space-sm);
  border-inline-start: 2px solid var(--kh-color-line-200);
  color: var(--kh-color-ink-500);
  font-size: var(--kh-text-sm);
  max-width: 62ch;
}


/* ==========================================================
   06b. STELLEN — WENN KEINE AUSGESCHRIEBEN IST
   ==========================================================
   Gemessen am 18.09.2026: alle drei Einträge im Stellen-
   verzeichnis stehen auf „Entwurf". Das Loop-Grid lieferte null
   Karten, unter der Überschrift „Offene Stellen" stand eine
   416px hohe leere Fläche — und genau dorthin zeigen beide
   Hauptschaltflächen der Seite.

   [kh_job_empty] (functions.php 21) füllt diese Stelle, solange
   nichts ausgeschrieben ist, und verschwindet von selbst, sobald
   eine Stelle veröffentlicht wird.

   KEINE KARTE, KEIN FEHLERKASTEN
   Der Block ist bewusst kein rot umrandeter Hinweis: es ist kein
   Fehler, dass gerade nichts offen ist. Haarlinie oben, roter
   Statuspunkt, eine klare Aussage und zwei Wege weiter.
   ========================================================== */

/* Das leere Raster verschwindet mit.
   Nachgemessen stand es auch ohne eine einzige Karte noch mit 60px
   in der Seite — eine Leerzeile zwischen Überschrift und Hinweis.

   Die Bedingung ist eindeutig: [kh_job_empty] gibt überhaupt nur
   dann etwas aus, wenn keine Stelle veröffentlicht ist. Ist der
   Hinweis da, ist das Raster leer — und umgekehrt. */
.kh-career-jobs:has(.kh-job-empty) .kh-job-grid { display: none; }

/* AUS DER OFFENEN HAARLINIE WIRD EINE FLAECHE
   Solange der Abschnitt grau war, genügte eine Oberkante. Jetzt
   steht er auf Weiss — dort braucht der Hinweis eine eigene
   Fläche, sonst schwebt er im Nichts.

   Bewusst begrenzt: eine Breite von rund 46rem, damit daraus kein
   riesiger Kasten wird, und linksbündig statt mittig — der Block
   ist eine Auskunft, kein Aushang. */
.kh-job-empty {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: start;
  gap: var(--kh-space-xs);
  padding: clamp(24px, 3vw + 8px, 44px);
  background-color: var(--kh-color-surface-050);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-lg);
}

/* STATT DER ROTEN OBERKANTE: DAS MARKENZEICHEN
   Der durchgehende rote Strich war der dritte auf dieser Seite
   und hat die Fläche eher abgeschnitten als ausgezeichnet. Jetzt
   steht das Vodafone-Zeichen still in der rechten oberen Ecke
   der Fläche — klein, ruhig, als Absender.

   Es liegt bei 7 Prozent auf #FAFAFA: sichtbar genug, um als
   Zeichen gelesen zu werden, leise genug, um den Text davor
   nicht zu stören. */
.kh-job-empty::before {
  content: "";
  position: absolute;
  z-index: 0;
  inline-size: clamp(110px, 12vw, 170px);
  aspect-ratio: 1 / 1;
  inset-inline-end: -2%;
  inset-block-start: -16%;
  background-image: url("../../../../uploads/2026/09/favicon.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .07;
  pointer-events: none;
}

.kh-job-empty > * { position: relative; z-index: 1; }

/* AB TABLET EINE ZUSTANDSZEILE STATT EINES KASTENS
   Linksbündig und auf 46rem begrenzt stand der Block in einem
   1136px breiten Abschnitt — rechts daneben blieben 400px leer.
   Jetzt läuft er über die volle Breite: Aussage links, die beiden
   Wege rechts, senkrecht gestapelt. */
@media (min-width: 48em) {

  .kh-job-empty {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(32px, 4vw, 72px);
    align-items: center;
  }

  .kh-job-empty__state { grid-column: 1; grid-row: 1; }
  .kh-job-empty__title { grid-column: 1; grid-row: 2; }
  .kh-job-empty__text  { grid-column: 1; grid-row: 3; }

  /* Feste Zeilennummern, kein 1 / -1: ohne explizite Zeilen
     fällt -1 auf eine einzige Zeile zusammen und align-self hat
     nichts zum Zentrieren. Dieselbe Falle wie im Abschlusspanel. */
  .kh-job-empty__actions {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    flex-direction: column;
    align-items: stretch;
    margin-block-start: 0;
  }

  .kh-job-empty__link { justify-content: center; }
}

/* Der Statuspunkt: der einzige rote Akzent des Blocks. */
.kh-job-empty__state {
  display: flex;
  align-items: center;
  gap: var(--kh-space-2xs);
  margin: 0;
  font-size: var(--kh-text-xs);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-wide);
  text-transform: uppercase;
  color: var(--kh-color-primary-text);
}

.kh-job-empty__state::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--kh-radius-circle);
  background-color: var(--kh-color-primary-500);
}

.kh-job-empty__title {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2rem);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--kh-color-ink-900);
}

.kh-job-empty__text {
  margin: 0;
  max-width: 54ch;
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-relaxed);
  color: var(--kh-color-ink-700);
}

.kh-job-empty__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kh-space-sm) var(--kh-space-lg);
  margin-block-start: var(--kh-space-xs);
}

.kh-job-empty__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--kh-control-height-lg);
  padding-inline: var(--kh-space-lg);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  color: var(--kh-color-ink-inverse);
  background-color: var(--kh-color-primary-500);
  border-radius: var(--kh-radius-sm);
  text-decoration: none;
  transition: background-color var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-job-empty__primary:hover { background-color: var(--kh-color-primary-600); }

.kh-job-empty__primary:active { background-color: var(--kh-color-primary-700); }

.kh-job-empty__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--kh-tap-min);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-bold);
  color: var(--kh-color-primary-text);
}

.kh-job-empty__link:hover { color: var(--kh-color-primary-700); }

/* --- Faktenanker im Kopf ----------------------------------

   Der Kopf trug rechts nur das Ringmotiv — eine grosse Fläche
   ohne Aussage. Jetzt liegen dort zwei belegte Zahlen über dem
   Motiv: 14 Shops und das Gründungsjahr. Beide stehen bereits
   an anderer Stelle der Website; erfunden wird nichts.

   GEMESSEN UND KORRIGIERT · KEINE MILCHGLASFLAECHE
   Der erste Entwurf war eine weisse Überlagerung mit 8 Prozent.
   Nachgesehen war das Ergebnis genau die Glasoptik, die §3
   ausschliesst: die innere Scheibe des Ringmotivs schien durch
   die Fläche und zog eine sichtbare Kante quer durch die Zahlen,
   und die Beschriftung lag auf zwei verschiedenen Rottönen.

   Jetzt eine deckende Fläche im dunkelsten Markenrot. Damit
   entsteht echtes Layering statt Durchscheinen: das Motiv liegt
   dahinter und wird sauber beschnitten.

   KONTRAST: Weiss auf #820000 ergibt 10,8:1, die Beschriftung mit
   88 Prozent noch rund 9,6:1 — beides deutlich über AA und
   deutlich besser als die 4,58:1 der Glasfassung. */

/* ZURÜCK AUF DAS FREIGEGEBENE MOTIV-SYSTEM
   -------------------------------------------------------------
   Der vorige Anlauf baute ein eigenes Medaillon: drei Ringe als
   Verlauf, Signet als Kindelement, statisch. Das war ein zweites
   Motiv-System neben dem der Startseite und von „Über uns" — und
   es stand still, während die beiden Referenzseiten ihre ruhige
   Radar-Bewegung zeigen.

   Jetzt läuft hier wieder global.css 23.2/23.3, unverändert:
   ::before trägt das Signet mit dunklem Hof, ::after die zwei
   Wellen über --kh-radar-1 und --kh-radar-2, animiert mit
   cubic-bezier(.175,.425,.35,.95) und einem Versatz von -50 %.
   Es wird nichts nachgebaut und keine Klasse dupliziert — der
   Abschnitt trägt kh-motion und setzt nur seine eigenen Masse.

   MASSE GEGEN DIE REFERENZ GEPRÜFT
   Startseite: Radar clamp(420px,36vw,540px), Zeichen 76px —
   Verhältnis 6,8:1 bei 1440px. Hier 38vw und 78px, also 7,0:1.
   Das Zeichen bleibt damit klar der Mittelpunkt, ohne gross zu
   werden.

   DAUER: die Welle legt 86 % des Radius zurück. Bei 1440px sind
   das 235px; für die angestrebten rund 25 px/s ergibt das 9,4s. */

.kh-career-hero {
  --kh-radar-size: clamp(420px, 38vw, 560px);
  --kh-mark-size: clamp(60px, 5.4vw, 82px);
  --kh-radar-dauer: 9.4s;
}

/* DAS FAKTENPANEL LIEGT IM MOTIV, NICHT DARUNTER
   -------------------------------------------------------------
   Vorher standen Radar und Karte untereinander mit Abstand
   dazwischen — zwei Objekte, kein Bild. Jetzt greift die Karte
   asymmetrisch in die untere linke Hälfte des Radars hinein:
   waagerecht, beide Zahlen nebeneinander, die Ringe laufen oben
   und rechts darum herum weiter.

   Material bewusst deckend: dunkles Markenrot, eine feine helle
   Haarlinie, präziser Radius, sehr weiche Tiefe. Kein Milchglas,
   kein backdrop-filter — auf der bewegten Fläche würde jede
   Transparenz die Wellen durch die Zahlen ziehen. */
.kh-career-hero__facts {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  background-color: rgba(255, 255, 255, .28);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--kh-radius-lg);
  overflow: hidden;
  box-shadow: 0 28px 64px -30px rgba(0, 0, 0, .7);
}

.kh-career-hero__fact {
  display: grid;
  gap: var(--kh-space-3xs);
  align-content: center;
  padding: var(--kh-space-md);
  background-color: var(--kh-color-primary-700);
}

/* Die Zahl dominiert, die Beschreibung bleibt eine ruhige Zeile.
   Kontrast auf #820000: Weiss 10,8:1, die Beschriftung mit
   82 Prozent rund 8,4:1. */
.kh-career-hero .kh-career-hero__fact-label,
.kh-career-hero .kh-career-hero__fact-label .elementor-heading-title {
  font-size: var(--kh-text-xs);
  font-weight: var(--kh-font-weight-semibold);
  letter-spacing: var(--kh-tracking-wide);
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(255, 255, 255, .82);
}

/* NACHTRAG 20.10.2026 · DAS PANEL IST BELEG, NICHT AUSSAGE
   Die beiden Zahlen standen in 52px und damit groesser als
   jeder Satz der roten Flaeche. „14 Shops" und „1999" sagen
   etwas ueber das Unternehmen, nichts ueber die Arbeit — als
   groesstes Element des Karriere-Kopfes waren sie an der
   falschen Stelle laut. Eine Stufe kleiner, das Panel
   entsprechend flacher: es bleibt der rechte Anker des Motivs,
   tritt aber hinter den Einstiegssatz zurueck. Beide Angaben
   bleiben unveraendert. */
.kh-career-hero__fact-value,
.kh-career-hero__fact-value .elementor-heading-title {
  margin: 0;
  font-family: var(--kh-font-heading);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--kh-color-ink-inverse);
}

.kh-career-hero__fact-label,
.kh-career-hero__fact-label .elementor-heading-title {
  margin: 0;
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-snug);
  color: rgba(255, 255, 255, .88);
}

/* Ab Laptop steht der Faktenblock neben dem Text, nicht darunter,
   und legt sich über das Ringmotiv — das ist der visuelle Anker
   der rechten Hälfte. */
@media (min-width: 62em) {

  .kh-career-hero .kh-career-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    column-gap: clamp(48px, 5vw, 96px);
    align-items: center;
  }

  .kh-career-hero .kh-career-hero__header { grid-column: 1; }

  /* Die rechte Spalte ist die Bühne des Motivs. Sie reserviert
     nur Platz — gezeichnet wird vom Abschnitt darunter. */
  .kh-career-hero .kh-career-hero__facts {
    grid-column: 2;
    justify-self: end;
    align-self: end;
    inline-size: min(100%, 27rem);
  }
}

/* DER MITTELPUNKT DES MOTIVS
   -------------------------------------------------------------
   Nach Hausmethode je Seite gesetzt und nachgemessen, genau wie
   auf Startseite und „Über uns". Der Punkt liegt in der rechten
   Spalte, das Faktenpanel darunter links versetzt — Ringe laufen
   oben und rechts weiter, die Karte schneidet unten links hinein.

   Die Ringe dürfen hinter dem Text liegen (Konturen mit 9 bis
   13 % Deckkraft). Das Signet NICHT: unter ihm hellt der Grund
   auf rund rgb(234,46,46) auf. Der Mittelpunkt liegt auf jeder
   Stufe weit rechts der Textspalte, die bei 1440px bei x=814
   endet.

   WARUM DIE PROZENTE JE STUFE ANDERS SIND
   Erster Versuch: 74 % / 72 %. Nachgemessen lag der Mittelpunkt
   damit bei 1440px auf x=1037, die Mitte des Faktenpanels auf
   x=1055 — 18px daneben, also praktisch deckungsgleich. Das Panel
   sah dadurch aus wie eine Karte, die man unter den Kreis gestellt
   hat, statt wie ein Teil des Motivs.

   Das Panel hängt rechts am Raster (Containerkante minus Versatz),
   seine Mitte ist also vorgegeben — bei 1024px auf x=790, bei
   1440px auf 1055, bei 1920px auf 1299. Damit es unten LINKS in
   die Scheibe schneidet, muss der Mittelpunkt rechts davon liegen,
   und zwar um rund ein Sechstel der Motivbreite:

       1024px   cx 83 % = 850    Versatz  60   Radar  640…1060
       1280px   cx 83 % = 1062   Versatz  84   Radar  819…1305
       1440px   cx 79 % = 1138   Versatz  82   Radar  864…1411
       1920px   cx 72 % = 1382   Versatz  83   Radar 1102…1662

   Der Anteil sinkt mit der Breite, weil der Container prozentual
   schmaler wird. Nach links konnte das Panel nicht wandern: bei
   1024px stehen zwischen Textspalte (endet 598) und Panel (beginnt
   624) nur 26px.

   Dass der Radar dabei auf den mittleren Stufen ein paar Pixel
   über die rechte Fensterkante läuft, ist gewollt und im System
   angelegt — der Abschnitt trägt overflow: hidden, und auf der
   Startseite läuft dasselbe Motiv links über die Kante hinaus.
   Die Maske ist bei 96 Prozent des Radius ohnehin auf null. */
/* DIE HÖHE WIRD AM PANEL GEMESSEN, NICHT AN DER ABSCHNITTSHÖHE
   -------------------------------------------------------------
   Mit festen 47 Prozent stimmte die Lage bei 1440px zufällig und
   bei 1024px nicht: dort steht der Abschnitt fast gleich hoch
   (646 gegen 641px), das Motiv ist aber deutlich kleiner (420
   gegen 547px) und --kh-mark-size liegt auf seinem Klemmwert von
   60px. Gemessen blieb zwischen der Unterkante des dunklen Hofs
   (382) und der Oberkante des Panels (430) eine Lücke von 48px —
   im Screenshot lasen sich Scheibe und Karte genau deshalb als
   zwei gestapelte Objekte.

   Die Wellen taugen nicht als Anker: sie laufen nach aussen und
   sind je nach Augenblick unterschiedlich weit. Konstant ist nur
   der Hof um das Signet (global.css 23.2: 2,6 × --kh-mark-size,
   also Radius 1,3 ×). Also wird der Mittelpunkt ab jetzt von
   unten aufgebaut — Panelband, halbes Signet, 40px Luft:

                        1024    1440    1920
       Panelband         216     243     258
       Mittelpunkt       358     319     337   (55 / 50 / 50 %)
       Signet endet      388     358     378   → 42/40/40px Luft
       Hof endet         436     420     444   → 6/22/26px im Panel

   Das Signet bleibt damit auf jeder Stufe frei lesbar, und der
   Hof greift auf jeder Stufe in das Panel hinein. */
@media (min-width: 64em) {

  .kh-career-hero {
    --kh-ring-cx: 83%;

    /* Unterkante Abschnitt bis Oberkante Panel: Panelhöhe rund
       8rem, dazu der eigene Aussenabstand und der untere
       Innenabstand des Abschnitts. */
    --kh-karriere-faktenband:
      calc(8rem + var(--kh-radar-size) * .06 + clamp(48px, 4vw + 24px, 96px));
    --kh-ring-cy:
      calc(100% - var(--kh-karriere-faktenband) - var(--kh-mark-size) * .5 - 2.5rem);
  }

  .kh-career-hero .kh-career-hero__facts {
    /* Asymmetrisch in die untere linke Hälfte des Motivs. */
    margin-block-end: calc(var(--kh-radar-size) * .06);
    margin-inline-end: calc(var(--kh-radar-size) * .06);
  }
}

@media (min-width: 90em) {

  .kh-career-hero { --kh-ring-cx: 79%; }
}

@media (min-width: 120em) {

  .kh-career-hero { --kh-ring-cx: 72%; }
}

/* UNTER 1024px ZEIGT DAS SYSTEM DAS MOTIV NICHT
   global.css 23.2 blendet ::before und ::after unter 64em aus:
   dort ist der Kopf einspaltig und es gibt kein freies Feld.

   Auf dieser Seite gibt es eins — unter den Schaltflächen steht
   die Faktenkarte, und darum herum ist Platz. Das Motiv kommt
   deshalb zurück, aber kleiner und OHNE Bewegung: die Bewegung
   bleibt wie im Referenzsystem der Laptopbreite vorbehalten.

   DER ERSTE ANLAUF VERSTECKTE DAS SIGNET
   Mit --kh-ring-cy: calc(100% - var(--kh-radar-size) * .34) lag
   die Mitte des Motivs nachgemessen bei 390px auf y=700 und bei
   768px auf y=642 — das Faktenpanel steht dort aber von 635 bis
   737 beziehungsweise von 609 bis 719. Das Signet lag also
   vollständig hinter der deckenden Fläche; sichtbar blieb nur die
   Oberkante seines dunklen Hofs, die wie ein Fleck aussah.

   JETZT ÜBER DAS PANEL GERECHNET, NICHT ÜBER DIE ABSCHNITTSHÖHE
   Der Abstand von der Unterkante des Abschnitts bis zur Oberkante
   des Panels ist unabhängig vom Aussenabstand darüber: er besteht
   nur aus Panelhöhe und unterem Innenabstand. Gemessen 161px bei
   390 und 175px bei 768 — als --kh-karriere-faktenband gesetzt.
   Der Mittelpunkt liegt ein weiteres Sechstel des Radius darüber
   und damit sicher frei:

       390px   Band 160 + 55  → Signetunterkante 27px über Panel
       768px   Band 176 + 74  → Signetunterkante 39px über Panel

   Das Motiv ist zugleich etwas grösser als das Panel (88vw gegen
   27rem), damit die Ringe links und rechts daran vorbeilaufen und
   beides als ein Objekt liest statt als Karte auf einer Scheibe.
   Der Aussenabstand über dem Panel wächst auf 38 Prozent des
   Radius, damit die äusserste Welle die Schaltflächen nicht mehr
   berührt (sichtbar wird das Motiv ab rund 80 Prozent des Radius
   nach innen). */
@media (max-width: 63.99em) {

  .kh-career-hero::before,
  .kh-career-hero::after { display: block; }

  .kh-career-hero {
    --kh-radar-size: clamp(300px, 88vw, 460px);
    --kh-mark-size: clamp(52px, 14vw, 72px);
    --kh-ring-cx: 50%;
    --kh-karriere-faktenband: 10rem;
    --kh-ring-cy: calc(100% - var(--kh-karriere-faktenband) - var(--kh-radar-size) * .16);
  }

  .kh-career-hero .kh-career-hero__facts {
    margin-inline: auto;
    margin-block-start: calc(var(--kh-radar-size) * .38);
    max-inline-size: 27rem;
  }
}

/* Ab Tablet trägt die Zahl mehr Höhe, das Panel wird 110 statt
   102px hoch und der untere Innenabstand wächst mit. */
@media (min-width: 48em) and (max-width: 63.99em) {

  .kh-career-hero { --kh-karriere-faktenband: 11rem; }
}

@media (prefers-reduced-motion: reduce) {

  .kh-job-empty__primary { transition: none; }
}

@media (forced-colors: active) {

  .kh-job-empty__primary { border: 1px solid CanvasText; }
}


/* ==========================================================
   07. FRAGEN — ENTFALLEN
   ==========================================================
   Der Fragenbereich ist aus der Seite entfernt worden. Die
   Gestaltung dieser Datei endet damit beim Ablauf; die
   Abschlussfläche schliesst die Seite direkt danach.

   Sämtliche Regeln zu .kh-career-questions und .kh-career-faq
   sind mitgegangen — sie hätten auf nichts mehr gezeigt.
   ========================================================== */



/* ENTFALLEN. Das Bild lief nach rechts aus dem Container und
   wurde am Seitenrand beschnitten: zwei Ecken rund, zwei gerade
   abgeschnitten — gewollt als Ausbruch, gelesen als Fehler. Und
   es war für den Text daneben schlicht zu gross.

   Jetzt steht es vollständig in seiner Spalte, rundum gerundet,
   mit Haarlinie und ruhiger Tiefe. Die Markenverbindung
   übernimmt ein sehr schwaches Wasserzeichen dahinter — der
   Fall, für den global.css 23.5 das Asset auf hellen Flächen
   freigibt. */

.kh-career-intro .kh-career-intro__media {
  position: relative;
  isolation: isolate;
}

.kh-career-intro .kh-career-intro__media::before {
  content: "";
  position: absolute;
  z-index: 0;
  inline-size: clamp(120px, 13vw, 190px);
  aspect-ratio: 1 / 1;
  inset-inline-start: calc(-1 * var(--kh-space-xl));
  inset-block-end: calc(-1 * var(--kh-space-lg));
  background-image: url("../../../../uploads/2026/09/favicon.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .06;
  pointer-events: none;
}

.kh-career-intro .kh-career-intro__image {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-lg);
  box-shadow: var(--kh-shadow-lg);
}

.kh-career-intro .kh-career-intro__image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

/* Kleiner als vorher: die Textspalte trägt diese Section, das
   Bild begleitet sie. */
@media (min-width: 62em) {

  .kh-career-intro .kh-grid--split {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
    column-gap: clamp(48px, 5vw, 96px);
    align-items: center;
  }
}


/* ==========================================================
   08. ABSCHLUSS
   ==========================================================
   Heller Abschluss mit roter Auftaktlinie. Bewusst NICHT rot:
   diese Fläche liegt zwischen der dunklen Ablauffläche und dem
   dunklen Fuss — und der Kopf trägt bereits das Rot der Seite.
   ========================================================== */

/* Die Satzbreite gehört auf Titel und Lead, NICHT auf den
   Kopfbereich: der trägt auch die Schaltflächenreihe, und eine
   Begrenzung dort zwingt die beiden Schaltflächen untereinander. */
.kh-career-cta .kh-section-header {
  position: relative;
  padding-top: var(--kh-space-md);
}

.kh-career-cta .kh-section-header__title .elementor-heading-title { max-width: 20ch; }
.kh-career-cta .kh-section-header__lead .elementor-heading-title  { max-width: 46ch; }

/* ENTFALLEN: DER ROTE STRICH IN DER MITTE
   -------------------------------------------------------------
   Er stammt aus der Zeit, als dieser Abschluss ein zentrierter
   heller Block war. Seit global.css 24 steht er als dunkles Panel
   mit linksbündigem Satz und roter Kante an der linken Panel-
   kante. Die kurze Linie schwebte dadurch mittig über einem Text,
   der links beginnt — ein Rest, kein Gestaltungsmittel. Dieselbe
   Korrektur wurde auf Startseite und „Über uns" vorgenommen. */
.kh-career-cta .kh-section-header::before { content: none; }

.kh-career-cta .kh-section-header { padding-top: 0; }


/* --- 08.1 Ruhende Ringe mit Vodafone-Zeichen --------------

   §3 der Gestaltungsvorgabe schliesst dauerhaft bewegte Ring-
   motive aus. global.css 24 dreht das Ringmotiv des Panels über
   kh-cta-drift (38s, endlos). Für diesen Abschnitt wird die
   Drehung abgeschaltet; Ringe und Zeichen liegen auf EINEM
   ruhenden Element und sind dadurch konzentrisch.

   Das Zeichen steht voll deckend: abgeblendet würde aus seiner
   deckend weissen Innenfläche ein grauer Fleck, und ein Marken-
   zeichen wird nicht in der Deckkraft verstellt. Dafür ist es
   klein und sitzt weit rechts, ausserhalb der Textspalte.
   Identische Masse wie auf Startseite und „Über uns". */

.kh-career-cta.kh-cta-panel > .kh-container::after { content: none; }

.kh-career-cta.kh-cta-panel .kh-career-cta__mark {
  position: absolute;
  z-index: 0;
  inset-block-start: 50%;
  inset-inline-end: -13%;
  inline-size: clamp(280px, 34vw, 520px);
  block-size: clamp(280px, 34vw, 520px);
  translate: 0 -50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  pointer-events: none;
  background:
      radial-gradient(circle closest-side at center,
        transparent 0 40%, rgba(255, 255, 255, .09) 40.6%, transparent 41.4%),
      radial-gradient(circle closest-side at center,
        transparent 0 62%, rgba(255, 255, 255, .06) 62.6%, transparent 63.4%),
      radial-gradient(circle closest-side at center,
        transparent 0 84%, rgba(255, 255, 255, .05) 84.6%, transparent 85.4%);
}

.kh-career-cta .kh-career-cta__mark .elementor-widget-container { display: contents; }

.kh-career-cta .kh-career-cta__mark-shape {
  display: block;
  inline-size: clamp(56px, 4.4vw, 76px);
  aspect-ratio: 1 / 1;
  background-image: url("../../../../uploads/2026/09/favicon.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Die beiden Schaltflächen nebeneinander belegen die Handlungs-
   spalte bis dicht an die Panelkante — dort sitzt das Zeichen.
   Untereinander gestellt bleibt Platz, und die beiden Wege
   bekommen zugleich eine Rangfolge. */
@media (min-width: 62em) {

  .kh-career-cta .kh-section-header__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kh-space-sm);
  }

  .kh-career-cta .kh-section-header__actions > * { width: auto; }
}

/* Unter 62em stehen Text und Schaltflächen über die ganze Breite.
   Jede Stelle, an der das Zeichen vollständig ins Panel passt, ist
   dann von Text belegt — und angeschnitten darf ein Markenzeichen
   nicht stehen. Die Ringe bleiben; sie sind keine Marke. */
@media (max-width: 61.99em) {

  .kh-career-cta.kh-cta-panel .kh-career-cta__mark {
    inset-block-start: 0;
    inset-inline-end: -22%;
    inline-size: clamp(220px, 60vw, 340px);
    block-size: clamp(220px, 60vw, 340px);
    translate: 0 -30%;
  }

  .kh-career-cta .kh-career-cta__mark-shape { display: none; }
}

.kh-career-cta .kh-section-header__title {
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}


/* --- 08.2 Der dritte Weg: das Unternehmen ------------------

   Der Abschluss trug exakt dieselben zwei Schaltflaechen wie
   der Kopf der Seite — „Offene Stellen ansehen" und „Unsere
   Shops ansehen". Zweimal dasselbe Paar ist kein Abschluss,
   sondern eine Wiederholung; das Panel haette auf jeder Seite
   der Website stehen koennen.

   Der dritte Weg schliesst die Erzaehlung: wer bis hierher
   gelesen hat und sich die Stellen noch nicht ansehen will,
   will meist wissen, wer das Unternehmen ist. „Ueber uns"
   verweist seinerseits auf diese Seite — die beiden Seiten
   bilden damit ein Paar.

   Bewusst nachrangig: keine dritte gleichwertige Schaltflaeche,
   sondern ein stiller Verweis unter den beiden Hauptwegen,
   abgesetzt durch eine Haarlinie in der Panelfarbe. Kein neues
   Versprechen, kein neuer Weg in die Bewerbung — die laeuft
   unveraendert ueber die Stellenseite. */
.kh-career-cta .kh-career-cta__about {
  padding-block-start: var(--kh-space-sm);
  border-block-start: 1px solid rgba(255, 255, 255, .14);
}


/* ==========================================================
   09. FOKUS — hier bewusst NICHTS
   --------------------------------------------------------------------------
   global.css trägt den Fokusring für JEDE Schaltfläche:

       .elementor-button:focus-visible {
           outline: none;
           box-shadow: var(--kh-shadow-focus);
       }

   Gemessen: rgb(255,255,255) 0 0 0 2px, rgba(11,110,127,.55) 0 0 0 5px.
   Eine Seitenkopie wäre toter Code.
   ========================================================== */


/* ==========================================================
   10. CONVI CAREERS — ADAPTER
   ==========================================================
   Das Plugin „convi Careers" bringt bewusst keine Marke mit: es
   setzt alle Farben, Masse und Rundungen über eigene Variablen
   unterhalb von .cnv-careers. Hier werden diese Variablen auf das
   Kahraman-Designsystem gelegt — einmal, an einer Stelle.

   Es wird NICHTS aus dem Plugin nachgebaut und keine Plugin-Datei
   kopiert. Ändert das Plugin sein Markup, bleibt dieser Abschnitt
   gültig, solange die Variablen bestehen.

   Diese Datei wird nur geladen, wo Careers-Komponenten vorkommen
   (siehe convi_careers_context() in functions.php). Ein Skopus auf
   .kh-career wäre deshalb doppelt gemoppelt — und würde die
   Stellenseite aussparen, die keine Karriereseite ist.
   ========================================================== */

/* Der Selektor steht absichtlich doppelt.

   Das Stylesheet des Plugins wird nach dieser Datei geladen und setzt
   dieselben Variablen auf .cnv-careers. Bei gleicher Spezifitaet
   gewinnt die spaeter geladene Regel — die Zuordnung hier bliebe
   wirkungslos, und die Seite zeigte den Plugin-Standard.

   Zwei Klassen heben die Spezifitaet an, ohne die Reihenfolge der
   Einbindung zu erzwingen. Eine Abhaengigkeit vom Plugin-Handle waere
   die schlechtere Loesung: ohne aktives Plugin wuerde diese Datei
   dann gar nicht mehr laden, und mit ihr die ganze Karriereseite.

   Nicht zu einer Klasse vereinfachen. */
.cnv-careers.cnv-careers {

  /* ---------- Farbrollen ------------------------------------------- */
  --cnv-careers-primary:       var(--kh-color-primary-500);
  --cnv-careers-primary-hover: var(--kh-color-primary-600);
  --cnv-careers-text:          var(--kh-color-ink-700);
  --cnv-careers-muted:         var(--kh-color-ink-500);
  --cnv-careers-background:    transparent;
  --cnv-careers-surface:       var(--kh-color-surface-000);
  --cnv-careers-border:        var(--kh-color-line-200);
  --cnv-careers-focus:         var(--kh-color-focus);

  /* ---------- Mass und Form ---------------------------------------- */
  --cnv-careers-radius:    var(--kh-radius-md);
  --cnv-careers-shadow:    var(--kh-shadow-none);
  --cnv-careers-max-width: var(--kh-container-max);
  --cnv-careers-gap:       var(--kh-grid-gap);
  --cnv-careers-card-min:  20rem;

  font-family: var(--kh-font-sans);
  color: var(--kh-color-ink-700);
}


/* ----------------------------------------------------------
   10.1 STELLENKARTE
   ----------------------------------------------------------
   Vorgefunden: weisse Box mit Schatten, fünf Pillen, Knopf.
   Hier: ruhige Fläche, eine Haarlinie, Rot ausschliesslich auf
   der Handlungsaufforderung. Die Karte hebt sich beim Zeigen
   über die Linie, nicht über einen Schatten.
   ---------------------------------------------------------- */

.cnv-careers-job__inner {
  gap: var(--kh-space-sm);
  padding: var(--kh-space-lg);
  border-color: var(--kh-color-line-200);
  transition: border-color var(--kh-transition-base) ease;
}

.cnv-careers-job__inner:hover {
  border-color: var(--kh-color-ink-900);
}

.cnv-careers-job__title {
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: var(--kh-leading-snug);
  letter-spacing: var(--kh-tracking-snug);
  color: var(--kh-color-ink-900);
}

/* Die Angaben sind Beiwerk, keine Auszeichnungen: keine Pillen,
   keine Rahmen. Getrennt wird mit einem Mittelpunkt — das trägt
   auch dann, wenn ein Standort zwei Zeilen braucht. */
.cnv-careers-job__meta {
  gap: var(--kh-space-2xs) var(--kh-space-xs);
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}

.cnv-careers-job__meta-item {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}

.cnv-careers-job__meta-item + .cnv-careers-job__meta-item::before {
  content: "·";
  margin-right: var(--kh-space-xs);
  color: var(--kh-color-line-300);
}

.cnv-careers-job__excerpt {
  max-width: var(--kh-measure);
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-relaxed);
}

.cnv-careers-job__status {
  margin: 0;
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-primary-text);
}

/* Die einzige rote Stelle der Karte. Der Pfeil rückt beim Zeigen —
   mehr Bewegung braucht eine Stellenliste nicht. */
.cnv-careers-job__cta {
  gap: var(--kh-space-2xs);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-primary-text);
}

.cnv-careers-job__cta::after {
  content: "→";
  transition: transform var(--kh-transition-base) ease;
}

.cnv-careers-job__inner:hover .cnv-careers-job__cta::after {
  transform: translateX(var(--kh-space-2xs));
}

@media (prefers-reduced-motion: reduce) {

  .cnv-careers-job__cta::after {
    transition: none;
  }

  .cnv-careers-job__inner:hover .cnv-careers-job__cta::after {
    transform: none;
  }
}


/* ----------------------------------------------------------
   10.2 FILTER
   ----------------------------------------------------------
   Formularsteuerung des Designsystems: 44px Höhe, ruhige Linie,
   Fokusring aus global.css. Auf schmalen Geräten stapeln die
   Felder von selbst — das Plugin arbeitet mit Containerabfragen.
   ---------------------------------------------------------- */

.cnv-careers-filter {
  gap: var(--kh-space-sm);
  padding: var(--kh-space-md);
  border-color: var(--kh-color-line-200);
  background-color: var(--kh-color-surface-050);
}

.cnv-careers-filter__label {
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-semibold);
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
  color: var(--kh-color-ink-500);
}

.cnv-careers-filter__select {
  border-color: var(--kh-color-line-300);
  border-radius: var(--kh-radius-sm);
  font-size: var(--kh-text-field);
}

.cnv-careers-filter__submit {
  border-radius: var(--kh-radius-sm);
  font-size: var(--kh-text-body);
}

.cnv-careers-filter__reset {
  border-color: transparent;
  color: var(--kh-color-primary-text);
  text-decoration: underline;
  text-underline-offset: var(--kh-space-2xs);
}

.cnv-careers .cnv-careers-filter__select:focus-visible,
.cnv-careers .cnv-careers-filter__submit:focus-visible,
.cnv-careers a:focus-visible,
.cnv-careers button:focus-visible,
.cnv-careers input:focus-visible,
.cnv-careers textarea:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}


/* ----------------------------------------------------------
   10.3 LEERZUSTAND
   ----------------------------------------------------------
   Die Seite hatte hier bereits einen ordentlichen Leerzustand.
   Der des Plugins bekommt dieselbe Haltung: ruhige Fläche statt
   gestrichelter Rahmen, Text in Lesegrösse.
   ---------------------------------------------------------- */

.cnv-careers-empty {
  padding: var(--kh-space-2xl) var(--kh-space-lg);
  border: 0;
  border-radius: var(--kh-radius-md);
  background-color: var(--kh-color-surface-050);
  color: var(--kh-color-ink-700);
}

.cnv-careers-empty__text {
  font-size: var(--kh-text-lead);
  color: var(--kh-color-ink-900);
}

.cnv-careers-empty__reset {
  color: var(--kh-color-primary-text);
}


/* ----------------------------------------------------------
   10.4 BLÄTTERUNG
   ---------------------------------------------------------- */

.cnv-careers-pagination__link,
.cnv-careers-pagination__current {
  border-radius: var(--kh-radius-sm);
  font-size: var(--kh-text-body);
}

.cnv-careers-pagination__link {
  border-color: var(--kh-color-line-300);
  color: var(--kh-color-ink-700);
}

.cnv-careers-pagination__link:hover {
  border-color: var(--kh-color-ink-900);
  color: var(--kh-color-ink-900);
}


/* ----------------------------------------------------------
   10.5 STELLENSEITE
   ----------------------------------------------------------
   Rücklink, Standortliste und Fakten. Der Titel der Seite kommt
   aus dem Theme, nicht aus dem Plugin — der Block ergänzt nur.
   ---------------------------------------------------------- */

.cnv-careers-single__back {
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-primary-text);
}

.cnv-careers-single__excerpt {
  max-width: var(--kh-measure);
  font-size: var(--kh-text-lead);
  line-height: var(--kh-leading-relaxed);
  color: var(--kh-color-ink-700);
}

.cnv-careers-single__notice {
  border-color: var(--kh-color-line-200);
  border-left: var(--kh-space-2xs) solid var(--kh-color-primary-500);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-surface-050);
  font-size: var(--kh-text-body);
}

.cnv-careers-single__meta .cnv-careers-job__meta-item {
  font-size: var(--kh-text-sm);
}

/* „Diese Stelle ist verfügbar in" — die wichtigste Angabe einer
   Ausschreibung, die an mehreren Shops gilt. Rot markiert hier den
   Punkt, nicht die Fläche. */
.cnv-careers-single__locations {
  border-color: var(--kh-color-line-200);
  border-radius: var(--kh-radius-md);
  background-color: var(--kh-color-surface-050);
}

.cnv-careers-single__locations-title {
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  color: var(--kh-color-ink-900);
}

.cnv-careers-single__location::before {
  background-color: var(--kh-color-primary-500);
}

.cnv-careers-single__location a {
  color: var(--kh-color-ink-900);
  font-weight: var(--kh-font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: var(--kh-space-2xs);
}

.cnv-careers-single__location a:hover {
  color: var(--kh-color-primary-text);
}

.cnv-careers-single__facts {
  border-color: var(--kh-color-line-200);
  border-radius: var(--kh-radius-md);
  font-size: var(--kh-text-body);
}

.cnv-careers-single__facts dt {
  color: var(--kh-color-ink-500);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
}

.cnv-careers-single__facts dd {
  color: var(--kh-color-ink-900);
}


/* ----------------------------------------------------------
   10.6 BEWERBUNGSFORMULAR
   ----------------------------------------------------------
   Formulare sind im Designsystem eigene Bürger: 16px Schriftgrad
   in jedem Feld, 44px Höhe, ruhige Linien, roter Absendeknopf.
   Der Datenschutzhinweis bleibt leise.
   ---------------------------------------------------------- */

.cnv-careers-apply {
  --cnv-careers-surface: var(--kh-color-surface-000);
}

.cnv-careers-apply__headline {
  font-size: var(--kh-text-h3);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-snug);
  color: var(--kh-color-ink-900);
}

.cnv-careers-apply__form {
  gap: var(--kh-space-lg);
  padding: clamp(var(--kh-space-md), 3vw, var(--kh-space-xl));
  border-color: var(--kh-color-line-200);
  border-radius: var(--kh-radius-md);
}

.cnv-careers-apply__label,
.cnv-careers-apply__check span {
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-ink-900);
}

.cnv-careers-apply__hint {
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}

.cnv-careers-apply__input,
.cnv-careers-apply__file {
  border-color: var(--kh-color-line-300);
  border-radius: var(--kh-radius-sm);
  font-size: var(--kh-text-field);
}

.cnv-careers-apply__input::placeholder {
  color: var(--kh-color-ink-400);
}

.cnv-careers-apply__field--invalid .cnv-careers-apply__input,
.cnv-careers-apply__field--invalid .cnv-careers-apply__file {
  border-color: var(--kh-color-danger);
}

.cnv-careers-apply__error {
  color: var(--kh-color-danger);
  font-size: var(--kh-text-sm);
}

.cnv-careers-apply__summary {
  border-color: var(--kh-color-danger);
  border-radius: var(--kh-radius-md);
  background-color: var(--kh-color-danger-bg);
}

.cnv-careers-apply__summary-title {
  color: var(--kh-color-danger);
  font-size: var(--kh-text-body);
}

.cnv-careers-apply__summary-list a {
  color: var(--kh-color-danger);
}

/* Standortwahl: die Entscheidung, die eine Bewerbung an den
   richtigen Shop bringt. Deshalb als Fläche, nicht als Zeile. */
.cnv-careers-apply__location {
  border-color: var(--kh-color-line-300);
  border-radius: var(--kh-radius-sm);
  padding: var(--kh-space-sm) var(--kh-space-md);
  transition: border-color var(--kh-transition-fast) ease,
              background-color var(--kh-transition-fast) ease;
}

.cnv-careers-apply__location:hover {
  border-color: var(--kh-color-ink-900);
  background-color: var(--kh-color-surface-050);
}

.cnv-careers-apply__location:has(input:checked) {
  border-color: var(--kh-color-primary-500);
  background-color: var(--kh-color-primary-050);
}

.cnv-careers-apply__location-label {
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-ink-900);
}

.cnv-careers-apply__location-address,
.cnv-careers-apply__privacy-text,
.cnv-careers-apply__note {
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-500);
}

.cnv-careers-apply__privacy-text a {
  color: var(--kh-color-primary-text);
  text-underline-offset: var(--kh-space-2xs);
}

.cnv-careers-apply__fixed-location {
  border-color: var(--kh-color-line-200);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-surface-050);
  font-size: var(--kh-text-body);
}

.cnv-careers-apply__submit {
  padding-inline: var(--kh-space-xl);
  border-radius: var(--kh-radius-sm);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  letter-spacing: var(--kh-tracking-snug);
}

.cnv-careers-apply__submit:active {
  background-color: var(--kh-color-primary-700);
  border-color: var(--kh-color-primary-700);
}

/* Bestätigung nach dem Absenden: der einzige Moment, in dem die
   Seite jemandem gratuliert. Grüner Rand wäre Fremdsprache —
   die Marke reicht. */
.cnv-careers-apply__confirmation {
  border-color: var(--kh-color-line-200);
  border-left: var(--kh-space-2xs) solid var(--kh-color-primary-500);
  border-radius: var(--kh-radius-md);
  background-color: var(--kh-color-surface-050);
}

.cnv-careers-apply__confirmation-title {
  font-size: var(--kh-text-h4);
  color: var(--kh-color-ink-900);
}

.cnv-careers-apply__reference code {
  border-color: var(--kh-color-line-300);
  border-radius: var(--kh-radius-xs);
  background-color: var(--kh-color-surface-000);
}

.cnv-careers-apply--closed .cnv-careers-apply__notice {
  border-color: var(--kh-color-line-200);
  border-radius: var(--kh-radius-md);
  background-color: var(--kh-color-surface-050);
  font-size: var(--kh-text-body);
}


/* ----------------------------------------------------------
   10.7 STELLENBEREICH DER KARRIERESEITE
   ----------------------------------------------------------
   Die Liste steht im Abschnitt „Offene Stellen" (#stellen) und
   erbt dessen Rhythmus. Der Abstand nach der Überschrift kommt
   von hier, damit die Elementor-Polster leer bleiben.
   ---------------------------------------------------------- */

.kh-career-jobs .cnv-careers--list {
  margin-top: var(--kh-space-xl);
}

.kh-career-jobs .cnv-careers__list {
  gap: var(--kh-grid-gap);
}


/* ----------------------------------------------------------
   STELLENKARTEN AUS DEM LOOP GRID

   Die Karten kommen aus dem Elementor-Loop-Item 334; Markup und
   Logik gehoeren convi Careers und bleiben unberuehrt. Hier steht
   nur, was am Ergebnis messbar zu klein war.

   Nachgemessen am 17.09.2026: die Schaltflaeche „Stelle ansehen"
   kam auf 39px Hoehe. WCAG 2.5.8 verlangt 44. Die Hoehe kommt
   jetzt aus min-height, das sichtbare Polster bleibt unveraendert.
   ---------------------------------------------------------- */

.kh-job-card__cta .elementor-button,
.kh-job-card__cta.elementor-button {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--kh-tap-min);
}


/* ==========================================================================
   TEIL B · STELLENANZEIGE, EINZELANSICHT
   ==========================================================================
   Gilt ausschliesslich für das Elementor-Template 336 (Single convi_job).
   Die Klassen tragen alle das Präfix kh-job-single bzw. kh-jobmeta und
   berühren die Karriereübersicht nicht: deren Kopf heisst kh-career-hero
   und bleibt, wie er ist.

   VORBILD IST TEMPLATE 251, NICHT SEINE KOPIE
   Übernommen sind die Mittel — rote Markenfläche mit Radar, helle
   Fläche mit Satzbreite, ein dunkler Moment, Karten mit Haarlinien,
   Ziffernspalte. Nicht übernommen ist der Inhalt: eine Stellenanzeige
   hat kein Foto, keine Öffnungszeiten und keine Telefonleiste.

   WAS DIE DATEN HERGEBEN — UND WAS NICHT
   Auf den beiden vorhandenen Stellen sind gepflegt: Titel, Auszug,
   Beschreibung, Standortzuordnung, bei 323 zusätzlich Beschäftigungsart
   und Arbeitsmodell. Nicht gepflegt sind Kategorie, Referenz,
   Bewerbungsfrist, Gehalt und Ansprechpartner. Es gibt deshalb keine
   Benefit-Sektion mit 01/02/03: die Inhalte dafür existieren nicht, und
   sie zu erfinden wäre eine Zusage an Bewerber, die niemand gegeben hat.
   Die Ziffernspalte trägt stattdessen die Standorte — echte Daten.
   ========================================================================== */


/* ==========================================================
   B1. KOPF · ROTE MARKENFLAECHE MIT FAKTENKARTE
   ==========================================================
   Aufbau wie im Standortkopf: Text links, Karte rechts, das
   Markenmotiv dahinter. Statt des Shopfotos trägt die rechte
   Spalte die Faktenkarte — eine Stellenanzeige hat kein Bild,
   und ein Platzhalter wäre schlechter als keiner.
   ========================================================== */

.kh-job-single-hero {
  padding-block: clamp(48px, 4vw + 24px, 96px);

  /* Das Motiv steht links hinter der Überschrift und nicht rechts:
     rechts liegt die helle Faktenkarte, dort wäre vom Radar nichts
     zu sehen. Mass und Klarzone wie auf der Karriereübersicht. */
  --kh-ring-cx: 16%;
  --kh-ring-cy: 46%;
  --kh-mark-size: clamp(56px, 5.4vw, 84px);
  --kh-radar-klar: 52%;

  /* DIE GESCHWINDIGKEIT GEHOERT ZUR SEITE
     Solange die Welle abgeschaltet war, brauchte dieser Kopf keine
     Dauer. Ohne sie greift der Vorgabewert von 9s aus global.css —
     und der ist auf den kleinen Radius der Startseite gerechnet.
     Bei diesem Motiv liefe die Welle damit deutlich zu schnell.

     9.4s ist exakt der Wert der Karriereuebersicht (Abschnitt A1
     dieser Datei), deren Ringgeometrie fast deckungsgleich ist.
     Die beiden Karriereseiten laufen damit im selben Takt — rund
     25 px/s wie ueberall sonst. */
  --kh-radar-dauer: 9.4s;
}

/* DIE WELLE LAEUFT WIEDER — 21.09.2026
   -------------------------------------------------------------
   Hier stand die Abschaltung:

       .kh-job-single-hero.kh-motion::after,
       .kh-job-single-hero.kh-motion::before { animation: none; }

   Sie war kein Fehler, sondern eine ausdrueckliche Vorgabe aus
   einem frueheren Auftrag, im Kommentar als „mit einer Zeile
   umkehrbar" vermerkt. Genau das ist jetzt passiert: die Zeilen
   sind entfallen.

   Damit greift wieder das Motion-System aus global.css 23, das
   auch die Karriereuebersicht, den Standortkopf und alle anderen
   Koepfe antreibt — dieselben Keyframes, dieselbe Geschwindigkeit
   von rund 25 px/s, dieselbe Regel fuer reduzierte Bewegung. Es
   wird hier nichts nachgebaut und nichts unter neuem Namen
   dupliziert; die Klassen kh-hero-brand und kh-motion am Abschnitt
   genuegen.

   Die Geometrie darueber (Ringmittelpunkt links, Klarzone 52 %)
   bleibt unveraendert: das Signet steht weiterhin hinter der
   Ueberschrift und nicht unter der Faktenkarte. */


/* DER EYEBROW WAR SO BREIT WIE DIE GANZE SPALTE
   -------------------------------------------------------------
   Gemessen bei 1440px: die Pille „Karriere bei Kahraman" war
   589.5px breit in einer 610px-Spalte — der Rahmen lief also
   quer durch den Kopf.

   Die Ursache lag nicht an fehlendem align-self: das stand
   bereits auf flex-start. Nur ist .kh-job-single-hero__main ein
   GRID, und dort steuert align-self die Block-, nicht die
   Inline-Achse. Fuer die Breite ist justify-self zustaendig.

   justify-self: start ergibt exakt Inhaltsbreite — ohne feste
   Pixelbreite, ohne max-width nach Augenmass. max-inline-size
   steht daneben fuer den schmalen Fall: bricht der Text um,
   bleibt er innerhalb der Spalte statt sie zu sprengen. */
.kh-job-single-hero__main > .kh-section-header__eyebrow {
  justify-self: start;
  inline-size: fit-content;
  max-inline-size: 100%;
}

.kh-job-single-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

@media (min-width: 64em) {

  .kh-job-single-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }
}

.kh-job-single-hero__main { display: grid; gap: var(--kh-space-sm); }

.kh-job-single-hero .kh-job-single-hero__title .elementor-heading-title {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  max-width: 18ch;
}

.kh-job-single-hero .kh-job-single-hero__lead .elementor-heading-title {
  max-width: 46ch;
  font-size: var(--kh-text-body);
  line-height: var(--kh-leading-relaxed);
  color: rgba(255, 255, 255, .88);
}

/* Die Aktionszeile: ein gefüllter Weg und ein Verweis daneben.
   Keine Telefon- oder WhatsApp-Logik — eine Bewerbung läuft über
   das Formular weiter unten, nicht über einen Anruf. */
.kh-job-single-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-space-sm);
  padding: 0;
  margin-block-start: var(--kh-space-xs);
}

.kh-job-single-hero__actions .elementor-button {
  min-block-size: var(--kh-control-height-lg);
}


/* DIE FAKTENKARTE
   Helle Karte auf roter Fläche. Die Farbrollen dafür stehen in
   global.css (Abschnitt 23.5b) — hier steht nur der Aufbau der
   Datenpaare. */
.kh-jobmeta {
  display: grid;
  gap: 0;
  margin: 0;
  padding: clamp(20px, 2vw, 30px);
  border-radius: var(--kh-radius-lg);
  background-color: var(--kh-color-surface-000);
  box-shadow: var(--kh-shadow-lg);
}

.kh-jobmeta__title {
  margin: 0 0 var(--kh-space-sm);
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
  color: var(--kh-color-primary-text);
}

/* EINE WEISSE KARTE IM ROTEN HERO IST KEINE ROTE FLÄCHE
   global.css färbt mit .kh-hero-brand p alle Absätze im
   Markenhero weiß — richtig für den Text auf der roten Fläche,
   falsch für den Absatz in dieser weißen Karte. Die Regel hat
   (0,1,1), die Zeile darüber nur (0,1,0): die Überschrift stand
   weiß auf weiß, unsichtbar, und hinterließ ein 20px hohes
   Leerband über der ersten Trennlinie. Gemessen bei 390px.
   Die Klassenkette hebt sie über die Hero-Regel. */
.kh-hero-brand .kh-jobmeta .kh-jobmeta__title {
  color: var(--kh-color-primary-text);
}

/* Bezeichnung und Wert stehen ab 480px nebeneinander, darunter
   untereinander. Die feste Spaltenbreite hält die Werte auf einer
   Senkrechten, auch wenn „Beschäftigung" und „Referenz"
   unterschiedlich lang sind. */
.kh-jobmeta__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px var(--kh-space-md);
  padding-block: var(--kh-space-sm);
  border-block-start: 1px solid var(--kh-color-line-200);
}

@media (min-width: 30em) {

  .kh-jobmeta__row {
    grid-template-columns: 9.5rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.kh-jobmeta__label {
  margin: 0;
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
  color: var(--kh-color-ink-500);
}

.kh-jobmeta__value {
  margin: 0;
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.4;
  color: var(--kh-color-ink-900);
}

/* EINE ZEILE BRAUCHT EINE ANDERE KARTE
   Gemessen auf Stelle 325: Beschäftigungsart und Arbeitsmodell
   sind dort nicht gepflegt, übrig bleibt der Standort. Die Karte
   stand mit 128px Höhe und voller Spaltenbreite da und las sich
   als Behälter, der auf Inhalt wartet.

   Es wird nichts ergänzt — die Karte passt sich an: schmaler,
   flacher, ohne Trennlinie, und der eine Fakt bekommt die
   Schriftgrösse einer Aussage statt einer Tabellenzelle. Aus
   „hier fehlt etwas" wird „das ist die Angabe".

   :only-of-type greift, weil die Zeilen die einzigen div-Kinder
   der Karte sind — die Überschrift darüber ist ein p. */
.kh-jobmeta:has(.kh-jobmeta__row:only-of-type) {
  max-inline-size: 22rem;
  padding: clamp(16px, 1.6vw, 24px);
}

.kh-jobmeta:has(.kh-jobmeta__row:only-of-type) .kh-jobmeta__row {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding-block: 0;
  border-block-start: 0;
}

.kh-jobmeta:has(.kh-jobmeta__row:only-of-type) .kh-jobmeta__value {
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.2;
}


/* ==========================================================
   B2. DIE STELLE · AUFGABEN UND BENEFITS
   ==========================================================
   Der frühere Abschnitt („Die Aufgabe / Über diese Stelle") war
   eine Marginalie neben zwei Absätzen Fließtext. Seit convi
   Careers 0.8.0 sind Aufgaben und Benefits eigene strukturierte
   Felder — und damit trägt hier eine Komposition, die vorher
   nur ein Behälter um Fließtext gewesen wäre.

   DREI QUELLEN, DREI ROLLEN
   Die Überschrift ist redaktionell und steht im Template. Der
   allgemeine Beschreibungstext kommt aus post_content und bleibt
   eine eigenständige Einführung. Die beiden Listen kommen aus
   tasks und benefits über [kh_job_cards].

   DER KONTRAST LIEGT IN DEN KARTEN
   Die Fläche bleibt ruhig und hell, damit die weiße und die
   nahezu schwarze Karte gegeneinander arbeiten können. Eine
   weitere rote Großfläche hätte den Hero entwertet.
   ========================================================== */

.kh-job-single-role { padding-block: clamp(48px, 4vw + 24px, 88px); }

.kh-job-role {
  display: grid;
  gap: clamp(28px, 2vw + 16px, 44px);
}

.kh-job-role__head { display: grid; gap: var(--kh-space-2xs); }

/* Der Rumpf trägt Einführung, Karten und die Vertragsangaben in
   derselben Spalte. Er behält seinen eigenen Abstand, damit die
   drei Teile denselben Rhythmus haben wie der Abstand zur
   Überschrift darüber. */
.kh-job-role__body {
  display: grid;
  gap: clamp(28px, 2vw + 16px, 44px);
}

/* Die Einführung behält die Satzbreite des Fließtextes. Über die
   ganze Containerbreite gezogen findet das Auge den Zeilenanfang
   nicht zurück — deshalb dieselbe Messgröße wie überall sonst.

   DIE BREITE GEHÖRT AUF DEN ABSATZ
   Auf der Widget-Box wäre sie wirkungslos: Elementor setzt dort
   mit .elementor.elementor .e-con > .elementor-widget ein
   max-width: 100% bei vier Klassen Spezifität. Daran scheitert
   auch das vorhandene .kh-prose — gemessen 1116px bei 1920px
   Fenster. Der Absatz selbst ist unbesetzt, dort trägt die
   Regel, und inhaltlich gehört eine Satzbreite ohnehin an die
   Zeile und nicht an den Behälter. */
.kh-job-role__intro p {
  max-inline-size: var(--kh-measure);
  margin: 0 0 var(--kh-space-md);
  line-height: var(--kh-leading-relaxed);
  color: var(--kh-color-ink-700);
}

.kh-job-role__intro > :last-child { margin-block-end: 0; }

/* ---------- Das Kartenpaar ---------------------------------------- */

/* DIE KLASSE HEISST NICHT kh-job-card
   Diesen Namen trägt die Kachel in der Stellenliste auf /karriere/.
   Der erste Entwurf hier hieß so — und hat dort prompt
   durchgegriffen: display:grid statt flex, fremdes Polster,
   fremder Radius. Deshalb kh-job-panel. Dieselbe Falle, vor der
   convi_job_fact() in der functions.php warnt. */

/* Eine Spalte als Grundzustand. Zwei Spalten sind die Ausnahme und
   beginnen erst dort, wo zwei Listen nebeneinander noch lesbar
   sind — nicht bei der Tablet-Breite des Rasters. */
.kh-job-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.5vw + 8px, 28px);
  align-items: stretch;
}

@media (min-width: 48em) {

  .kh-job-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* STEHT NUR EINE KARTE, GEHÖRT IHR DIE GANZE BREITE
   Der Renderer gibt die zweite Karte nicht aus, wenn die Liste
   leer ist. Ohne diese Regel bliebe daneben eine Phantomspalte
   und die Karte stünde auf halber Fläche. */
.kh-job-panels:has(.kh-job-panel:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.kh-job-panel {
  display: grid;
  align-content: start;
  gap: var(--kh-space-sm);
  padding: clamp(24px, 2vw + 12px, 44px);
  border-radius: var(--kh-radius-xl);
  min-inline-size: 0;
}

.kh-job-panel__num {
  margin: 0;
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-label);
  line-height: 1;
}

.kh-job-panel__title {
  margin: 0;
  font-family: var(--kh-font-heading);
  font-size: clamp(1.25rem, .6vw + 1.1rem, 1.625rem);
  font-weight: var(--kh-font-weight-bold);
  line-height: var(--kh-leading-snug);
  letter-spacing: var(--kh-tracking-snug);
}

.kh-job-panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--kh-space-sm);
}

/* KEIN ICON, KEIN BULLET
   Der Marker ist ein kurzer Strich. Bei zwanzig Einträgen bleibt
   die Liste dadurch ruhig, und es kommt keine Icon-Bibliothek
   dazu. Die Grundlinie des Striches sitzt auf der ersten Zeile,
   nicht in der Mitte des Eintrags. */
.kh-job-panel__item {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  align-items: start;
  font-size: 1.0625rem;
  line-height: var(--kh-leading-relaxed);
}

.kh-job-panel__item::before {
  content: "";
  inline-size: .625rem;
  block-size: 2px;
  border-radius: 1px;
  margin-block-start: .82em;
}

/* ---------- Aufgaben: die helle Karte ----------------------------- */

.kh-job-panel--tasks {
  background: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-200);
}

.kh-job-panel--tasks .kh-job-panel__num { color: var(--kh-color-primary-text); }
.kh-job-panel--tasks .kh-job-panel__title { color: var(--kh-color-ink-900); }
.kh-job-panel--tasks .kh-job-panel__item { color: var(--kh-color-ink-700); }

.kh-job-panel--tasks .kh-job-panel__item::before {
  background: var(--kh-color-primary-500);
}

/* ---------- Benefits: die dunkle Karte ---------------------------- */

/* Bewusst surface-900 und nicht die Marke: eine zweite rote
   Fläche neben dem Hero wäre Lautstärke ohne Aussage. Das Rot
   kommt als Marker zurück — in der Variante für dunkle Flächen,
   weil primary-500 auf #1A1A1A zu wenig Kontrast hätte. */
.kh-job-panel--benefits {
  background: var(--kh-color-surface-900);
  border: 1px solid rgba(255, 255, 255, .1);
}

.kh-job-panel--benefits .kh-job-panel__num { color: var(--kh-color-primary-on-dark); }
.kh-job-panel--benefits .kh-job-panel__title { color: var(--kh-color-ink-inverse); }
.kh-job-panel--benefits .kh-job-panel__item { color: rgba(255, 255, 255, .84); }

.kh-job-panel--benefits .kh-job-panel__item::before {
  background: var(--kh-color-primary-on-dark);
}

/* KEIN LEERER ABSCHNITT
   Sind beide Listen leer, gibt [kh_job_cards] nichts zurück. Ist
   dann auch post_content leer, bliebe hier Eyebrow, Überschrift
   und Polster als leeres Feld stehen. Dieselbe Technik wie bei
   den Standorten und den weiteren Stellen. Der Absatz im Test
   ist verlässlich: Elementor gibt post_content durch wpautop. */
.kh-job-single-role:not(:has(.kh-job-panels)):not(:has(.kh-job-role__intro p)) {
  display: none;
}


/* ==========================================================
   B3. STANDORTE · DER DUNKLE MOMENT
   ==========================================================
   Hier steht die Ziffernspalte aus dem Standortdesign — aber mit
   echten Daten statt erfundener Vorteile: den Standorten, für die
   diese Stelle ausgeschrieben ist. Bei einer Stelle mit genau
   einem Standort steht genau eine Zeile und kein Hinweis auf eine
   Auswahl; die Zuordnung selbst liegt unverändert im Plugin.
   ========================================================== */

/* KEIN LEERER ABSCHNITT
   Der Shortcode gibt nichts zurück, wenn die Stelle keinen
   auflösbaren Standort hat. Dann verschwindet der ganze Abschnitt
   — nicht nur die Liste, sonst blieben Eyebrow, Überschrift und
   das Polster als leeres Feld stehen. Dieselbe Technik verwendet
   booking.css für den Buchungsabschnitt ohne Kalender. */
.kh-job-single-where:not(:has(.kh-job-places)) { display: none; }

/* Frist und Referenz sind auf beiden vorhandenen Stellen leer.
   Elementor lässt leere Überschriften-Widgets ganz weg, übrig
   bliebe ein Container mit Abstand — auch der entfällt. */
.kh-job-terms:not(:has(p)) { display: none; }

.kh-job-single-where {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 4vw + 24px, 88px);
}

.kh-job-single-where > * { position: relative; z-index: 1; }

.kh-job-single-where__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}

@media (min-width: 62em) {

  .kh-job-single-where__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }
}

.kh-job-single-where .kh-section-header__title .elementor-heading-title {
  max-width: 14ch;
}

.kh-job-places {
  counter-reset: kh-place;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* GEMESSEN AM 21.09.2026 · DIE ZIFFER BRACH UM
   Die Ziffernspalte stand auf calc(2ch + .6em). ch ist die Breite
   der Null — aber gemessen in der Schrift DIESES Elements, also in
   der Grundschrift. Die Ziffer darin rendert in der
   Ueberschriftenschrift bei bis zu 1.75rem. Die Spur war damit
   deutlich schmaler als ihr Inhalt, und „01" stand zweizeilig
   untereinander: eine Null ueber einer Eins.

   max-content bemisst die Spur an dem, was wirklich darin steht —
   unabhaengig von Schriftart und Groesse. nowrap sichert das
   zusaetzlich ab. */
.kh-job-place {
  counter-increment: kh-place;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: clamp(18px, 1.6vw, 28px);
  row-gap: var(--kh-space-2xs);
  padding-block: clamp(18px, 1.6vw, 26px);
  border-block-start: 1px solid rgba(255, 255, 255, .14);
}

.kh-job-place:last-child { border-block-end: 1px solid rgba(255, 255, 255, .14); }

.kh-job-place::before {
  content: counter(kh-place, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 3;
  white-space: nowrap;
  margin-block-start: .25ex;
  font-family: var(--kh-font-heading);
  font-size: clamp(1.4rem, 1rem + .7vw, 1.75rem);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--kh-color-primary-on-dark);
}

.kh-job-place > * { grid-column: 2; }

/* EINE ZIFFER IST KEINE REIHE
   Bei genau einem Standort stand dort „01" — eine Nummerierung
   von eins, also eine Ordnung ohne zweites Element. Gemessen auf
   Stelle 325. Die Ziffernspalte entfällt dann ganz und die Zeile
   nutzt die volle Breite; das Raster bleibt dasselbe, es hat nur
   eine Spalte weniger. */
.kh-job-places:has(.kh-job-place:only-child) .kh-job-place {
  grid-template-columns: minmax(0, 1fr);
}

.kh-job-places:has(.kh-job-place:only-child) .kh-job-place::before { content: none; }

.kh-job-places:has(.kh-job-place:only-child) .kh-job-place > * { grid-column: 1; }

/* ==========================================================
   B-PH1.2  BEWERBUNG · DIE FORMULARKARTE
   ==========================================================
   HIER WIRD AUSSCHLIESSLICH GESTALTET
   Kein Selektor in diesem Abschnitt aendert Verhalten. Die
   Formular-ID 7b2d0023, die verborgenen Felder, die Aktionen, die
   Careers-Anbindung, der Lebenslauf-Upload und die
   Datenschutzbestaetigung sind nicht beruehrt — es stehen hier nur
   Flaeche, Mass, Farbe und Zustand.

   DAS RASTER DES FORMULARS
   Elementor verteilt die Felder ueber eigene Spaltenklassen. Statt
   gegen sie anzuschreiben, bekommt der Feldbereich hier ein
   eigenes Raster: zwei Spuren, und jedes Feld nimmt beide — ausser
   Vor- und Nachname, die sich eine Zeile teilen. Die
   Breitenangaben von Elementor werden dabei auf 100 Prozent der
   jeweiligen Spur gesetzt, sonst waere ein Feld die Haelfte von
   der Haelfte. */

/* SPEZIFITAET · GEMESSEN UND NACHGEZOGEN
   Elementor schreibt fuer jedes Element eigenes CSS mit einer
   Klasse (.elementor-element-7b2d0061) und laedt es NACH dem
   Theme. Bei gleicher Gewichtung gewinnt dann Elementor —
   gemessen blieben Radius auf 16px und Polster auf 34.56px statt
   der gesetzten Werte. Das vorangestellte body macht aus (0,1,0)
   ein (0,1,1) und entscheidet unabhaengig von der Reihenfolge.
   Dasselbe gilt weiter unten fuer die Eingabefelder. */
body .kh-job-single-apply__card {
  padding: clamp(24px, 2.4vw + 12px, 44px);
  border: 1px solid var(--kh-color-line-200);
  border-radius: clamp(18px, 1.6vw, 26px);
  background-color: var(--kh-color-surface-000);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 44px -20px rgba(0, 0, 0, .18);
}

.kh-job-single-apply__card .elementor-form-fields-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kh-space-md);
  margin: 0;
}

@media (min-width: 40em) {
  .kh-job-single-apply__card .elementor-form-fields-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kh-job-single-apply__card .elementor-field-group {
  grid-column: 1 / -1;
  inline-size: 100%;
  max-inline-size: 100%;
  padding: 0;
  margin: 0;
}

@media (min-width: 40em) {

  .kh-job-single-apply__card .elementor-field-group-first_name,
  .kh-job-single-apply__card .elementor-field-group-last_name {
    grid-column: span 1;
  }
}

/* Beschriftungen bleiben sichtbar — ein Formular, das seine Felder
   nur im Platzhalter benennt, verliert sie beim Tippen. */
body .kh-job-single-apply__card .elementor-field-label {
  display: block;
  margin-block-end: var(--kh-space-2xs);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.3;
  color: var(--kh-color-ink-900);
}

.kh-job-single-apply__card .elementor-field-group.elementor-field-required .elementor-field-label::after {
  content: " *";
  color: var(--kh-color-primary-text);
}

/* Die Eingaben. Vorgefunden 48px und 6px Radius — die Vorgabe
   nennt 50–54 und 10–12. */
body .kh-job-single-apply__card .elementor-field-textual {
  min-block-size: 52px;
  padding: var(--kh-space-sm) var(--kh-space-md);
  border: 1px solid var(--kh-color-line-300);
  border-radius: 11px;
  background-color: var(--kh-color-surface-000);
  color: var(--kh-color-ink-900);
  font-family: var(--kh-font-sans);
  font-size: var(--kh-text-body);
  line-height: 1.4;
  transition: var(--kh-transition-colors), box-shadow var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-job-single-apply__card textarea.elementor-field-textual {
  min-block-size: calc(4.5em + var(--kh-space-lg));
  resize: vertical;
}

.kh-job-single-apply__card .elementor-field-textual::placeholder { color: var(--kh-color-ink-400); }

.kh-job-single-apply__card .elementor-field-textual:hover { border-color: var(--kh-color-line-strong); }

/* Ein ruhiger Fokusring aus dem Designsystem, keine harte rote
   Kontur. */
.kh-job-single-apply__card .elementor-field-textual:focus,
.kh-job-single-apply__card .elementor-field-textual:focus-visible {
  outline: none;
  border-color: var(--kh-color-primary-500);
  box-shadow: var(--kh-shadow-focus);
}

/* DIE STANDORTWAHL ALS AUSWAEHLBARE ZEILEN
   Das Feld bleibt eine Gruppe echter Radioschalter; hier wird nur
   die Zeile darum gestaltet. Der ausgewaehlte Zustand kommt aus
   :has(:checked) — kein Skript, keine zusaetzliche Klasse. */
.kh-job-single-apply__card .convi-careers-location-choice {
  display: grid;
  gap: var(--kh-space-2xs);
}

.kh-job-single-apply__card .convi-careers-location-choice__option {
  display: flex;
  align-items: flex-start;
  gap: var(--kh-space-sm);

  min-block-size: var(--kh-tap-min);
  padding: var(--kh-space-sm) var(--kh-space-md);
  border: 1px solid var(--kh-color-line-300);
  border-radius: 11px;
  background-color: var(--kh-color-surface-000);
  cursor: pointer;
  transition: var(--kh-transition-colors);
}

.kh-job-single-apply__card .convi-careers-location-choice__option:hover {
  border-color: var(--kh-color-line-strong);
  background-color: var(--kh-color-surface-050);
}

.kh-job-single-apply__card .convi-careers-location-choice__option:has(input:checked) {
  border-color: var(--kh-color-primary-500);
  background-color: var(--kh-color-primary-050, var(--kh-color-surface-050));
}

.kh-job-single-apply__card .convi-careers-location-choice__option:has(input:focus-visible) {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

/* Der Lebenslauf. Die Dateiauswahl bleibt das native Feld samt
   accept-Attribut; gestaltet wird nur der Knopf, den der Browser
   daraus macht. */
.kh-job-single-apply__card input[type="file"] {
  inline-size: 100%;
  padding: var(--kh-space-sm) var(--kh-space-md);
  border: 1px dashed var(--kh-color-line-300);
  border-radius: 11px;
  background-color: var(--kh-color-surface-050);
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-700);
}

.kh-job-single-apply__card input[type="file"]::file-selector-button {
  margin-inline-end: var(--kh-space-sm);
  min-block-size: 36px;
  padding-inline: var(--kh-space-md);
  border: 1px solid var(--kh-color-line-300);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-surface-000);
  font-family: inherit;
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-ink-900);
  cursor: pointer;
}

.kh-job-single-apply__card input[type="file"]:focus-visible {
  outline: none;
  border-color: var(--kh-color-primary-500);
  box-shadow: var(--kh-shadow-focus);
}

/* Die Datenschutzzeile. Haekchen oben buendig zur ersten Zeile,
   der Satz laeuft daneben weiter statt darunter einzuruecken. */
.kh-job-single-apply__card .elementor-field-type-acceptance .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: var(--kh-space-sm);
}

.kh-job-single-apply__card .elementor-field-type-acceptance input[type="checkbox"] {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 2px;
  accent-color: var(--kh-color-primary-500);
}

.kh-job-single-apply__card .elementor-field-type-acceptance label {
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-700);
}

.kh-job-single-apply__card .elementor-field-type-acceptance a {
  color: var(--kh-color-primary-text);
  text-underline-offset: 3px;
}

/* Der Absendeknopf nimmt die Breite der Karte: in dieser Spalte
   gibt es keine zweite Handlung, die um Platz konkurriert. */
.kh-job-single-apply__card .elementor-field-type-submit { margin-block-start: var(--kh-space-2xs); }

body .kh-job-single-apply__card .elementor-button[type="submit"] {
  inline-size: 100%;
  min-block-size: var(--kh-control-height-lg);
  border: 1px solid var(--kh-color-primary-500);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-primary-500);
  color: var(--kh-color-ink-inverse);
  font-family: var(--kh-font-sans);
  font-size: 1.0625rem;
  font-weight: var(--kh-font-weight-semibold);
  transition: var(--kh-transition-colors);
}

.kh-job-single-apply__card .elementor-button[type="submit"]:hover {
  background-color: var(--kh-color-primary-600);
  border-color: var(--kh-color-primary-600);
}

.kh-job-single-apply__card .elementor-button[type="submit"]:active {
  background-color: var(--kh-color-primary-700);
  border-color: var(--kh-color-primary-700);
}

.kh-job-single-apply__card .elementor-button[type="submit"]:focus-visible {
  outline: none;
  box-shadow: var(--kh-shadow-focus);
}

/* Zustandsmeldungen. Elementor bringt eigene Farben mit; hier
   bekommen sie die Toene der Website. Die Meldungen selbst und
   wann sie erscheinen, entscheidet weiterhin Elementor. */
.kh-job-single-apply__card .elementor-field-group.elementor-error .elementor-field-textual {
  border-color: var(--kh-color-primary-500);
}

.kh-job-single-apply__card .elementor-message {
  margin-block-start: var(--kh-space-sm);
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-normal);
}

.kh-job-single-apply__card .elementor-message.elementor-message-danger { color: var(--kh-color-primary-text); }
.kh-job-single-apply__card .elementor-message.elementor-message-success { color: var(--kh-color-success); }


/* ==========================================================
   B-PH1.1  EINSATZORT ALS KARTENFELD
   ==========================================================
   Vorgefunden: eine Liste. Nummer links, darunter Name, Adresse
   und Verweis — auf der dunklen Flaeche zwei Textzeilen, die sich
   als Aufzaehlung lasen. Fuer einen Abschnitt, der die Frage
   „wo arbeite ich eigentlich" beantwortet, ist das zu wenig.

   Jetzt: helle Karten auf der dunklen Flaeche. Die Umkehrung ist
   der Punkt — auf Dunkel wiegt eine weisse Flaeche schwer, und
   genau diese Information soll schwer wiegen.

   NICHT AUF ZWEI STANDORTE GERECHNET
   Das Raster fuellt auf, was da ist: eine Karte nimmt die halbe
   Breite, zwei stehen nebeneinander, drei und mehr brechen um.
   auto-fit mit minmax bedeutet, dass bei einem einzigen Standort
   keine leere Spalte daneben steht.
   ========================================================== */

.kh-job-single-where .kh-job-places {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kh-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48em) {

  /* GEMESSEN UND KORRIGIERT · 1024 ZEIGTE EINE SPALTE, 768 ZWEI
     Mit minmax(280px, 1fr) bestimmt nicht die 280 die Untergrenze,
     sondern der breitere von beiden Werten — und das war die
     Mindestbreite des Karteninhalts: Adresse auf 28ch plus zweimal
     34px Polster ergibt rund 318px. In der 607px-Spalte bei 1024
     passten damit keine zwei Karten mehr, in der vollen Breite bei
     768 schon. Breiterer Bildschirm, weniger Spalten — sichtbar
     falsch.

     min(100%, 260px) laesst die Untergrenze wieder zusammenfallen,
     und min-inline-size: 0 an der Karte nimmt dem Inhalt das
     Vetorecht ueber die Spurbreite. */
  .kh-job-single-where .kh-job-places {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(20px, 1.6vw, 28px);
  }
}

/* Die Karte. Die Haarlinien der alten Listenzeile entfallen —
   die Flaeche traegt die Trennung jetzt selbst. */
.kh-job-single-where .kh-job-place {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kh-space-2xs);
  min-inline-size: 0;

  padding: clamp(24px, 2vw + 10px, 34px);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-xl);
  background-color: var(--kh-color-surface-000);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 12px 28px -14px rgba(0, 0, 0, .28);
}

.kh-job-single-where .kh-job-place:last-child { border-block-end: 1px solid var(--kh-color-line-200); }

/* Die Ziffer steht jetzt ueber dem Namen statt daneben. Sie bleibt
   das einzige Rot auf der Karte. */
.kh-job-single-where .kh-job-place::before {
  grid-column: auto;
  grid-row: auto;
  margin-block: 0 var(--kh-space-3xs);
  font-size: var(--kh-text-sm);
  letter-spacing: var(--kh-tracking-label);
  color: var(--kh-color-primary-text);
}

.kh-job-single-where .kh-job-place > * { grid-column: auto; }

.kh-job-single-where .kh-job-place__name { color: var(--kh-color-ink-900); }

.kh-job-single-where .kh-job-place__address {
  color: var(--kh-color-ink-700);
  max-width: 28ch;
}

/* Der Verweis sitzt unten und steht auf einer Linie, auch wenn
   eine Adresse eine Zeile laenger ist. */
.kh-job-single-where .kh-job-place__link {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-space-2xs);

  margin-block-start: auto;
  padding-block-start: var(--kh-space-sm);
  min-block-size: var(--kh-tap-min);

  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-primary-text);
  text-decoration: none;
  transition: var(--kh-transition-colors);
}

.kh-job-single-where .kh-job-place__link::after {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-job-single-where .kh-job-place__link:hover { color: var(--kh-color-primary-700); }
.kh-job-single-where .kh-job-place__link:hover::after { transform: rotate(45deg) translate(2px, -2px); }

.kh-job-single-where .kh-job-place__link:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-xs);
  box-shadow: var(--kh-shadow-focus);
}

@media (prefers-reduced-motion: reduce) {
  .kh-job-single-where .kh-job-place__link::after { transition: none; }
}


.kh-job-place__name {
  margin: 0;
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.25;
  color: var(--kh-color-ink-inverse);
}

.kh-job-place__address {
  margin: 0;
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-relaxed);
  color: rgba(255, 255, 255, .72);
}

/* DER VERWEIS LIEGT NICHT MEHR AUF DUNKLEM GRUND
   Diese Regel stammt aus der Fassung, in der die Standortzeilen
   direkt auf der dunklen Fläche standen — dort war Weiss richtig.
   Seit die Standorte weisse Karten sind, stand der Verweis weiss
   auf weiss: gemessen Kontrast 1:1, der Link war auf jeder Breite
   unsichtbar, obwohl er 126x44px Trefffläche hatte. Trefffläche
   und Unterstrich bleiben, nur die Farbe gehört auf die Karte. */
.kh-job-single-where .kh-job-place__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--kh-tap-min);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-primary-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.kh-job-single-where .kh-job-place__link:hover { text-decoration-thickness: 2px; }

.kh-job-place__link:focus-visible {
  outline: none;
  border-radius: var(--kh-radius-xs);
  box-shadow: var(--kh-shadow-focus);
}


/* ==========================================================
   B4. BEWERBUNG · TEXT LINKS, FORMULARKARTE RECHTS
   ==========================================================
   Das Formular ist das Elementor-Pro-Formular mit der
   Careers-Aktion. Es wird nicht ersetzt, nicht dupliziert und in
   seiner Logik nicht angefasst — es bekommt eine Karte, Polster
   und lesbare Beschriftungen.
   ========================================================== */

.kh-job-single-apply {
  padding-block: clamp(48px, 4vw + 24px, 96px);
  scroll-margin-top: calc(var(--kh-header-height) + var(--kh-space-md));
}

@media (min-width: 64em) {

  .kh-job-single-apply {
    scroll-margin-top: calc(var(--kh-header-height-lg) + var(--kh-space-lg));
  }
}

.kh-job-single-apply__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 64em) {

  .kh-job-single-apply__grid {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }
}

.kh-job-single-apply__text { display: grid; gap: var(--kh-space-sm); }

.kh-job-single-apply__text .kh-section-header__title .elementor-heading-title {
  max-width: 16ch;
}

.kh-job-single-apply__text .kh-text .elementor-heading-title,
.kh-job-single-apply__text .kh-text-sm .elementor-heading-title {
  max-width: 42ch;
  line-height: var(--kh-leading-relaxed);
}


/* DIE FORMULARKARTE */
.kh-job-single-apply__card {
  padding: clamp(20px, 2.4vw, 36px);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-lg);
  background-color: var(--kh-color-surface-000);
  box-shadow: var(--kh-shadow-md);
}

.kh-job-single-apply .kh-job-apply .elementor-field-group { margin-block-end: 0; }

.kh-job-single-apply .kh-job-apply .elementor-form-fields-wrapper {
  row-gap: var(--kh-space-md);
}

/* Elementors Feldgruppen sind Flex-Zeilen mit Umbruch. Bei den
   Textfeldern rutscht das Eingabefeld von allein in die zweite
   Zeile, weil es 100 Prozent breit ist — die Beschriftung wirkt
   dadurch wie eine eigene Zeile. Beim Standortfeld ist das Feld
   eine Radiogruppe ohne feste Breite: dort stand die Beschriftung
   gemessen 194px breit DANEBEN statt darüber.

   Mit 100 Prozent Breite belegt die Beschriftung in jeder
   Feldgruppe ihre eigene Zeile — eine Regel statt einer
   Sonderregel je Feldtyp. */
.kh-job-single-apply .kh-job-apply .elementor-field-label {
  display: block;
  inline-size: 100%;
  margin-block-end: 6px;
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
  color: var(--kh-color-ink-700);
}

/* Felder: ruhige Kontur, klare Höhe, Fokus in der Ringfarbe des
   Designsystems.

   MASS ANGEHOBEN AM 21.09.2026
   Die Hoehe kam aus --kh-field-height (48px) und der Radius aus
   --kh-radius-sm (6px). Die Vorgabe fuer die Formularkarte nennt
   50–54px und 10–12px; 52 und 11 liegen jeweils in der Mitte.

   Geaendert wird hier und nicht in einer neuen Regel daneben:
   diese Kette wiegt (0,2,1) und liegt spaeter in der Datei — eine
   zweite Regel haette gegen sie verloren, und zwei Quellen fuer
   dieselbe Feldhoehe waeren der naechste Messfehler. */
.kh-job-single-apply .kh-job-apply input[type="text"],
.kh-job-single-apply .kh-job-apply input[type="email"],
.kh-job-single-apply .kh-job-apply input[type="tel"],
.kh-job-single-apply .kh-job-apply select,
.kh-job-single-apply .kh-job-apply textarea {
  inline-size: 100%;
  min-block-size: 52px;
  padding: var(--kh-space-sm) var(--kh-space-md);
  border: 1px solid var(--kh-color-line-300);
  border-radius: 11px;
  background-color: var(--kh-color-surface-000);
  font-family: inherit;
  font-size: var(--kh-text-body);
  line-height: 1.4;
  color: var(--kh-color-ink-900);
  transition: var(--kh-transition-colors);
}

.kh-job-single-apply .kh-job-apply textarea {
  min-block-size: 8rem;
  resize: vertical;
}

.kh-job-single-apply .kh-job-apply input:focus-visible,
.kh-job-single-apply .kh-job-apply select:focus-visible,
.kh-job-single-apply .kh-job-apply textarea:focus-visible {
  outline: none;
  border-color: var(--kh-color-primary-text);
  box-shadow: var(--kh-shadow-focus);
}

/* Die Dateiauswahl ist ein Browserbauteil und lässt sich nur
   begrenzt gestalten. Gestaltet wird deshalb die Umgebung: Rahmen,
   Polster, gestrichelte Kante als Hinweis auf „hier etwas ablegen".
   Am Bauteil selbst wird nichts überschrieben, was seine Bedienung
   verändern würde. */
/* Der Radius zieht mit den Feldern mit (11px statt 6px); das
   accept-Attribut und die Upload-Pruefung bleiben unberuehrt. */
.kh-job-single-apply .kh-job-apply input[type="file"] {
  inline-size: 100%;
  min-block-size: var(--kh-tap-min);
  padding: 12px 14px;
  border: 1px dashed var(--kh-color-line-300);
  border-radius: 11px;
  background-color: var(--kh-color-surface-050, #fafafa);
  font-size: var(--kh-text-sm);
  color: var(--kh-color-ink-700);
}

.kh-job-single-apply .kh-job-apply input[type="file"]:focus-visible {
  outline: none;
  border-color: var(--kh-color-primary-text);
  box-shadow: var(--kh-shadow-focus);
}

/* DIE STANDORTWAHL
   -------------------------------------------------------------
   Das Feld kommt aus convi Careers und ist eine Radiogruppe mit
   role="radiogroup" — kein Auswahlmenü. Das Markup gehört dem
   Plugin und wird hier nur gelesen; gestaltet wird ausschliesslich
   über Theme-CSS.

   GEMESSEN UND KORRIGIERT
   Die Optionen standen als nackte Inline-Beschriftungen da: 18px
   hoch, Radio 13px. WCAG 2.5.8 verlangt 44. Jede Option ist jetzt
   eine Zeile mit Rahmen, Polster und 44px Mindesthöhe — und damit
   auch auf dem Telefon sicher zu treffen.

   Die Zeilen sind bewusst Karten und keine Liste: bei drei
   Standorten mit Strasse und Ort ist die Auswahl die längste
   Entscheidung im Formular und darf entsprechend Platz haben. */
/* KEIN LEERER FELDSLOT
   Gemessen auf Stelle 325 (genau ein Standort): das Plugin gibt
   die Feldgruppe samt Beschriftung „Gewünschter Standort" aus,
   aber ohne Optionen — 23px hoch, ein Label über Nichts. Bei
   einem einzigen Standort gibt es keine Wahl, also auch keine
   Frage danach.

   Ausgeblendet wird ausschliesslich die Darstellung. Am Feld
   selbst, an seiner Auswertung und an der LocationChoice-Logik
   des Plugins ändert sich nichts: steht der Standort fest, setzt
   das Plugin ihn ohnehin serverseitig. */
.kh-job-single-apply .elementor-field-type-convi_careers_location:not(:has(.convi-careers-location-choice__option)) {
  display: none;
}

.kh-job-single-apply .convi-careers-location-choice {
  display: grid;
  gap: var(--kh-space-xs);
  /* Als Flex-Element der Feldgruppe bemisst sich die Gruppe sonst
     an ihrem Inhalt — gemessen 370 von 577px. Die Auswahlzeilen
     sollen so breit sein wie die Eingabefelder darüber. */
  inline-size: 100%;
}

.kh-job-single-apply .convi-careers-location-choice__option {
  display: flex;
  align-items: center;
  gap: var(--kh-space-sm);
  min-block-size: var(--kh-tap-min);
  padding: 10px 14px;
  border: 1px solid var(--kh-color-line-300);
  border-radius: var(--kh-radius-sm);
  background-color: var(--kh-color-surface-000);
  font-size: var(--kh-text-sm);
  line-height: 1.4;
  color: var(--kh-color-ink-900);
  cursor: pointer;
  transition: var(--kh-transition-colors);
}

.kh-job-single-apply .convi-careers-location-choice__option:hover {
  border-color: var(--kh-color-primary-text);
}

.kh-job-single-apply .convi-careers-location-choice__option input[type="radio"] {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  accent-color: var(--kh-color-primary-600, #E60000);
}

/* Der Fokusring sitzt auf der Zeile, nicht auf dem 20px-Knopf:
   so ist beim Durchtasten zu sehen, welche Option gemeint ist. */
.kh-job-single-apply .convi-careers-location-choice__option:has(input:focus-visible) {
  outline: none;
  border-color: var(--kh-color-primary-text);
  box-shadow: var(--kh-shadow-focus);
}

/* Die gewählte Zeile hebt sich ab — ohne Farbe als einziges
   Merkmal: der Rahmen wird zusätzlich stärker. */
.kh-job-single-apply .convi-careers-location-choice__option:has(input:checked) {
  border-color: var(--kh-color-primary-text);
  border-width: 2px;
  padding: 9px 13px;
}


/* Zustimmung und Datenschutzhinweis: kleiner Satz, volle
   Trefffläche am Kästchen, Verweis sichtbar unterstrichen. */
/* Gemessen: die Zustimmungszeile war 23px hoch. Das Kästchen ist
   20px, anklickbar ist aber die Beschriftung — und die ist die
   Trefffläche, die zählt. Mit Polster und Mindesthöhe liegt sie
   über 44px, ohne dass der Satz auseinanderfällt. */
.kh-job-single-apply .kh-job-apply .elementor-field-type-acceptance .elementor-field-option,
.kh-job-single-apply .kh-job-apply .elementor-field-type-acceptance label {
  align-items: flex-start;
  gap: var(--kh-space-sm);
  min-block-size: var(--kh-tap-min);
  padding-block: 11px;
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-relaxed);
  color: var(--kh-color-ink-700);
  cursor: pointer;
}

/* Die Zeile ist ein Flex-Container, die Beschriftung darin nicht.
   DAS IST DER UNTERSCHIED, DER 320PX TRÄGT
   Als Flex-Container lagen Satz und Verweis als zwei Items in
   einer einzigen Zeile und konnten nicht umbrechen: gemessen
   Beschriftung 265px Inhalt in 186px Fläche, daraus 28px
   Seitenoverflow bei 320px Viewport. Als Block fließt der Satz
   und bricht um. contact.css löst dieselbe Stelle seit immer
   genauso — hier war es die Ausnahme, nicht die Regel. */
.kh-job-single-apply .kh-job-apply .elementor-field-type-acceptance .elementor-field-option {
  display: flex;
}

.kh-job-single-apply .kh-job-apply .elementor-field-type-acceptance label {
  display: block;
}

/* Zweimal Polster wäre doppelt: trägt die Beschriftung die Höhe,
   bleibt die Umgebung flach. */
.kh-job-single-apply .kh-job-apply .elementor-field-type-acceptance .elementor-field-option:has(label) {
  min-block-size: 0;
  padding-block: 0;
}

.kh-job-single-apply .kh-job-apply input[type="checkbox"] {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 2px;
}

.kh-job-single-apply .kh-job-apply .elementor-field-type-acceptance a {
  color: var(--kh-color-primary-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Die Absendeschaltfläche trägt die Primärrolle des
   Designsystems und die Mindesthöhe für Berührungen. */
.kh-job-single-apply .kh-job-apply .elementor-button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--kh-control-height-lg);
  padding-inline: var(--kh-space-lg);
  border: 0;
  border-radius: var(--kh-radius-sm);
  /* FARBSTUFE KORRIGIERT
     Hier stand primary-600. Die Palette in global.css, Abschnitt
     01, ordnet die drei Rottöne aber so:

         --kh-color-primary-500: #E60000   Basis
         --kh-color-primary-600: #BD0000   Hover
         --kh-color-primary-700: #820000   Active

     Der Knopf stand damit im Ruhezustand schon auf der
     Hover-Farbe, und beim Überfahren wechselte er direkt auf
     Active — die mittlere Stufe fehlte, der Wechsel war doppelt
     so stark wie überall sonst. Der übrige Bestand der Website
     nutzt 600 durchgängig als Hover; das hier war die Ausnahme. */
  background-color: var(--kh-color-primary-500, #E60000);
  font-size: var(--kh-text-body);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-ink-inverse);
  transition: var(--kh-transition-colors);
}

.kh-job-single-apply .kh-job-apply .elementor-button[type="submit"]:hover {
  background-color: var(--kh-color-primary-600);
}

.kh-job-single-apply .kh-job-apply .elementor-button[type="submit"]:active {
  background-color: var(--kh-color-primary-700);
}

.kh-job-single-apply .kh-job-apply .elementor-message {
  margin-block-start: var(--kh-space-md);
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-relaxed);
}


/* ==========================================================
   B5. WEITERE STELLEN
   ==========================================================
   Der Abschnitt steht nur da, wo es eine weitere veröffentlichte
   Stelle gibt. Die Prüfung liegt im Shortcode und damit in der
   Fassade des Plugins; verschwindet die Liste, verschwindet der
   ganze Abschnitt über die Regel unten — kein leerer Kopf, kein
   Polsterloch.
   ========================================================== */

.kh-job-single-more { padding-block: clamp(40px, 3vw + 20px, 72px); }

.kh-job-single-more:not(:has(.kh-job-teasers)) { display: none; }

.kh-job-single-more__head { display: grid; gap: var(--kh-space-2xs); }

.kh-job-teasers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin: clamp(20px, 2vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) { .kh-job-teasers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .kh-job-teasers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kh-job-teaser {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--kh-space-2xs);
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-lg);
  background-color: var(--kh-color-surface-000);
  transition:
      border-color var(--kh-transition-base) var(--kh-ease-standard),
      box-shadow var(--kh-transition-base) var(--kh-ease-standard),
      transform var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-job-teaser:hover {
  border-color: var(--kh-color-line-300);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .42);
  transform: translateY(-2px);
}

.kh-job-teaser__meta {
  margin: 0;
  font-size: var(--kh-text-label);
  font-weight: var(--kh-font-weight-bold);
  letter-spacing: var(--kh-tracking-label);
  text-transform: uppercase;
  color: var(--kh-color-primary-text);
}

.kh-job-teaser__title {
  margin: 0;
  font-family: var(--kh-font-heading);
  font-size: var(--kh-text-h4);
  font-weight: var(--kh-font-weight-bold);
  line-height: 1.25;
  color: var(--kh-color-ink-900);
}

.kh-job-teaser__link { color: inherit; text-decoration: none; }

/* Der Titel-Link deckt die ganze Kachel ab: ein Ziel in Kartengrösse
   und trotzdem genau ein Link im Markup. */
.kh-job-teaser__link::after { content: ""; position: absolute; inset: 0; }

.kh-job-teaser__link:focus-visible { outline: none; }
.kh-job-teaser:has(.kh-job-teaser__link:focus-visible) { box-shadow: var(--kh-shadow-focus); }

.kh-job-teaser__places {
  margin: 0;
  font-size: var(--kh-text-sm);
  line-height: 1.5;
  color: var(--kh-color-ink-500);
}

.kh-job-teaser__more {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-space-2xs);
  min-block-size: var(--kh-tap-min);
  font-size: var(--kh-text-sm);
  font-weight: var(--kh-font-weight-semibold);
  color: var(--kh-color-primary-text);
}

.kh-job-teaser__more::after {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--kh-transition-fast) var(--kh-ease-standard);
}

.kh-job-teaser:hover .kh-job-teaser__more::after { transform: rotate(45deg) translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {

  .kh-job-teaser,
  .kh-job-teaser__more::after,
  .kh-job-single-apply .kh-job-apply input,
  .kh-job-single-apply .kh-job-apply select,
  .kh-job-single-apply .kh-job-apply textarea { transition: none; }
}


/* ==========================================================
   OFFENE STELLEN · LISTENZEILE (Phase 6A.1)
   ----------------------------------------------------------
   Die Ausgabe kommt aus der Elementor-Schleifenvorlage 334 mit
   den Klassen kh-job-card*. Gestaltet wird sie hier, nicht dort
   und erst recht nicht im Careers-Plugin: das Aussehen ist
   kundenspezifisch, die Daten gehoeren dem Plugin.

   WARUM ZEILE UND NICHT KARTENRASTER
   Es gibt derzeit genau eine Stelle. In einem Dreierraster
   staende daneben zweimal Leere — genau der Eindruck, der
   korrigiert werden soll. Eine Zeile ueber die volle Breite
   wirkt mit einer Stelle vollstaendig und mit fuenf wie eine
   Liste. Die Form traegt also beide Faelle, ohne Sonderregel.
   ========================================================== */

.kh-job-grid {
  display: grid;
  gap: var(--kh-space-md);
}

.kh-job-card {
  display: grid;
  gap: var(--kh-space-xs);
  padding: var(--kh-card-padding);
  background-color: var(--kh-color-surface-000);
  border: 1px solid var(--kh-color-line-200);
  border-radius: var(--kh-radius-lg);
  box-shadow: var(--kh-shadow-xs);
  transition:
      border-color var(--kh-transition-base) var(--kh-ease-standard),
      box-shadow var(--kh-transition-base) var(--kh-ease-standard);
}

.kh-job-card:hover,
.kh-job-card:focus-within {
  border-color: var(--kh-color-line-300);
  box-shadow: var(--kh-shadow-md);
}

@media (min-width: 48em) {

  /* Links der Inhalt, rechts die Schaltflaeche auf ganzer Hoehe
     mittig — eine Zeile, kein gestapelter Block. */
  .kh-job-card {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--kh-space-2xl);
    padding: var(--kh-space-xl) var(--kh-space-2xl);
  }

  .kh-job-card__title,
  .kh-job-card__meta,
  .kh-job-card__locations { grid-column: 1; }

  .kh-job-card__cta {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
  }
}

/* Der Titel traegt die Zeile und steht deshalb in der
   Textfarbe. Rot bleibt der Akzent der Augenbrauenzeile
   darueber — zwei rote Ebenen untereinander wuerden sich
   gegenseitig entwerten. */
.kh-job-card .kh-job-card__title,
.kh-job-card .kh-job-card__title .elementor-heading-title {
  font-size: var(--kh-text-h3);
  font-weight: var(--kh-font-weight-bold);
  line-height: var(--kh-leading-snug);
  letter-spacing: var(--kh-tracking-snug);
  color: var(--kh-color-ink-900);
  margin: 0;
}

/* Beschaeftigungsart und Arbeitsform als abgesetzte Angaben.
   Uebernommen wird die Anmutung von kh-badge--muted, ohne dem
   Schleifen-Markup eine weitere Klasse aufzuzwingen. */
.kh-job-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kh-space-xs);
  margin-block-start: var(--kh-space-2xs);
}

.kh-job-card__meta-item {
  display: inline-flex;
  align-items: center;
  min-block-size: 26px;
  padding-inline: var(--kh-space-xs);
  border-radius: var(--kh-radius-xs);
  background-color: var(--kh-color-surface-100);
  font-size: var(--kh-text-xs);
  font-weight: var(--kh-font-weight-semibold);
  line-height: 1.2;
  color: var(--kh-color-ink-700);
}

.kh-job-card__locations {
  font-size: var(--kh-text-sm);
  line-height: var(--kh-leading-normal);
  color: var(--kh-color-ink-500);
  margin-block-start: var(--kh-space-2xs);
}

/* Die Schaltflaeche selbst bleibt unveraendert — hier steht
   ausschliesslich ihre Platzierung. Auf schmalen Geraeten
   bekommt sie oben Luft, damit sie nicht an der Ortsangabe
   klebt. */
.kh-job-card__cta { margin-block-start: var(--kh-space-sm); }

@media (min-width: 48em) {

  .kh-job-card__cta { margin-block-start: 0; }
}

@media (prefers-reduced-motion: reduce) {

  .kh-job-card { transition: none; }
}