/*
 * Karriereseite, Stellenseite, Bewerbung — ein Stylesheet für alle Organisationen.
 * Stilvorlage über [data-stil] am <html>; Kundenfarbe über --akzent/--akzent-tief/--akzent-knopf
 * (serverseitig gerechnet). Werte nur aus der Abstandsskala 4·8·12·16·24·32·48·72·112.
 */

/* ---------- Grundwerte (Stil «ruhig») ---------- */
:root {
  /* Rückfall ohne Inline-Block = STANDARD_AKZENT aus farbe.js samt gerechnetem tief (Wächter gestaltungBewerbende) */
  --akzent: #2f5d8a;
  /* Fläche mit weisser Schrift (Knöpfe), serverseitig gerechnet (farbe.js: die Kundenfarbe exakt, nur unter 2:1 für
     Weiss abgedunkelt bis 2:1). Rückfall --akzent-tief (Weiss trägt ≥ 4,5:1) für Markup ohne --akzent-knopf */
  --akzent-knopf: var(--akzent-tief);
  /* Fläche mit Fliesstext in Weiss (kräftiger Einstieg), serverseitig gerechnet (farbe.js: Kundenfarbe abgedunkelt bis
     Weiss ≥ 4,5:1). Rückfall --akzent-tief (trägt Weiss ≥ 4,5:1) für Markup ohne den Wert */
  --akzent-flaeche: var(--akzent-tief);
  --akzent-knopf-text: #fff;
  --akzent-tief: #2f5d8a;
  --fehler: #b42318;
  --fehler-hell: #fda29b; /* Fehlertext auf dunkler Fläche (Stil «kraeftig») */
  --erfolg: #1f7a4d; /* Erfolgsmeldung, ≥ 4,5:1 auf jedem Grund */
  /* Auf dunklen Flächen (--tinte-1, --fehler, Schleier): Schrift, Fliesstext, Linie, Rand, Fläche */
  --auf-dunkel: #fff;
  --auf-dunkel-2: rgba(255, 255, 255, 0.76);
  --auf-dunkel-linie: rgba(255, 255, 255, 0.24);
  --auf-dunkel-rand: rgba(255, 255, 255, 0.5);
  --auf-dunkel-flaeche: rgba(255, 255, 255, 0.12);
  /* Schleier hinter Blatt, Dialog (dicht: Lichtbox) */
  --schleier: rgba(10, 10, 12, 0.48);
  --schleier-dicht: rgba(10, 10, 12, 0.92);

  --tinte-1: #16161a;
  --tinte-2: #5b5b66;
  --tinte-3: #8a8a94;
  --linie: #e4e4e8;
  --linie-stark: #cfcfd6;
  /* Rand bedienbarer Elemente (Feld, Auswahl, Segment, Ablage, Kästchen, Termin): ≥ 3:1 auf --grund und --flaeche jedes
     Stils (WCAG 1.4.11; Wächter __tests__/gestaltungBewerbende.test.js rechnet nach). Haarlinien bleiben --linie* */
  --rand-feld: #8c8c93;
  --grund: #ffffff;
  --flaeche: #f6f6f4;
  --flaeche-2: #eeeeea;

  --schrift-titel: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titel-gewicht: 600;
  --titel-laufweite: -0.02em;

  --h1: 40px; --h1-zeile: 48px;
  --h2: 28px; --h2-zeile: 34px;
  --h3: 20px; --h3-zeile: 26px;
  --text: 17px; --text-zeile: 28px;
  --klein: 15px; --klein-zeile: 22px;
  --lead: 19px; --lead-zeile: 30px;
  /* Abschnittstitel im Stellentext (Was Sie mitbringen …): klar über den Zwischentiteln (h3 = 17 px Textschrift) */
  --h2-inhalt: 22px; --h2-inhalt-zeile: 28px;

  --ecke-bild: 12px;
  --ecke-knopf: 10px;
  --ecke-feld: 10px;
  --ecke-flaeche: 16px;

  --rand: 20px;
  --abschnitt: 72px;
  --breite: 1200px;
  --lesen: 680px;
}

@media (min-width: 768px) { :root { --rand: 40px; } }
@media (min-width: 1024px) {
  :root {
    --h1: 64px; --h1-zeile: 68px;
    --h2: 40px; --h2-zeile: 46px;
    --h3: 22px; --h3-zeile: 28px;
    --lead: 20px; --lead-zeile: 32px;
    --h2-inhalt: 26px; --h2-inhalt-zeile: 32px;
    --abschnitt: 112px;
  }
}

/* ---------- Stil «klassisch» ---------- */
[data-stil="klassisch"] {
  --schrift-titel: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --schrift-text: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titel-gewicht: 600;
  --titel-laufweite: -0.01em;
  --grund: #faf8f3;
  --flaeche: #f1ede4;
  --flaeche-2: #e8e2d6;
  --linie: #e2dccf;
  --linie-stark: #cdc5b5;
  --rand-feld: #8e8676;
  --tinte-1: #1b1a17;
  --tinte-2: #5a5650;
  /* Platzhalter auf dem cremefarbenen Grund ≥ 4,5:1 (Ruhig/Kräftig behalten #8a8a94) */
  --tinte-3: #6f6a61;
  --ecke-bild: 2px;
  --ecke-knopf: 4px;
  --ecke-feld: 4px;
  --ecke-flaeche: 4px;
}
@media (min-width: 1024px) {
  [data-stil="klassisch"] { --h1: 60px; --h1-zeile: 66px; --h2: 38px; --h2-zeile: 44px; }
}

/* ---------- Stil «kräftig» ---------- */
[data-stil="kraeftig"] {
  --schrift-titel: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-text: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titel-gewicht: 800;
  --titel-laufweite: -0.01em;
  --h1: 44px; --h1-zeile: 46px;
  --h2: 30px; --h2-zeile: 32px;
  --h3: 20px; --h3-zeile: 24px;
  --text-zeile: 27px;
  --ecke-bild: 0px;
  --ecke-knopf: 0px;
  --ecke-feld: 0px;
  --ecke-flaeche: 0px;
}
@media (min-width: 1024px) {
  [data-stil="kraeftig"] { --h1: 80px; --h1-zeile: 80px; --h2: 48px; --h2-zeile: 50px; --h3: 24px; --h3-zeile: 28px; --h2-inhalt: 28px; --h2-inhalt-zeile: 32px; }
}

/* Handy (unter 768 px): erster Titel und Einleitung kleiner (Befund am iPhone, 25.10.2026). Steht nach den
   Stilvorlagen, damit «kräftig» hier seinen eigenen Wert behält; ab 768 px gelten die Werte oben unverändert. */
@media (max-width: 767px) {
  :root { --h1: 34px; --h1-zeile: 40px; --lead: 18px; --lead-zeile: 28px; }
  [data-stil="kraeftig"] { --h1: 38px; --h1-zeile: 40px; }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte-1);
  font-family: var(--schrift-text);
  font-size: var(--text);
  line-height: var(--text-zeile);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-numeric: proportional-nums;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
p + p { margin-top: 16px; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: var(--titel-gewicht);
  letter-spacing: var(--titel-laufweite);
  text-wrap: balance;
  overflow-wrap: anywhere;
  color: var(--tinte-1);
}
[data-stil="kraeftig"] h1, [data-stil="kraeftig"] h2, [data-stil="kraeftig"] h3 { font-variation-settings: 'wdth' 112; }
[data-stil="klassisch"] h1, [data-stil="klassisch"] h2 { font-variation-settings: 'opsz' 60; }
h1 { font-size: var(--h1); line-height: var(--h1-zeile); }
h2 { font-size: var(--h2); line-height: var(--h2-zeile); }
h3 { font-size: var(--h3); line-height: var(--h3-zeile); }
p, li { text-wrap: pretty; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--akzent-tief); outline-offset: 2px; border-radius: 4px; }

.rahmen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.rahmen.rahmen-satz { padding-top: 72px; padding-bottom: 112px; max-width: calc(var(--lesen) + 2 * var(--rand)); }
.rahmen-satz .lead { margin-top: 24px; color: var(--tinte-2); }
.video-hinweis { margin-top: 12px; }
.abschnitt { padding: var(--abschnitt) 0 0; }
/* Abstand zum Fuss: genau einmal, über .fuss { margin-top } (kein padding-bottom am letzten Abschnitt) */
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.meta { color: var(--tinte-2); font-size: var(--klein); line-height: var(--klein-zeile); }
.meta span { white-space: nowrap; }
.meta span:not(:last-child)::after { content: '·'; margin: 0 4px 0 8px; color: var(--tinte-3); }

/* ---------- Knöpfe und Verweise ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  border: 0; border-radius: var(--ecke-knopf);
  background: var(--akzent-knopf); color: var(--akzent-knopf-text);
  font: 600 16px/24px var(--schrift-text);
  text-decoration: none; cursor: pointer;
  transition: filter 150ms ease, transform 150ms ease;
}
.knopf:hover { background: color-mix(in srgb, var(--akzent-knopf) 88%, #000); } /* nur dunkler: Weiss trägt weiter */
.knopf:active { background: color-mix(in srgb, var(--akzent-knopf) 88%, #000); transform: translateY(1px); }
.knopf--leise { background: transparent; color: var(--tinte-1); box-shadow: inset 0 0 0 1.5px var(--linie-stark); }
.knopf--leise:hover, .knopf--leise:active { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tinte-1); }
.knopf--breit { width: 100%; }
.verweis {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--tinte-1); font-weight: 600; text-decoration: none;
}
.verweis span { text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: text-decoration-color 150ms; }
.verweis:hover span { text-decoration-color: var(--akzent-tief); }
.verweis svg { transition: transform 150ms ease; }
.verweis:hover svg { transform: translateX(3px); }

/* ---------- Kopf ---------- */
.kopf { border-bottom: 1px solid var(--linie); background: var(--grund); }
.kopf .rahmen { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.kopf-marke { display: inline-flex; align-items: center; text-decoration: none; min-height: 44px; flex-shrink: 0; }
.kopf-marke img { height: 32px; width: auto; }
.kopf-name { font: var(--titel-gewicht) 20px/28px var(--schrift-titel); letter-spacing: var(--titel-laufweite); }
.kopf-nav { display: flex; align-items: center; gap: 24px; font-size: var(--klein); min-width: 0; }
/* Firmenwebsite rechts im Kopf, auch am Handy: zu lang ⇒ der Text wird gekürzt, nie Überlauf */
.kopf-web { min-width: 0; max-width: 100%; }
.kopf-web span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-web svg { flex: none; }
.kopf-nav a { text-decoration: none; color: var(--tinte-2); min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.kopf-nav a:hover { color: var(--tinte-1); }
@media (min-width: 768px) { .kopf-marke img { height: 40px; } }
[data-stil="kraeftig"] .kopf { border-bottom: 0; }

/* ---------- Einstieg ---------- */
.einstieg { padding-top: 48px; }
.einstieg-raster { display: grid; gap: 32px; }
.einstieg h1 { max-width: 14ch; }
.einstieg-text .lead { margin-top: 24px; max-width: 34em; font-size: var(--lead); line-height: var(--lead-zeile); color: var(--tinte-2); white-space: pre-line; } /* Zeilenumbrüche der Einleitung wie die alte Showcase */
.einstieg-aktionen { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
@media (min-width: 768px) { .einstieg h1 { font-size: 52px; line-height: 58px; } }
@media (min-width: 1024px) { .einstieg { padding-top: 72px; } .einstieg h1 { font-size: var(--h1); line-height: var(--h1-zeile); } }
@media (min-width: 1200px) { .einstieg-raster { grid-template-columns: 5fr 6fr; gap: 72px; align-items: center; } }
.einstieg--ohne-bild .einstieg-raster { grid-template-columns: 1fr; }
.einstieg--ohne-bild h1 { max-width: 18ch; }

/* Bild bzw. Slider im Einstieg */
.buehne { position: relative; margin: 0 calc(-1 * var(--rand)); }
.buehne-bilder { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--flaeche); }
/* Wischen (karriere.js): waagrecht wechselt das Bild, senkrecht scrollt die Seite weiter, Zoomen bleibt */
.buehne-bilder { touch-action: pan-y pinch-zoom; }
.buehne-bild { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms ease; }
.buehne-bild.ist-aktiv { opacity: 1; }
.buehne-bild img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .buehne-bild { transition: none; } }
.buehne-fuss { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 16px var(--rand) 0; }
.buehne-steuer { margin-left: -12px; }
.buehne-titel { font: var(--titel-gewicht) var(--h3)/var(--h3-zeile) var(--schrift-titel); letter-spacing: var(--titel-laufweite); }
.buehne-satz { margin-top: 4px; color: var(--tinte-2); font-size: var(--klein); line-height: var(--klein-zeile); }
.buehne-steuer { display: flex; align-items: center; gap: 4px; }
.buehne-steuer button {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--tinte-1); cursor: pointer;
}
.buehne-steuer button:hover { background: var(--flaeche); }
.buehne-zahl { min-width: 40px; text-align: center; font-size: var(--klein); color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.buehne-fortschritt { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.35); }
.buehne-fortschritt i { display: block; height: 100%; width: 0; background: var(--akzent); }
@media (min-width: 768px) {
  .buehne { margin: 0; }
  .buehne-bilder { border-radius: var(--ecke-bild); }
  .buehne-fuss { grid-template-columns: 1fr auto; gap: 16px; align-items: start; padding: 16px 0 0; }
  .buehne-steuer { margin-left: 0; }
}
@media (min-width: 768px) { .buehne-bilder { aspect-ratio: 3 / 2; } }
@media (min-width: 1200px) { .buehne-bilder { aspect-ratio: 1 / 1; } }

/* Kräftig: Einstieg als Akzentband */
/* Fläche in --akzent-flaeche: Fliesstext in Weiss ≥ 4,5:1 (farbe.js, Entscheid EE 25.10.2026 nach dem Audit), voll
   deckend — die Hierarchie trägt die Grösse, nicht Transparenz. Der Knopf ist invertiert: Weiss mit Schrift in
   --akzent-tief (≥ 4,5:1 auf Weiss) */
[data-stil="kraeftig"] .einstieg { background: var(--akzent-flaeche); color: var(--akzent-knopf-text); padding-bottom: 48px; }
[data-stil="kraeftig"] .einstieg h1 { color: var(--akzent-knopf-text); max-width: none; }
[data-stil="kraeftig"] .einstieg-text .lead { color: var(--akzent-knopf-text); }
[data-stil="kraeftig"] .einstieg .knopf { background: var(--akzent-knopf-text); color: var(--akzent-tief); }
/* Hover des invertierten Knopfs: Fläche bleibt Weiss (eine getönte Fläche senkte den Kontrast der Schrift), dafür unterstrichen */
[data-stil="kraeftig"] .einstieg .knopf:hover, [data-stil="kraeftig"] .einstieg .knopf:active { background: var(--akzent-knopf-text); text-decoration: underline; text-underline-offset: 4px; }
[data-stil="kraeftig"] .einstieg .verweis { color: var(--akzent-knopf-text); }
[data-stil="kraeftig"] .einstieg .verweis span { text-decoration-color: currentColor; }
[data-stil="kraeftig"] .buehne-fuss, [data-stil="kraeftig"] .buehne-satz { color: var(--akzent-knopf-text); }
[data-stil="kraeftig"] .buehne-steuer button { color: var(--akzent-knopf-text); }
[data-stil="kraeftig"] .buehne-steuer button:hover { background: rgba(0,0,0,0.08); }
[data-stil="kraeftig"] .buehne-zahl { color: var(--akzent-knopf-text); }
[data-stil="kraeftig"] .buehne-fortschritt i { background: var(--akzent-knopf-text); }
@media (min-width: 1024px) {
  [data-stil="kraeftig"] .einstieg { padding-bottom: 72px; }
  [data-stil="kraeftig"] .einstieg h1 { font-size: 72px; line-height: 74px; }
}
@media (min-width: 1200px) { [data-stil="kraeftig"] .einstieg-raster { grid-template-columns: 1fr 1fr; gap: 48px; } }

/* ---------- Abschnittskopf ---------- */
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
/* Titel links, Anzahl rechts auf derselben Grundlinie; zu eng ⇒ die Anzahl rutscht unter den Titel, linksbündig */
.abschnitt-titelzeile { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.abschnitt-zahl { font-size: 15px; line-height: 22px; font-weight: 400; color: var(--tinte-2); white-space: nowrap; }
@media (min-width: 1024px) { .abschnitt-kopf { margin-bottom: 48px; } }

/* ---------- Offene Stellen ---------- */
.stellen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-stark); }
.stelle { border-bottom: 1px solid var(--linie); }
.stelle a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 24px;
  padding: 24px 0; text-decoration: none; color: inherit;
}
.stelle h3 { grid-column: 1; transition: color 150ms; }
.stelle .meta { grid-column: 1; }
.stelle-pfeil {
  grid-column: 2; grid-row: 1 / span 2;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  color: var(--tinte-2); transition: transform 150ms ease, background 150ms ease, color 150ms ease;
}
.stelle a:hover h3 { color: var(--akzent-tief); }
.stelle a:hover .stelle-pfeil { background: var(--akzent-knopf); color: var(--akzent-knopf-text); transform: translateX(4px); }
.stelle-neu { display: inline-block; margin-left: 8px; vertical-align: 3px; font: 600 13px/16px var(--schrift-text); letter-spacing: 0.02em; color: var(--akzent-tief); }
@media (min-width: 1024px) { .stelle a { padding: 32px 0; } }

/* Übergang: Filterzeile des Markups vor dem Ausbau 25.10.2026 (Suchfeld + Ort direkt im Kopf), bis src neu geladen ist */
.abschnitt-kopf > .stellen-filter { flex: 1 1 100%; display: flex; flex-wrap: nowrap; gap: 8px; }
.abschnitt-kopf > .stellen-filter > .feld { flex: 1 1 240px; min-width: 0; }
.abschnitt-kopf > .stellen-filter > .auswahl { flex: 0 1 240px; min-width: 0; }
@media (max-width: 639px) { .abschnitt-kopf > .stellen-filter { width: 100%; display: grid; gap: 8px; } }
.stelle[hidden] { display: none; }
.stellen-keine { margin-top: 24px; color: var(--tinte-2); }
.stellen-keine[hidden] { display: none; }

/* Merken je Stelle: ganz rechts, ausserhalb des Links (js/karriere.js zeigt ihn nur mit Speicher). Mit Merken weicht der
   Pfeil auf allen Breiten — ein Symbol je Zeile (UX-Audit 25.10.2026, UX-15); die ganze Zeile bleibt Link, der Titel
   färbt sich beim Überfahren. Die Klasse setzt der Server — von Anfang an, ohne Sprung. */
.stelle.mit-merken .stelle-pfeil { display: none; }
.stelle { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
.merken {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--akzent-tief); cursor: pointer;
  transition: background 150ms ease;
}
.merken:hover { background: var(--flaeche); }
.merken[hidden], .umschalter[hidden], button.verweis[hidden] { display: none; }
/* Merken/Teilen belegen ihren Platz von Anfang an; sichtbar und bedienbar erst mit .ist-bereit (js/karriere.js) */
[data-merken]:not(.ist-bereit), [data-teilen]:not(.ist-bereit) { visibility: hidden; }
[data-merken][aria-pressed="true"] svg path, .umschalter[aria-pressed="true"] svg path { fill: currentColor; }

/* Werkzeug über der Liste: Suche (ganze Breite), darunter die Filter nebeneinander, Sortierung rechts */
.stellen-werkzeug { flex: 1 1 100%; display: grid; gap: 12px; min-width: 0; }
.stellen-suche { display: flex; gap: 8px; }
.suchfeld { position: relative; flex: 1 1 auto; min-width: 0; }
.suchfeld svg { position: absolute; left: 16px; top: 50%; margin-top: -10px; color: var(--tinte-3); pointer-events: none; }
.suchfeld .feld { padding-left: 48px; }
.filtern { flex: none; padding: 12px 16px; }
.filtern svg { color: var(--tinte-2); }
.filter-felder { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-feld { flex: 0 1 220px; min-width: 160px; }
.filter-feld--sortierung { margin-left: auto; }
.filter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.blatt-kopf, .blatt-fuss { display: none; }
@media (min-width: 768px) { .filtern { display: none; } }
.stellen-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.stellen-stand[hidden] { display: none; }
.umschalter {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px;
  border: 1.5px solid var(--linie-stark); border-radius: var(--ecke-knopf); background: var(--grund);
  color: var(--tinte-1); font: 600 var(--klein)/var(--klein-zeile) var(--schrift-text); cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.umschalter svg { color: var(--akzent-tief); }
.umschalter:hover { border-color: var(--tinte-3); }
.umschalter[aria-pressed="true"] { border-color: var(--tinte-1); background: var(--tinte-1); color: var(--auf-dunkel); }
.umschalter[aria-pressed="true"] svg { color: var(--auf-dunkel); }
/* Verweis als Knopf (Zurücksetzen, Merken, Teilen): wie Fliesstext-Verweis, Symbol steht still */
button.verweis { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
button.verweis:hover svg { transform: none; }
.stellen-mehr { margin-top: 32px; display: flex; justify-content: center; }
.stellen-mehr[hidden] { display: none; }

/* Handy: die Filter stehen in einem Blatt von unten (Dialog), das Suchfeld bleibt über der Liste */
@media (max-width: 767px) {
  .stellen-werkzeug .stellen-filter { display: none; }
  .stellen-werkzeug .stellen-filter.ist-offen {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
    max-height: calc(100dvh - 48px); background: var(--grund); color: var(--tinte-1);
    border-radius: var(--ecke-flaeche) var(--ecke-flaeche) 0 0;
  }
  .ist-offen .blatt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px var(--rand); border-bottom: 1px solid var(--linie); }
  .ist-offen .blatt-kopf h3 { font-size: 18px; line-height: 26px; }
  .ist-offen .filter-felder { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 16px; padding: 24px var(--rand); }
  .ist-offen .filter-feld { min-width: 0; margin-left: 0; }
  .ist-offen .filter-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: block; margin-bottom: 8px; font-size: var(--klein); line-height: var(--klein-zeile); font-weight: 600; }
  .ist-offen .blatt-fuss { display: flex; gap: 8px; padding: 12px var(--rand) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); }
  .blatt-fuss .knopf { min-width: 0; padding-left: 16px; padding-right: 16px; white-space: nowrap; }
  .blatt-fuss .knopf--leise { flex: none; }
  .blatt-fuss [data-ergebnis] { flex: 1 1 auto; }
}
.blatt-zu { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tinte-1); cursor: pointer; }
.blatt-zu:hover { background: var(--flaeche); }
.blatt-schleier { position: fixed; inset: 0; z-index: 40; background: var(--schleier); }

.stellen-leer { padding: 32px; border-radius: var(--ecke-flaeche); background: var(--flaeche); }
.stellen-leer p { max-width: 40em; margin-top: 8px; color: var(--tinte-2); }
.stellen-leer .einstieg-aktionen { margin-top: 24px; }
/* Ohne Stellen, Abschluss rückt nach oben: eine ruhige Zeile vor dem Block */
.stellen-leer-zeile { margin-bottom: 24px; color: var(--tinte-2); font-size: var(--lead); line-height: var(--lead-zeile); }

/* ---------- Text und Bild ---------- */
.text-bild { display: grid; gap: 32px; align-items: center; }
.text-bild-text { max-width: var(--lesen); }
.text-bild-text h2 { margin-bottom: 24px; }
.text-bild-text p { color: var(--tinte-2); }
.text-bild figure { margin: 0 calc(-1 * var(--rand)); }
.text-bild figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 768px) { .text-bild figure { margin: 0; } .text-bild figure img { border-radius: var(--ecke-bild); } }
@media (min-width: 1024px) {
  .text-bild { grid-template-columns: 6fr 5fr; gap: 72px; }
  .text-bild--bild-links figure { order: -1; }
  .text-bild--bild-links { grid-template-columns: 5fr 6fr; }
}

/* ---------- Zahlen ---------- */
.zahlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.zahlen li { border-top: 1px solid var(--linie-stark); padding-top: 16px; }
.zahlen strong { display: block; font: var(--titel-gewicht) var(--h1)/var(--h1-zeile) var(--schrift-titel); letter-spacing: var(--titel-laufweite); font-variant-numeric: tabular-nums; }
/* Die Zahlen behalten am Handy ihre bisherige Grösse (der kleinere h1 oben gilt nur für Titel) */
@media (max-width: 767px) {
  .zahlen strong { font-size: 40px; line-height: 48px; }
  [data-stil="kraeftig"] .zahlen strong { font-size: 44px; line-height: 46px; }
}
.zahlen span { display: block; margin-top: 8px; color: var(--tinte-2); font-size: var(--klein); line-height: var(--klein-zeile); }
@media (min-width: 1024px) { .zahlen { grid-template-columns: repeat(4, 1fr); } }
[data-stil="kraeftig"] .zahlen strong { color: var(--akzent-tief); font-variation-settings: 'wdth' 112; }

/* ---------- Das bieten wir ---------- */
.vorteile { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 48px; }
.vorteile li { padding: 24px 0; border-top: 1px solid var(--linie); align-self: start; align-content: start; } /* nicht auf Reihenhöhe strecken: sonst klafft bei kürzeren Karten eine Lücke zwischen Titel und Text */
.vorteile h3 { font-size: 18px; line-height: 26px; }
.vorteile p { margin-top: 8px; color: var(--tinte-2); font-size: 16px; line-height: 26px; }
/* Icon links vom Titel, auf der Titelzeile zentriert; Text darunter bündig mit dem Titel. Ohne Icon keine Einrückung. */
.vorteile li.mit-icon { display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; align-items: start; }
.vorteile li.mit-icon > :not(.vorteil-icon) { grid-column: 2; }
.vorteil-icon { grid-column: 1; grid-row: 1; height: 26px; display: flex; align-items: center; color: var(--akzent-tief); }
.vorteil-icon svg { display: block; }
.vorteil-icon + p { margin-top: 0; }
@media (min-width: 768px) { .vorteile { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .vorteile { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Stimme aus dem Team ---------- */
.stimme { margin: 0; max-width: 920px; }
.stimme blockquote { margin: 0; font: 400 24px/34px var(--schrift-titel); letter-spacing: -0.01em; text-wrap: pretty; }
.stimme blockquote::before { content: '«'; }
.stimme blockquote::after { content: '»'; }
.stimme figcaption { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.stimme figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.stimme figcaption strong { display: block; font-weight: 600; }
.stimme figcaption span { display: block; color: var(--tinte-2); font-size: var(--klein); line-height: var(--klein-zeile); }
@media (min-width: 1024px) { .stimme blockquote { font-size: 32px; line-height: 44px; } }
[data-stil="klassisch"] .stimme blockquote { font-style: italic; }
[data-stil="kraeftig"] .stimme blockquote { font-weight: 600; font-variation-settings: 'wdth' 100; }

/* ---------- Einblicke ---------- */
.einblicke { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.einblicke button { padding: 0; border: 0; background: var(--flaeche); cursor: zoom-in; overflow: hidden; border-radius: calc(var(--ecke-bild) * 0.66); }
.einblicke img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 400ms ease; }
.einblicke button:hover img { transform: scale(1.03); }
.einblicke button:first-child { grid-column: span 2; }
.einblicke button:first-child img { aspect-ratio: 3 / 2; }
/* Raster nach Bildzahl, ohne Loch (UX-Audit 25.10.2026, UX-05; Wächter __tests__/karriereEinblicke.test.js, bis
   GALLERY_MAX = 6). Handy/Tablet: 2 Spalten, das erste Bild breit; bei gerader Zahl auch das letzte. */
@media (max-width: 1023px) {
  .einblicke > button:last-child:nth-child(even) { grid-column: span 2; }
  .einblicke > button:last-child:nth-child(even) img { aspect-ratio: 3 / 2; }
}
/* Desktop: 12er-Raster. 1 Bild breit · 2 und 4 halb-halb · 3 und 6 eines gross (8) mit zwei gestapelten (4) daneben,
   bei 6 darunter drei gleich · 5 eines gross (6) mit vier Quadraten (3). Quadrate rechnen die Höhe: gross = 2 × klein. */
@media (min-width: 1024px) {
  .einblicke { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .einblicke > button { grid-column: span 3; }
  .einblicke > button:first-child { grid-column: span 6; grid-row: span 2; }
  .einblicke > button:first-child img { aspect-ratio: 1; }
  .einblicke > button:only-child { grid-column: span 12; grid-row: auto; }
  .einblicke > button:only-child img { aspect-ratio: 2 / 1; }
  .einblicke > button:first-child:nth-last-child(2), .einblicke > button:first-child:nth-last-child(2) ~ button,
  .einblicke > button:first-child:nth-last-child(4), .einblicke > button:first-child:nth-last-child(4) ~ button { grid-column: span 6; grid-row: auto; }
  .einblicke > button:first-child:nth-last-child(2) img, .einblicke > button:first-child:nth-last-child(2) ~ button img,
  .einblicke > button:first-child:nth-last-child(4) img, .einblicke > button:first-child:nth-last-child(4) ~ button img { aspect-ratio: 3 / 2; }
  .einblicke > button:first-child:nth-last-child(3), .einblicke > button:first-child:nth-last-child(6) { grid-column: span 8; grid-row: span 2; }
  .einblicke > button:first-child:nth-last-child(3) ~ button, .einblicke > button:first-child:nth-last-child(6) ~ button { grid-column: span 4; }
}

/* ---------- Abschluss: Initiativ + Jobalarm ---------- */
.abschluss { display: grid; gap: 48px; padding: 32px; border-radius: var(--ecke-flaeche); background: var(--flaeche); }
.abschluss h2 { font-size: var(--h2); }
.abschluss p { margin-top: 16px; color: var(--tinte-2); max-width: 36em; }
.abschluss .einstieg-aktionen { margin-top: 24px; }
.abschluss--eins { grid-template-columns: 1fr !important; }
.abschluss--eins .jobalarm { padding-left: 0; border-left: 0; }
/* Nur der Jobalarm (Leerzustand, Agentur-Review Punkt 8): Feld in Lesebreite statt über die ganze Fläche */
.abschluss--eins .jobalarm { max-width: 640px; }
.jobalarm h3 { font-size: 18px; line-height: 26px; }
.jobalarm p { margin-top: 8px; font-size: var(--klein); line-height: var(--klein-zeile); }
.jobalarm form { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
/* Feld und Knopf nebeneinander, solange das Feld ≥ 240 px bleibt (sonst kürzte «Benachrichtigen» den Platzhalter) —
   darunter rutscht der Knopf in die nächste Zeile */
@media (min-width: 640px) { .jobalarm form { flex-direction: row; flex-wrap: wrap; } .jobalarm form > .feld-gruppe { flex: 1 1 240px; min-width: 0; } .jobalarm form .knopf { flex: none; } }
.jobalarm .jobalarm-meldung { margin-top: 8px; font-size: var(--klein); line-height: var(--klein-zeile); color: var(--tinte-2); }
.jobalarm .jobalarm-meldung:empty { display: none; }
.jobalarm .jobalarm-meldung:focus { outline: none; }
.jobalarm .jobalarm-meldung.ist-fehler { color: var(--fehler); }
.jobalarm .jobalarm-hinweis { margin-top: 8px; font-size: 14px; line-height: 20px; } /* klein wie .feld-hilfe (sonst gewönne .jobalarm p) */
.jobalarm form[hidden] ~ .jobalarm-hinweis { display: none; }
@media (min-width: 1024px) {
  .abschluss { grid-template-columns: 7fr 5fr; gap: 72px; padding: 72px; align-items: center; }
  .jobalarm { padding-left: 48px; border-left: 1px solid var(--linie-stark); }
}
[data-stil="kraeftig"] .abschluss { background: var(--tinte-1); color: var(--auf-dunkel); }
[data-stil="kraeftig"] .abschluss h2, [data-stil="kraeftig"] .abschluss h3 { color: var(--auf-dunkel); }
[data-stil="kraeftig"] .abschluss p { color: var(--auf-dunkel-2); }
[data-stil="kraeftig"] .abschluss .jobalarm { border-color: var(--auf-dunkel-linie); }
[data-stil="kraeftig"] .abschluss .jobalarm-meldung.ist-fehler { color: var(--fehler-hell); }
[data-stil="kraeftig"] .abschluss .feld { background: var(--grund); }
[data-stil="kraeftig"] .abschluss .knopf--leise { color: var(--auf-dunkel); box-shadow: inset 0 0 0 1.5px var(--auf-dunkel-rand); }
[data-stil="kraeftig"] .abschluss .verweis { color: var(--auf-dunkel); }

/* ---------- Fuss ---------- */
.fuss { margin-top: var(--abschnitt); border-top: 1px solid var(--linie); padding: 48px 0 32px; font-size: var(--klein); line-height: var(--klein-zeile); color: var(--tinte-2); }
.fuss-raster { display: grid; gap: 24px; }
main:has(> .bewerbung:last-child) + .fuss { margin-top: 0; border-top: 0; }
.fuss--direkt { margin-top: 0; border-top: 0; }
.fuss img { height: 28px; width: auto; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.fuss-links a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; color: var(--tinte-2); }
.fuss-links a:hover { color: var(--tinte-1); }
/* UX-11: 14 px in --tinte-2 (≥ 4,5:1 auf jedem Grund), Link-Ziel 24 px hoch ohne die Zeile zu dehnen */
.fuss-marke { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; color: var(--tinte-2); font-size: 14px; line-height: 20px; }
.fuss-marke a { display: inline-flex; align-items: center; min-height: 24px; color: var(--tinte-2); text-underline-offset: 3px; }
.fuss-marke a:hover { color: var(--tinte-1); }
@media (min-width: 1024px) { .fuss-raster { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- Stellenseite ---------- */
.zurueck { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 24px; color: var(--tinte-2); text-decoration: none; font-size: var(--klein); }
.zurueck:hover { color: var(--tinte-1); }
/* /bewerben: Rückweg über dem Formular, das Formular folgt ohne Abschnittsabstand */
.initiativ-weg { padding-bottom: 24px; }
main > .initiativ-weg + .bewerbung { margin-top: 0; }
/* Ein Grund von Kopf bis Fuss: kein weisser Streifen über dem Formular, das Formular rückt an den Rückweg (UX-17) */
main:has(> .initiativ-weg) { background: var(--flaeche); }
main > .initiativ-weg + .bewerbung { padding-top: 24px; }
@media (min-width: 1024px) { main > .initiativ-weg + .bewerbung { padding-top: 48px; } }
.stelle-kopf { padding-top: 24px; }
.stelle-kopf h1 { max-width: 18ch; }
.stelle-kopf .meta { margin-top: 16px; font-size: var(--text); line-height: var(--text-zeile); }
.stelle-raster { display: grid; gap: 48px; margin-top: 48px; }
.stelle-inhalt { max-width: var(--lesen); }
.stelle-inhalt .lead { font-size: var(--lead); line-height: var(--lead-zeile); color: var(--tinte-1); }
.stelle-inhalt h2 { font-size: var(--h2-inhalt); line-height: var(--h2-inhalt-zeile); margin: 48px 0 16px; }
.stelle-inhalt p { color: var(--tinte-2); }
.stelle-inhalt ul { margin: 0; padding: 0; list-style: none; }
.stelle-inhalt li { position: relative; padding-left: 24px; color: var(--tinte-2); }
.stelle-inhalt li + li { margin-top: 8px; }
.stelle-inhalt li::before { content: ''; position: absolute; left: 2px; top: 13px; width: 10px; height: 2px; background: var(--akzent); }
/* Unterliste: eingezogen (Textkante des Punkts), kleiner Punkt statt Strich als Marke des Unterpunkts */
.stelle-inhalt li ul, .stelle-inhalt li ol { margin: 8px 0 0 0; }
.stelle-inhalt li li::before { top: 11px; left: 4px; width: 6px; height: 6px; border-radius: 50%; }
/* Abstände: Liste nach Liste und Absatz nach Liste 16, Liste nach Absatz 12 (gehört zum Absatz davor) */
.stelle-inhalt ul + ul, .stelle-inhalt ol + ol, .stelle-inhalt ul + ol, .stelle-inhalt ol + ul { margin-top: 16px; }
.stelle-inhalt p + ul, .stelle-inhalt p + ol { margin-top: 12px; }
.stelle-inhalt ul + p, .stelle-inhalt ol + p { margin-top: 16px; }
/* Zwischentitel im Stellentext (h3 aus stellentext.js): klar unter der Abschnittsüberschrift (UX-Audit 25.10.2026, UX-10):
   Textgrösse und Textschrift, fett, in Tinte statt im Grau der Absätze — h2 ist 22/26 px in der Titelschrift */
.stelle-inhalt h3 { font-family: var(--schrift-text); font-size: 17px; line-height: 26px; font-weight: 600; letter-spacing: 0; font-variation-settings: normal; color: var(--tinte-1); margin: 32px 0 8px; }
/* Nummerierte Liste: Text bündig mit der Strichliste (24px), Ziffern in Akzent-tief, gleich breit */
.stelle-inhalt ol { margin: 0; padding: 0 0 0 24px; list-style-type: decimal; }
.stelle-inhalt ol[type="a"] { list-style-type: lower-alpha; }
.stelle-inhalt ol > li { padding-left: 0; }
.stelle-inhalt ol > li::before { content: none; }
.stelle-inhalt ol > li::marker { color: var(--akzent-tief); font-weight: 600; font-variant-numeric: tabular-nums; }
.stelle-karte { align-self: start; padding: 24px; border: 1px solid var(--linie); border-radius: var(--ecke-flaeche); background: var(--grund); }
.stelle-karte dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; font-size: var(--klein); line-height: var(--klein-zeile); }
.stelle-karte dt { color: var(--tinte-2); }
.stelle-karte dd { margin: 0; font-weight: 600; text-align: right; }
.stelle-karte .knopf { margin-top: 24px; }
.stelle-karte .hinweis { margin-top: 12px; text-align: center; color: var(--tinte-2); font-size: 13px; line-height: 20px; }
/* Merken und Teilen unter dem Knopf; die Zeile steht von Anfang an (kein Sprung), die Knöpfe erscheinen mit .ist-bereit */
.karte-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; margin-top: 8px; }
.karte-aktionen .verweis { font-size: var(--klein); }
.karte-aktionen .verweis svg { color: var(--akzent-tief); }
.teilen-meldung { margin-top: 4px; text-align: center; color: var(--tinte-2); font-size: 13px; line-height: 20px; }
/* leer im Baum lassen (Live-Region), ohne Platz zu belegen */
.teilen-meldung:empty { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; }
.kontakt { display: flex; gap: 16px; align-items: center; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--linie); }
.kontakt img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
/* Initialen immer, Foto darüber (onerror entfernt es). Doppelte Klassen, sonst gewinnt «.kontakt span». */
.kontakt .kontakt-bild { position: relative; flex: 0 0 auto; width: 48px; height: 48px; }
.kontakt .kontakt-bild img { position: absolute; inset: 0; }
.kontakt .kontakt-initialen { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche-2); font-weight: 600; font-size: 14px; line-height: 1; color: var(--tinte-2); }
.kontakt strong { display: block; font-size: var(--klein); line-height: var(--klein-zeile); }
.kontakt span, .kontakt a { display: block; color: var(--tinte-2); font-size: 14px; line-height: 20px; text-decoration: none; }
/* Telefon und E-Mail: Ziel ≥ 24 px (WCAG 2.5.8, UX-13), untereinander ohne Lücke */
.kontakt a { display: flex; align-items: center; min-height: 24px; }
.kontakt a:hover { color: var(--tinte-1); text-decoration: underline; }
@media (min-width: 1024px) {
  .stelle-raster { grid-template-columns: minmax(0, 7fr) minmax(320px, 4fr); gap: 72px; }
  .stelle-karte { position: sticky; top: 32px; }
}

/* Die Firma auf der Stellenseite (Agentur-Review 26.10.2026, Punkt 2): bestehende Komponenten (Vorteile, Stimme, Einblicke)
   in der Lesespalte, ruhiger gesetzt als auf der Karriereseite; ab 1024 neben der haftenden Karte (Karte über zwei Reihen) */
.stelle-firma { max-width: var(--lesen); padding-top: 48px; border-top: 1px solid var(--linie); }
.stelle-firma > h2 { font-size: var(--h2-inhalt); line-height: var(--h2-inhalt-zeile); }
.stelle-bild { margin: 24px 0 0; }
.stelle-bild img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--ecke-bild); background: var(--flaeche); }
.vorteile--kompakt { margin-top: 32px; gap: 0 32px; }
.vorteile--kompakt li { padding: 16px 0; }
.vorteile--kompakt h3 { font-size: 17px; line-height: 26px; }
.vorteile--kompakt + .verweis { margin-top: 8px; }
.stelle-firma .stimme { margin-top: 48px; }
.stelle-firma .stimme blockquote { font-size: 22px; line-height: 32px; }
.stelle-firma .stimme figcaption { margin-top: 24px; }
.stelle-firma .einblicke { margin-top: 48px; }
@media (min-width: 1024px) {
  .stelle-raster > .stelle-karte { grid-column: 2; grid-row: 1 / span 2; }
  .stelle-firma { grid-column: 1; }
  .stelle-firma .stimme blockquote { font-size: 24px; line-height: 34px; }
}
@media (min-width: 1200px) { .vorteile--kompakt { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) and (max-width: 1199px) { .vorteile--kompakt { grid-template-columns: 1fr 1fr; } }

/* Feste Leiste am Handy */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  padding: 12px var(--rand) calc(12px + env(safe-area-inset-bottom));
  background: var(--grund); border-top: 1px solid var(--linie);
  transform: translateY(0); transition: transform 200ms ease;
}
.leiste.ist-weg { transform: translateY(110%); }
.leiste-text { min-width: 0; }
.leiste strong { display: block; font-size: var(--klein); line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leiste span { display: block; font-size: 13px; line-height: 18px; color: var(--tinte-2); }
.leiste .knopf { flex: none; }
.leiste-aktionen { flex: none; display: flex; align-items: center; gap: 4px; }
@media (min-width: 1024px) { .leiste { display: none; } }
body.hat-leiste { padding-bottom: 88px; }
@media (min-width: 1024px) { body.hat-leiste { padding-bottom: 0; } }

/* ---------- Bewerbung ---------- */
.bewerbung { margin-top: var(--abschnitt); padding: var(--abschnitt) 0; background: var(--flaeche); scroll-margin-top: 0; }
/* Initiativseite: die Bewerbung ist der erste Abschnitt — kein weisser Streifen unter dem Kopf */
main > .bewerbung:first-child { margin-top: 0; }
.bewerbung-raster { display: grid; gap: 48px; }
.bewerbung-innen { max-width: var(--lesen); }
.ablauf { align-self: start; }
.ablauf h3 { font-size: 18px; line-height: 26px; }
.ablauf ol { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: s; }
.ablauf li { counter-increment: s; position: relative; padding: 0 0 24px 40px; color: var(--tinte-2); font-size: var(--klein); line-height: var(--klein-zeile); }
.ablauf li strong { display: block; margin-bottom: 4px; color: var(--tinte-1); font-weight: var(--titel-gewicht); font-size: 15px; line-height: 22px; }
/* Zeitangabe des Kunden («innert fünf Arbeitstagen»): leiser Zusatz zum Titel, nicht ein zweiter Titel (Befund 26.10.2026) */
.ablauf-zeit { font-size: 1em; font-weight: 400; color: var(--tinte-2); }
.ablauf-zeit::before { content: '·'; margin: 0 .35em 0 .1em; }
.ablauf li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--grund); box-shadow: inset 0 0 0 1.5px var(--linie-stark); font: 600 13px/24px var(--schrift-text); text-align: center; color: var(--tinte-1); }
.ablauf li:not(:last-child)::after { content: ''; position: absolute; left: 11.25px; top: 28px; bottom: 4px; width: 1.5px; background: var(--linie-stark); }
@media (min-width: 1024px) {
  .bewerbung-raster { grid-template-columns: minmax(0, 7fr) minmax(320px, 4fr); gap: 72px; }
  .ablauf { position: sticky; top: 32px; margin-top: 8px; }
}
/* h1 auf der Initiativseite /bewerben (Formular = Inhalt der Seite), h2 auf der Stellenseite — gleich gross */
.bewerbung h1, .bewerbung h2 { font-size: var(--h2); line-height: var(--h2-zeile); }
.bewerbung .unterzeile { margin-top: 12px; color: var(--tinte-2); }
/* Sprungziel von «Jetzt bewerben» (tabindex -1, js/bewerbung.js): Fokus für Vorleser, kein Ring um die Überschrift */
#t-bewerben:focus-visible { outline: none; }
.formular { margin-top: 48px; display: grid; gap: 24px; }
.zeile-2 { display: grid; gap: 24px; }
@media (min-width: 640px) { .zeile-2 { grid-template-columns: 1fr 1fr; } }
/* PLZ und Ort in einer Zeile, PLZ schmal — auch am Handy (UX-13) */
.zeile-2.zeile-plz { grid-template-columns: minmax(88px, 7rem) minmax(0, 1fr); gap: 16px; }
.feld-gruppe label:not(.ablage), .feld-gruppe .label { display: block; margin-bottom: 8px; font-size: var(--klein); line-height: var(--klein-zeile); font-weight: 600; }
.feld-gruppe .optional { font-weight: 400; color: var(--tinte-2); }
.feld {
  display: block; width: 100%; min-height: 48px; padding: 11px 16px;
  border: 1.5px solid var(--rand-feld); border-radius: var(--ecke-feld); background: var(--grund);
  color: var(--tinte-1); font: 400 16px/24px var(--schrift-text);
  transition: border-color 150ms, box-shadow 150ms;
}
.feld::placeholder { color: var(--tinte-3); }
.feld:hover { border-color: var(--tinte-2); } /* dunkler als der Rand */
.feld:focus { outline: none; border-color: var(--akzent-tief); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent); }
textarea.feld { min-height: 144px; resize: vertical; }
/* Datumsfeld: iOS gibt ihm eine Mindestbreite und lässt es über den Rand ragen; leer zeigt es nichts ⇒ Hinweis über data-leer */
.feld[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; display: block; text-align: left; }
.feld[type="date"]::-webkit-date-and-time-value { text-align: left; }
.feld[type="date"][data-leer]:not(:focus)::before { content: 'TT.MM.JJJJ'; color: var(--tinte-3); float: left; } /* float: der Kalender-Knopf rutschte sonst in Chromium unter den Hinweis */
.feld[type="date"][data-leer]:not(:focus)::-webkit-datetime-edit { display: none; }
.feld-hilfe { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--tinte-2); }

/* Ablage */
.ablage {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
  padding: 24px; border: 1.5px solid var(--rand-feld); border-radius: var(--ecke-flaeche);
  background: var(--grund); cursor: pointer; transition: border-color 150ms, background 150ms;
}
.ablage:hover, .ablage.ist-ueber { border-color: var(--akzent-tief); }
.ablage input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ablage-symbol { width: 48px; height: 48px; border-radius: var(--ecke-knopf); display: grid; place-items: center; background: color-mix(in srgb, var(--akzent) 14%, var(--grund)); color: var(--akzent-tief); }
.ablage-text > strong { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
.ablage-text u { text-decoration-color: var(--akzent-tief); text-underline-offset: 3px; }
.ablage-text > span { display: block; margin-top: 4px; color: var(--tinte-2); font-size: 14px; line-height: 20px; font-weight: 400; }
.ablage:focus-within { outline: 2px solid var(--akzent-tief); outline-offset: 2px; }
/* Ablegen geht nur mit Maus; am Touchscreen heisst es «Lebenslauf auswählen» (UX-13) */
@media (pointer: coarse) { .ablage-zeiger { display: none; } }

/* Anrede als Optionsknöpfe */
.wahl { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.wahl legend { padding: 0; margin-bottom: 8px; font-size: var(--klein); line-height: var(--klein-zeile); font-weight: 600; }
.wahl label { position: relative; }
.wahl legend .optional { font-weight: 400; color: var(--tinte-2); }
.wahl input { position: absolute; opacity: 0; }
.wahl label > span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 12px 16px;
  border: 1.5px solid var(--rand-feld); border-radius: var(--ecke-feld); background: var(--grund);
  font-size: 16px; cursor: pointer; transition: border-color 150ms, background 150ms;
}
.wahl input:checked + span { border-color: var(--tinte-1); background: var(--tinte-1); color: var(--auf-dunkel); }
.wahl input:focus-visible + span { outline: 2px solid var(--akzent-tief); outline-offset: 2px; }

/* Anrede als eine Gruppe aus drei gleich breiten Teilen (Frau | Herr | Divers) über die volle Breite: Rahmen und Ecke wie
   die Eingabefelder, innen Trennlinien. Die Gruppe schneidet die Fläche des gewählten Teils an ihren Ecken; der Fokusring
   liegt deshalb innen am Teil (kein Nachbar verdeckt ihn). */
.wahl--segment { display: block; }
.segment {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%;
  border: 1.5px solid var(--rand-feld); border-radius: var(--ecke-feld); background: var(--grund); overflow: hidden;
}
.segment label { position: relative; min-width: 0; }
.segment label + label { border-left: 1.5px solid var(--rand-feld); }
.segment label > span {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 8px;
  border: 0; border-radius: 0; background: transparent; font-size: 15px; font-weight: 400; line-height: 20px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.segment input:checked + span { background: var(--akzent-knopf); color: var(--akzent-knopf-text); }
.segment input:focus-visible + span { outline: 2px solid var(--akzent-tief); outline-offset: -4px; }
/* Sprachen: dieselbe Gruppe mit Mehrfachwahl (Kästchen), am Handy 2 × 2, ab 640 px vier nebeneinander. Die Trennlinien
   sind die 1,5-px-Lücke auf der Linienfarbe — so stimmen sie in beiden Anordnungen, auch zwischen den Zeilen. */
.segment--mehrfach { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5px; background: var(--rand-feld); }
.segment--mehrfach label + label { border-left: 0; }
.segment--mehrfach label > span { background: var(--grund); }
@media (min-width: 640px) { .segment--mehrfach { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Aufklappbar */
.mehr { border-top: 1px solid var(--linie-stark); border-bottom: 1px solid var(--linie-stark); }
.mehr summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; cursor: pointer; font-weight: 600;
}
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary small { display: block; font-weight: 400; color: var(--tinte-2); font-size: 14px; line-height: 20px; }
.mehr summary { padding: 12px 0; }
.mehr summary svg { flex: none; transition: transform 200ms ease; }
.mehr[open] summary svg { transform: rotate(180deg); }
.mehr-innen { display: grid; gap: 24px; padding: 8px 0 32px; }

/* Dateiliste */
.dateien { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.datei { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 12px 12px 16px; border: 1px solid var(--linie); border-radius: var(--ecke-feld); background: var(--grund); }
.datei-name { min-width: 0; }
.datei-name strong { display: block; font-size: var(--klein); line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datei-name span { display: block; font-size: 13px; line-height: 18px; color: var(--tinte-2); }
.datei .feld { min-height: 40px; padding: 7px 36px 7px 12px; font-size: 14px; width: auto; }
.datei-weg { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--tinte-2); cursor: pointer; display: grid; place-items: center; }
.datei-weg:hover { background: var(--flaeche); color: var(--tinte-1); }
/* Datei mit Art (Zeugnisse und weitere Unterlagen): am Handy Zeile 1 Häkchen + voller Name + Grösse, Zeile 2 Art (volle
   Breite) + «×»; ab 640 px alles in einer Zeile. Der Name bricht um statt gekürzt zu werden. */
.datei--art { grid-template-columns: auto minmax(0, 1fr) 44px; grid-template-areas: "symbol name name" "art art weg"; }
.datei--art .datei-symbol { grid-area: symbol; }
.datei--art .datei-name { grid-area: name; }
.datei--art .datei-name strong { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.datei--art .auswahl { grid-area: art; min-width: 0; }
.datei--art .feld { width: 100%; }
.datei--art .datei-weg { grid-area: weg; width: 44px; height: 44px; }
@media (min-width: 640px) { .datei--art { grid-template-columns: auto minmax(0, 1fr) minmax(160px, 220px) 44px; grid-template-areas: "symbol name art weg"; } }

/* Auswahl im Stil (statt iOS-Standard) */
.auswahl { position: relative; }
.auswahl select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.auswahl::after {
  content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid var(--tinte-2); border-bottom: 1.5px solid var(--tinte-2); transform: rotate(45deg); pointer-events: none;
}

/* Zustimmung */
.zustimmung { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: var(--klein); line-height: var(--klein-zeile); cursor: pointer; }
.zustimmung input { appearance: none; -webkit-appearance: none; margin: 0; width: 24px; height: 24px; border: 1.5px solid var(--rand-feld); border-radius: calc(var(--ecke-feld) * 0.5); background: var(--grund); display: grid; place-items: center; cursor: pointer; }
.zustimmung input:checked { background: var(--tinte-1); border-color: var(--tinte-1); }
.zustimmung input:checked::after { content: ''; width: 6px; height: 11px; margin-top: -2px; border-right: 2px solid var(--auf-dunkel); border-bottom: 2px solid var(--auf-dunkel); transform: rotate(45deg); }
.zustimmung a { text-underline-offset: 3px; }
.senden { display: grid; gap: 16px; justify-items: start; }
.senden .knopf { min-height: 56px; padding: 16px 32px; font-size: 17px; }
@media (max-width: 639px) { .senden .knopf { width: 100%; } }
.datenschutz-satz { font-size: 14px; line-height: 20px; color: var(--tinte-2); }

/* ---------- Ohne Bild: Text einspaltig ---------- */
.text-bild.text-bild--ohne-bild { grid-template-columns: 1fr; }
/* ---------- Hinweis «Keine Stelle gefunden»: Knopf wie Fliesstext ---------- */
.stellen-keine .verweis { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
/* ---------- Video ---------- */
.video-start { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--tinte-1); border-radius: var(--ecke-bild); overflow: hidden; aspect-ratio: 16 / 9; cursor: pointer; }
.video-start img { width: 100%; height: 100%; object-fit: cover; opacity: 0.86; }
.video-knopf { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--akzent-knopf); }
.video-knopf::after { content: ''; position: absolute; left: 29px; top: 24px; border-left: 20px solid var(--akzent-knopf-text); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.video-rahmen { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--ecke-bild); }
/* ---------- Lightbox ---------- */
.lichtbox { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px; background: var(--schleier-dicht); }
.lichtbox img { max-width: 100%; max-height: calc(100dvh - 112px); border-radius: var(--ecke-bild); }
.lichtbox button { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--auf-dunkel-flaeche); color: var(--auf-dunkel); cursor: pointer; display: grid; place-items: center; }
.lichtbox button:focus-visible { outline-color: var(--auf-dunkel); }
/* ---------- Bewerbung: kleine Ablage, Fehlerzustand ---------- */
.ablage--klein { padding: 16px 24px; }
.ablage--klein .ablage-symbol { width: 40px; height: 40px; }
.fehler-zusammenfassung { padding: 16px; border-radius: var(--ecke-feld); background: color-mix(in srgb, var(--fehler) 8%, var(--grund)); color: var(--fehler); font-size: var(--klein); line-height: var(--klein-zeile); }
/* Liste der fehlenden Angaben (Sprunglinks, UX-09) und der nicht übertragenen Dateien: ruhig eingerückt, Ziel ≥ 24 px */
.fehler-zusammenfassung strong { display: block; }
.fehler-zusammenfassung ul { margin: 8px 0 0; padding-left: 24px; }
.fehler-zusammenfassung li + li { margin-top: 4px; }
.fehler-zusammenfassung li a { display: inline-block; padding: 1px 0; color: inherit; text-underline-offset: 3px; }
.fehler-zusammenfassung p { margin-top: 8px; }
.feld[aria-invalid="true"] { border-color: var(--fehler); }
.feld-fehler { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--fehler); }
.pool { display: grid; gap: 24px; }
/* Danke-Box nach dem Senden: Abstand zum Titel wie zwischen den Feldern, beim Hinrollen etwas Luft darüber */
.gesendet { margin-top: 24px; scroll-margin-top: 24px; }
.gesendet > * + * { margin-top: 16px; }
/* Kein Element belegt leer Platz im Raster (gap 24px): hidden gewinnt gegen display:grid, Leeres entfällt */
.formular [hidden] { display: none; }
.formular .dateien:empty, .formular .feld-hilfe:empty:not(#cv-meldung) { display: none; }
/* Live-Region des Lebenslaufs: leer bleibt sie im Baum (display:none liesse Screenreader die Meldung verschweigen),
   nimmt aber keinen Platz im Raster (absolut = keine Rasterzeile, keine Lücke) */
.cv-block > #cv-meldung:empty { position: absolute; margin: 0; min-height: 0; width: 1px; height: 1px; overflow: hidden; }
/* Lebenslauf wird gelesen: schlichter Drehkreis vor dem Text (ohne Bewegung bei prefers-reduced-motion) */
.cv-block > #cv-meldung.ist-lesend { display: flex; align-items: center; gap: 8px; }
.cv-block > #cv-meldung.ist-lesend::before {
  content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--linie-stark); border-top-color: var(--akzent-tief);
  animation: cv-drehen 800ms linear infinite;
}
@keyframes cv-drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cv-block > #cv-meldung.ist-lesend::before { animation: none; } }
/* Lebenslauf: Ablage, Fehler, Meldung, Liste als ein Eintrag im Raster, dicht beieinander */
.cv-block { display: grid; gap: 8px; }
.cv-block > .feld-hilfe, .cv-block > .feld-fehler { margin-top: 0; }
/* Fehlertext direkt im Raster (Einwilligung): 8px unter dem Feld statt Rasterlücke 24px */
.formular > .feld-fehler, .pool > .feld-fehler, .mehr-innen > .feld-fehler { margin-top: -16px; }
/* Fehlerzustand der Ablage */
.ablage:has(input[aria-invalid="true"]) { border-color: var(--fehler); }
.ablage:has(input[aria-invalid="true"]) .ablage-symbol { background: color-mix(in srgb, var(--fehler) 10%, var(--grund)); color: var(--fehler); }