/* ChancenPlus+ ATS – Designentwurf, dritte Fassung (08.10.2026). Statisch, ohne JavaScript.
   Baut auf tokens.css, base.css und components.css der Karriereseite auf (Schriften, Farben der Marke, .btn, .icon).

   Regeln, die diese Datei durchsetzt:
   - Abstaende nur aus der Skala --s1 bis --s16 (4, 8, 12, 16, 24, 32, 48, 64 px).
   - Ueber dem Seitenhintergrund hoechstens eine Flaechenebene. Gegliedert wird mit Abstand, Ueberschrift, Linie.
   - Die Markenfarbe nur fuer den aktiven Navigationspunkt und den Primaerknopf.
   - Feste Signalfarben: Gold fuer "Antwort faellig", Rot fuer Fehler. Gruen nur fuer "Zusage". */

:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;

  /* Neutrale Flaechen der Anwendung, markenunabhaengig */
  --a-grund: #FFFFFF;
  --a-leiste: #F5F5F3;
  --a-linie: #E4E2DE;
  --a-rand: #84817C;      /* Raender von Bedienelementen, mind. 3:1 auf Weiss und auf den Tabellentoenen */
  --a-leise: #5E5A56;     /* Nebentext, mind. 4,5:1 auf Weiss und auf --a-leiste */
  --a-avatar: #E6E3DE;
  --a-hover: #E9E8E3;      /* Hinterlegung beim Darueberfahren, neutral */
  --a-auswahl: var(--c-brand-tint-2);   /* Hinterlegung des gewaehlten Punkts: sehr heller Ton der Marke */
  --a-auswahl-icon: var(--c-brand-deep);

  /* Tabellen: eine Flaeche mit Kopfton, Zebrastreifen und Gruppenzeilen */
  --t-rand: #D6D3CD;
  --t-kopf: #EFEDE8;
  --t-gruppe: #DEDAD2;
  --t-zebra: #F5F4F0;
  --t-hover: #E7E5DF;

  /* Signalfarben, fest */
  --gold: #F2B600;
  --gold-rand: #7A5A00;
  --rot: #B42318;
  --gruen: #1F7A45;
  --grau-punkt: #A6A29C;

  --t-xs: 0.75rem;     /* 12, nur untere Leiste am Handy */
  --t-s: 0.8125rem;    /* 13, Nebentext, Tabellenkoepfe */
  --t-m: 0.9375rem;    /* 15, Fliesstext der Anwendung */
  --t-l: 1.25rem;      /* 20, Abschnittsueberschriften */
  --t-xl: 1.75rem;     /* 28, Seitentitel */

  --seitenleiste: 248px;
  --inhalt: 960px;
  --tabbar: 64px;
}

/* ---------- Grundgeruest der Anwendung ---------- */

/* Stelleneditor und gemeinsame Anzeige im Editor und auf der öffentlichen Seite. */
.stelleneditor { display: grid; gap: var(--s8); align-items: start; }
.stelleneditor__kopf { margin: var(--s4) 0 var(--s8); }
.stelleneditor__kopf p, .stelleneditor small { color: var(--a-leise); }
.stelleneditor__formular section { display: grid; gap: var(--s4); padding-top: var(--s6); margin-bottom: var(--s6); border-top: 1px solid var(--a-linie); }
.stelleneditor__formular section:first-of-type { padding-top: 0; border-top: 0; }
.stelleneditor__formular section h2 { margin: 0; font-size: var(--t-m); font-weight: 800; }
.stelleneditor__formular section h2 label { margin: 0; font: inherit; }
.haupt .stelleneditor__formular section p { margin: 0; }
.stelleneditor__formular p { margin: 0 0 var(--s4); }
.stelleneditor__formular label { display: block; font-weight: 700; margin-bottom: var(--s2); }
.stelleneditor__formular input:not([type="radio"]):not([type="file"]),
.stelleneditor__formular select, .stelleneditor__formular textarea { width: 100%; }
.stelleneditor__formular textarea { min-height: 112px; }
.stelleneditor__formular small { display: block; margin-top: var(--s1); }
.stelleneditor__formular .errorlist { color: var(--rot); }
.stelleneditor__paar { display: grid; gap: var(--s4); }
.stelleneditor__bild { display: block; width: 144px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--s2); margin-bottom: var(--s4); }
.stelleneditor__formular section fieldset { margin: 0; padding: 0; border: 0; }
.stelleneditor__formular section fieldset legend { padding: 0; margin-bottom: var(--s2); }
.haupt .stelleneditor__formular fieldset.stelleneditor__assistent { margin: var(--s6) 0; padding: var(--s6) 0 0; border: 0; border-top: 1px solid var(--a-linie); border-radius: 0; }
.stelleneditor__assistent legend { padding: 0; font-size: var(--t-m); font-weight: 800; }
.haupt .stelleneditor__assistent button.btn--neutral { background: #fff; color: var(--c-ink); border-color: var(--a-rand); }
.stelleneditor__bilder { display: flex; flex-wrap: wrap; gap: var(--s2); }
.stelleneditor__bilder label { position: relative; display: grid; place-items: center; width: 72px; min-height: 48px; margin: 0; border-radius: var(--s1); background: var(--a-leiste); font-weight: 400; font-size: var(--t-s); text-align: center; cursor: pointer; }
.stelleneditor__bilder label:first-child { width: 140px; padding: var(--s1); }
.stelleneditor__formular .stelleneditor__bilder input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.stelleneditor__bilder label:has(input:checked) { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.stelleneditor__bilder label:focus-within { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.stelleneditor__bilder img { display: block; width: 72px; height: 48px; object-fit: cover; border-radius: var(--s1); }
.stelleneditor__vorschau > h2 { margin-bottom: var(--s4); }
.stellenanzeige { min-width: 0; }
.stellenanzeige__titelbild { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--s3); margin-bottom: var(--s6); }
.stellenanzeige section { margin: 0; }
.stellenanzeige section h2 { margin-bottom: var(--s3); font-size: var(--text-sub); line-height: var(--leading-snug); }
.stellenanzeige li { margin-bottom: var(--s2); }
.stellenanzeige__bewerben { display: block; text-align: center; padding: var(--s3) var(--s4); border-radius: 999px; background: var(--c-brand); color: #fff; font-weight: 700; }
@media (min-width: 64em) {
  .stellenanzeige__bewerben-zeile { grid-column: 1; }
  .stellenanzeige__kontakt { grid-column: 2; grid-row: 1; }
}
@media (min-width: 48em) { .stelleneditor__paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .stelleneditor { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s8); }
  .stelleneditor__vorschau { position: sticky; top: var(--s4); }
  .stelleneditor__vorschau .stellenanzeige { border: 1px solid var(--a-linie); border-radius: var(--s3); padding: var(--s3); font-size: var(--t-s); }
  .stelleneditor__vorschau .job-detail__layout { grid-template-columns: minmax(0, 1fr); }
  .stelleneditor__vorschau .job-detail__meta { grid-template-columns: minmax(0, 1fr); }
  .stelleneditor__vorschau .job-detail__fact:last-child:nth-child(odd) { grid-column: 1; }
  .stelleneditor__vorschau .stellenanzeige__kontakt { grid-column: 1; grid-row: auto; }
  .stelleneditor__vorschau .stellenanzeige h1 { font-size: var(--t-l); }
  .stelleneditor__vorschau .stellenanzeige section h2 { font-size: var(--t-m); }
}
.app {
  background: var(--a-grund);
  color: var(--c-ink);
  font-size: var(--t-m);
  line-height: 1.5;
}
.app h1 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; }
.app h2 { font-size: var(--t-l); line-height: 1.3; letter-spacing: 0; }
.app h3 { font-size: var(--t-m); line-height: 1.4; font-weight: 800; }
.app .icon { width: 20px; height: 20px; }
.app .icon--s { width: 16px; height: 16px; }

.shell { min-height: 100vh; }
.seitenleiste { display: none; }
.shell { padding-bottom: var(--tabbar); }
.haupt {
  min-width: 0;
  padding: var(--s6) var(--s4) var(--s8);
}
.inhalt { max-width: var(--inhalt); }

@media (min-width: 64em) {
  .app h1 { font-size: var(--t-xl); }
  .shell { display: grid; grid-template-columns: var(--seitenleiste) minmax(0, 1fr); padding-bottom: 0; }
  .haupt { padding: var(--s12) var(--s12) var(--s16); }
  .handykopf, .tabbar { display: none !important; }
}

/* ---------- Seitenleiste (Desktop) ---------- */
@media (min-width: 64em) {
  .seitenleiste {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: var(--s6) var(--s4) var(--s4);
    background: var(--a-leiste);
    border-right: 1px solid var(--a-linie);
  }
}
.betrieb { position: relative; margin-bottom: var(--s6); padding: 0 var(--s3); }
.betrieb__knopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2) var(--s2);
  padding: var(--s2);
  border-radius: var(--s2);
  list-style: none;
  cursor: pointer;
}
.betrieb__knopf::-webkit-details-marker { display: none; }
.betrieb__knopf:hover { background: var(--a-hover); }
.betrieb__logo { grid-column: 1 / -1; width: auto; height: 40px; }
.betrieb__name { display: grid; font-weight: 800; line-height: 1.3; }
.betrieb__name small { font-size: var(--t-s); font-weight: 400; color: var(--a-leise); }
.betrieb__knopf .icon { color: var(--a-leise); }
.betrieb__liste {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--s1));
  left: 0;
  right: 0;
  display: grid;
  margin: 0;
  padding: var(--s1);
  list-style: none;
  background: #fff;
  border: 1px solid var(--a-rand);
  border-radius: var(--s2);
}
.betrieb__liste a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s3); border-radius: var(--s1); text-decoration: none; }
.betrieb__liste a:hover { background: var(--a-hover); }

.nav { display: grid; gap: var(--s1); }
.nav__punkt {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: 0 var(--s3);
  border-radius: var(--s2);
  color: var(--c-ink);
  font-weight: 600;
  text-decoration: none;
}
.nav__punkt:hover { background: var(--a-hover); }
.nav__punkt:hover, .nav__punkt.zeige-hover { background: var(--a-hover); }
.nav__punkt[aria-current="page"] { background: var(--a-auswahl); font-weight: 800; }
.nav__punkt[aria-current="page"] .icon { color: var(--a-auswahl-icon); }
.nav__zahl { margin-left: auto; font-size: var(--t-s); font-weight: 700; color: var(--a-leise); }

.seitenleiste__fuss { margin-top: auto; display: grid; gap: var(--s4); }
.seitenleiste__fuss .nav { padding-bottom: var(--s4); border-bottom: 1px solid var(--a-linie); }
.person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s3);
}
.person__name { display: grid; line-height: 1.3; font-weight: 700; }
.person__name small { font-size: var(--t-s); font-weight: 400; color: var(--a-leise); }
.person__ab { color: var(--c-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.siegel-zeile { padding: var(--s4) var(--s3) 0; border-top: 1px solid var(--a-linie); }
.siegel {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 32px;
  font-size: var(--t-s);
  color: var(--a-leise);
  text-decoration: none;
}
.siegel img { width: 24px; height: 24px; }

/* ---------- Kopfzeile und untere Leiste (Handy) ---------- */
.handykopf {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 56px;
  padding: 0 var(--s2) 0 var(--s4);
  background: #fff;
  border-bottom: 1px solid var(--a-linie);
}
.handykopf__logo img { width: auto; height: 32px; }
.menue { position: relative; }
.menue__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--s2);
  list-style: none;
  cursor: pointer;
}
.menue__knopf::-webkit-details-marker { display: none; }
.menue__liste {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s1));
  z-index: 40;
  display: grid;
  width: 280px;
  margin: 0;
  padding: var(--s2);
  list-style: none;
  background: #fff;
  border: 1px solid var(--a-rand);
  border-radius: var(--s3);
}
.menue__liste > li + li { border-top: 1px solid var(--a-linie); }
.menue__liste a { display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: 0 var(--s2); text-decoration: none; font-weight: 600; }
.menue__betrieb { display: grid; padding: var(--s2) var(--s2) var(--s3); line-height: 1.3; }
.menue__betrieb strong { font-weight: 800; }
.menue__betrieb small, .menue__person small { font-size: var(--t-s); color: var(--a-leise); }
.menue__person { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s2); }
.menue__person span { display: grid; line-height: 1.3; font-weight: 700; }

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff;
  border-top: 1px solid var(--a-linie);
}
.tabbar a {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--s1);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--a-leise);
  text-decoration: none;
}
.tabbar a[aria-current="page"] { color: var(--c-ink); font-weight: 800; }
.tabbar__symbol { display: grid; place-items: center; width: 56px; height: 32px; border-radius: 16px; }
.tabbar a[aria-current="page"] .tabbar__symbol { background: var(--a-auswahl); color: var(--a-auswahl-icon); }
.tabbar .icon { width: 20px; height: 20px; }
.tabbar a[aria-current="page"] .icon { color: var(--a-auswahl-icon); }
.tabbar__zahl {
  position: absolute;
  top: var(--s1);
  left: calc(50% + var(--s3));
  min-width: 18px;
  height: 18px;
  padding: 0 var(--s1);
  border-radius: 9px;
  background: var(--c-brand-strong);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

/* ---------- Seitenkopf ---------- */
.seitenkopf { display: grid; gap: var(--s3); margin-bottom: var(--s8); }
.seitenkopf--linie { padding-bottom: var(--s6); border-bottom: 1px solid var(--a-linie); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) 0; }
.seitenkopf__zeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s6); }
.seitenkopf__titel { display: grid; gap: var(--s1); min-width: 0; }
.seitenkopf__sub { color: var(--a-leise); }
.seitenkopf__sub .punkt-trenner, .meta .punkt-trenner { margin: 0 var(--s1); }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  justify-self: start;
  min-height: 44px;
  color: var(--a-leise);
  font-weight: 600;
  text-decoration: none;
}
.zurueck:hover { color: var(--c-ink); text-decoration: underline; }
.zurueck .icon { width: 18px; height: 18px; }

/* ---------- Knoepfe ---------- */

.app .btn, .einstieg .btn {
  min-height: 44px;
  padding: 0 var(--s4);
  font-size: var(--t-m);
  white-space: nowrap;
}
.app .btn .icon, .einstieg .btn .icon { width: 18px; height: 18px; }
.btn--neutral { background: #fff; color: var(--c-ink); border: 1px solid var(--a-rand) !important; }
.btn--neutral:hover { background: var(--a-hover); }
.btn--text {
  min-height: 44px;
  padding: 0 !important;
  background: none;
  color: var(--c-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.btn--gefahr { background: #fff; color: var(--rot); border: 1px solid var(--rot) !important; }
.btn--breit { width: 100%; }
.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

/* ---------- Status: Punkt plus Wort ---------- */
.status { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.status::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-ink);
}
.status--ring::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--a-leise); }
.status--halb::before { background: linear-gradient(90deg, var(--c-ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.status--gruen::before { background: var(--gruen); }
.status--grau::before { background: var(--grau-punkt); }
.status--gold::before { background: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold-rand); }
.status--gold { font-weight: 800; }
.status--rot::before { background: var(--rot); }
.leise { color: var(--a-leise); }
.klein { font-size: var(--t-s); }
.fett { font-weight: 800; }

/* ---------- Werkzeugzeile: Suche, Filter, Sortierung ---------- */
.werkzeuge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s6); }
.werkzeuge__suche { grid-column: 1 / -1; }
.werkzeuge__rechts { display: none; }
@media (min-width: 64em) {
  .werkzeuge { display: flex; flex-wrap: wrap; }
  .werkzeuge__suche { flex: 0 1 320px; }
  .werkzeuge__rechts { display: block; margin-left: auto; }
}
.sortzeile { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px; margin: calc(-1 * var(--s3)) 0 var(--s1); font-size: var(--t-s); color: var(--a-leise); }
.sortwahl { appearance: none; min-height: 44px; padding: 0 var(--s6) 0 0; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%23241A19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 16px 16px; color: var(--c-ink); font-size: var(--t-s); font-weight: 800; }
.suche { position: relative; }
.suche .icon { position: absolute; left: var(--s4); top: 50%; transform: translateY(-50%); color: var(--a-leise); pointer-events: none; }
.suche .eingabe { padding-left: var(--s12); }

/* ---------- Eingabefelder ---------- */
.eingabe {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--a-rand);
  border-radius: var(--s2);
  background: #fff;
  color: var(--c-ink);
  font-size: 1rem;
  line-height: 1.5;
}
.eingabe::placeholder { color: var(--a-leise); opacity: 1; }
textarea.eingabe { min-height: 96px; resize: vertical; }
select.eingabe {
  appearance: none;
  padding-right: var(--s12);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='%235E5A56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px 18px;
}
.eingabe--fehler { border-color: var(--rot); box-shadow: inset 0 0 0 1px var(--rot); }
.feld { display: grid; gap: var(--s2); align-content: start; }
.feld__label { font-weight: 700; }
.feld__label small { font-weight: 400; color: var(--a-leise); }
.feld__hilfe { font-size: var(--t-s); color: var(--a-leise); }
.feld__fehler { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--t-s); font-weight: 700; color: var(--rot); }
.feld__fehler .icon { width: 16px; height: 16px; margin-top: 2px; }
.felder { display: grid; gap: var(--s6); }
.felder--2 { display: grid; gap: var(--s6) var(--s4); }
@media (min-width: 48em) { .felder--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feld--breit { grid-column: 1 / -1; }
.wahl { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
.wahl label, .haken {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  cursor: pointer;
}
.wahl input, .haken input { width: 20px; height: 20px; margin: 0; accent-color: var(--c-ink); }
.generator__formular { max-width: 560px; }
.haupt .generator__formular fieldset.feld { border: 0; margin: 0; padding: 0; }
.haupt .generator__formular .feld p { margin: 0; }
.zaehler { font-size: var(--t-s); color: var(--a-leise); justify-self: end; }

/* ---------- Abschnitte ---------- */
.abschnitt { margin-top: var(--s12); }
.abschnitt:first-child { margin-top: 0; }
.abschnitt__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s4); }
.abschnitt__kopf > a { display: inline-flex; align-items: center; gap: var(--s1); }
.abschnitt__kopf > a .icon { width: 16px; height: 16px; }
.abschnitt__kopf h2 .anzahl { margin-left: var(--s2); font-weight: 600; color: var(--a-leise); font-family: var(--font-body); font-size: var(--t-m); }
.abschnitt__text { color: var(--a-leise); margin-top: calc(-1 * var(--s2)); margin-bottom: var(--s4); max-width: 640px; }
.trenner { height: 0; margin: var(--s8) 0; border: 0; border-top: 1px solid var(--a-linie); }

/* ---------- Tabelle (Desktop) und Zeilenliste (Handy) ---------- */
.nur-desktop { display: none !important; }
@media (min-width: 64em) {
  .nur-desktop { display: block !important; }
  table.nur-desktop { display: table !important; }
  .vorschau.nur-desktop { display: grid !important; }
  .nur-handy { display: none !important; }
}
.tabelle-flaeche { border: 1px solid var(--t-rand); border-radius: var(--s3); overflow: hidden; background: #fff; }
.tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tabelle th {
  height: 40px;
  padding: 0 var(--s3);
  background: var(--t-kopf);
  border-bottom: 1px solid var(--t-rand);
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--a-leise);
  text-align: left;
  white-space: nowrap;
}
.tabelle th .icon { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-left: var(--s1); color: var(--c-ink); }
.tabelle th[aria-sort] { color: var(--c-ink); }
.tabelle td {
  height: 56px;
  padding: 0 var(--s3);
  color: var(--a-leise);
  vertical-align: middle;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Rangfolge: die Hauptspalte ist dunkel und halbfett, alle anderen gedaempft */
.tabelle th:first-child, .tabelle td:first-child { padding-left: var(--s4); }
.tabelle th:last-child, .tabelle td:last-child { padding-right: var(--s4); }
.tabelle td.haupt, .tabelle td.haupt a { color: var(--c-ink); font-weight: 600; }
.tabelle td.haupt a.ungelesen { font-weight: 800; }
.tabelle tbody tr:nth-child(even) td { background: var(--t-zebra); }
.tabelle--gruppen tbody tr:nth-child(even) td { background: transparent; }
.tabelle--gruppen tbody tr:nth-child(odd):not(:first-child) td { background: var(--t-zebra); }
.tabelle tbody tr:hover td, .tabelle tbody tr.ist-hover td { background: var(--t-hover); }
.tabelle .gruppenzeile th { height: 36px; background: var(--t-gruppe); border-bottom: 0; color: var(--c-ink); font-weight: 700; }
.tabelle .gruppenzeile .anzahl { margin-left: var(--s2); font-weight: 600; color: var(--a-leise); }
.tabelle .status { vertical-align: middle; }
.tabelle .name { font-weight: 600; text-decoration: none; }
.tabelle .name:hover { text-decoration: underline; }
.tabelle .ungelesen { font-weight: 800; }
.tabelle td.rechts, .tabelle th.rechts { text-align: right; }
.tabelle--hoch td { height: 80px; }
.tabelle__fuss { display: flex; justify-content: space-between; gap: var(--s4); margin-top: var(--s4); font-size: var(--t-s); color: var(--a-leise); }

.zeilen { margin: 0; padding: 0; list-style: none; border: 1px solid var(--t-rand); border-radius: var(--s3); overflow: hidden; }
.zeilen > li:nth-child(even) { background: var(--t-zebra); }
.liste { border: 1px solid var(--t-rand); border-radius: var(--s3); overflow: hidden; }
.liste .zeilen { border: 0; border-radius: 0; }
.liste__gruppe { display: flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s4); background: var(--t-gruppe); font-size: var(--t-s); font-weight: 700; }
.liste__gruppe span { font-weight: 600; color: var(--a-leise); }
.zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s1) var(--s3);
  padding: var(--s3) var(--s4);
  text-decoration: none;
}
.zeile__titel { font-weight: 600; }
.zeile__titel.ungelesen { font-weight: 800; }
.zeile__neben { grid-column: 1 / -1; color: var(--a-leise); font-size: var(--t-s); }
.zeile__rechts { justify-self: end; font-size: var(--t-s); }
.zeile--bild { grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--s4); align-items: center; }
.zeile--bild .vorschaubild { grid-row: 1 / span 3; }
.zeile--bild .zeile__neben { grid-column: 2; }
.tabelle a.mit-avatar { text-decoration: underline; text-underline-offset: 0.2em; font-weight: 600; }
.tabelle .mit-avatar .icon { width: 16px; height: 16px; }
.tabelle td .klein { display: inline-block; margin-top: var(--s1); }

/* ---------- Kleine Bausteine ---------- */
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--a-avatar);
  color: var(--c-ink);
  font-size: var(--t-s);
  font-weight: 800;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--s { width: 24px; height: 24px; font-size: 10px; }
.avatar--l { width: 40px; height: 40px; }
.mit-avatar { display: inline-flex; align-items: center; gap: var(--s2); }
.vorschaubild {
  display: block;
  width: 64px;
  height: 48px;
  border-radius: var(--s1);
  object-fit: cover;
  background: var(--a-avatar);
}
.datei { display: flex; align-items: center; gap: var(--s3); }
.datei__name { display: grid; line-height: 1.35; min-width: 0; }
.datei__name strong { font-weight: 700; overflow-wrap: anywhere; }
.datei .icon { color: var(--c-ink); }
.hinweis { display: flex; align-items: flex-start; gap: var(--s2); color: var(--a-leise); font-size: var(--t-s); }
.hinweis .icon { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.hinweis--ink { color: var(--c-ink); font-size: var(--t-m); }
.hinweis--ink .icon { width: 18px; height: 18px; margin-top: 3px; }

/* Angaben als Definitionsliste */
.angaben { display: grid; margin: 0; border-top: 1px solid var(--a-linie); }
.angaben > div { display: grid; gap: var(--s1); padding: var(--s3) 0; border-bottom: 1px solid var(--a-linie); }
.angaben dt { color: var(--a-leise); font-size: var(--t-s); }
.angaben dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 48em) {
  .angaben > div { grid-template-columns: 176px minmax(0, 1fr); gap: var(--s4); align-items: baseline; }
  .angaben dt { font-size: var(--t-m); }
}

/* Verlauf als flache Zeitleiste */
.zeitleiste { margin: 0; padding: 0; list-style: none; }
.zeitleiste > li { position: relative; padding: 0 0 var(--s6) var(--s6); }
.zeitleiste > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-ink);
}
.zeitleiste > li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 20px;
  bottom: 4px;
  width: 1px;
  background: var(--a-linie);
}
.zeitleiste > li:last-child { padding-bottom: 0; }
.zeitleiste > li:last-child::after { display: none; }
.zeitleiste .geplant::before { background: #fff; box-shadow: inset 0 0 0 1.5px var(--a-leise); }
.zeitleiste .notiz::before { background: #fff; box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.zeitleiste__titel { font-weight: 700; }
.zeitleiste__meta { font-size: var(--t-s); color: var(--a-leise); }
.zeitleiste__text { margin-top: var(--s1); }

/* Zwei Spalten: Inhalt und Randspalte */
.spalten { display: grid; gap: var(--s12); }
@media (min-width: 64em) {
  .spalten { grid-template-columns: minmax(0, 1fr) 288px; gap: var(--s12); align-items: start; }
  .spalten--rand-l { grid-template-columns: minmax(0, 1fr) 320px; }
}
.randspalte { display: grid; gap: var(--s8); align-content: start; }

/* Fliesstext einer Bewerbernachricht */
.text p + p { margin-top: var(--s3); }
.text { max-width: 640px; }

/* ---------- Mail-Vorschau (eine Flaeche) ---------- */
.mail { max-width: 680px; border: 1px solid var(--a-rand); border-radius: var(--s3); background: #fff; }
.mail__kopf { margin: 0; padding: var(--s2) var(--s6); border-bottom: 1px solid var(--a-linie); }
.mail__kopf > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s3); padding: var(--s2) 0; }
.mail__kopf > div + div { border-top: 1px solid var(--a-linie); }
.mail__kopf dt { color: var(--a-leise); }
.mail__kopf dd { margin: 0; overflow-wrap: anywhere; }
.mail__text { padding: var(--s6); }
.mail__text p + p { margin-top: var(--s4); }
.mail__eigen mark { background: var(--a-auswahl); color: var(--c-ink); padding: 0 var(--s1); border-radius: var(--s1); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mail__platzhalter { color: var(--a-leise); font-style: italic; }

/* ---------- Einstellungen ---------- */
.einstellungen { display: grid; gap: var(--s8); }
@media (min-width: 64em) { .einstellungen { grid-template-columns: 224px minmax(0, 1fr); gap: var(--s12); align-items: start; } }
.unternav { display: grid; gap: var(--s1); align-content: start; }
.unternav a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s3);
  border-radius: var(--s2);
  font-weight: 600;
  text-decoration: none;
}
.unternav a:hover { background: var(--a-hover); }
.unternav a[aria-current="page"] { background: var(--a-auswahl); font-weight: 800; }
.einstellungen__inhalt { display: grid; gap: 0; min-width: 0; align-content: start; }
.einstellungen__inhalt > .zurueck { margin-bottom: calc(-1 * var(--s3)); }
.haupt .einstellungen__inhalt form > h3 { margin: var(--s8) 0 var(--s3); font-size: var(--t-l); line-height: 1.3; font-weight: 800; }
.einstellungen__titel { font-size: 1.5rem; }
@media (min-width: 64em) { .einstellungen__titel { font-size: var(--t-l); } }
.logo-vorschau { width: auto; height: 48px; }
.farbfeld { display: flex; align-items: center; gap: var(--s3); max-width: 240px; }
.farbprobe { flex: none; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.25); }
.schluessel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.schluessel code { padding: var(--s2) var(--s3); border: 1px solid var(--a-rand); border-radius: var(--s2); font: 600 0.9375rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.galerie img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--s1); }
.galerie small { display: block; margin-top: var(--s1); font-size: var(--t-s); color: var(--a-leise); }
.galerie__plus { display: grid; place-items: center; align-content: center; gap: var(--s1); width: 100%; aspect-ratio: 3 / 2; border: 1px dashed var(--a-rand); border-radius: var(--s1); font-size: var(--t-s); font-weight: 700; text-decoration: none; }
.person-zelle { display: grid; line-height: 1.4; }
.person-zelle strong { font-weight: 700; }
.person-zelle small { font-size: var(--t-s); color: var(--a-leise); }
.mit-unterzeile td { height: 72px; }
.tabelle td a { font-weight: 600; color: var(--c-ink); }
.tabelle tr.ohne-linie td, .tabelle tr.bestaetigen td { background: var(--t-hover); }
.tabelle td.rechts > .status { margin-left: auto; }
.wahl--spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); }
.bestaetigen td { height: auto; padding-top: var(--s3); padding-bottom: var(--s4); white-space: normal; }
.bestaetigen__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.einstellungsliste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--a-linie); }
.einstellungsliste li { border-bottom: 1px solid var(--a-linie); }
.einstellungsliste a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s1) var(--s3); padding: var(--s4) 0; text-decoration: none; }
.einstellungsliste strong { font-weight: 700; }
.einstellungsliste small { grid-column: 1; font-size: var(--t-s); color: var(--a-leise); }
.einstellungsliste .icon { grid-row: 1 / span 2; grid-column: 2; color: var(--a-leise); }
.feldzeile { display: grid; gap: var(--s3); padding: var(--s6) 0; border-bottom: 1px solid var(--a-linie); }
.feldzeile:first-of-type { border-top: 1px solid var(--a-linie); }
.feldzeile__label { display: grid; gap: var(--s1); align-content: start; }
.feldzeile__label strong { font-weight: 700; }
.feldzeile__label span { font-size: var(--t-s); color: var(--a-leise); }
@media (min-width: 64em) { .feldzeile { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s6); } }
.feldzeile__wert { display: grid; gap: var(--s3); align-content: start; max-width: 440px; }
.formfuss { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }

/* ---------- Editor einer Stellenanzeige ---------- */
.editor { display: grid; gap: var(--s12); }
@media (min-width: 64em) { .editor { grid-template-columns: minmax(0, 1fr) 392px; gap: var(--s12); align-items: start; } }
.editor__form { display: grid; gap: var(--s8); min-width: 0; }
.editor__gruppe { display: grid; gap: var(--s4); padding-top: var(--s8); border-top: 1px solid var(--a-linie); }
.editor__gruppe:first-child { padding-top: 0; border-top: 0; }
.editor__gruppe > h2 { font-size: var(--t-m); font-weight: 800; font-family: var(--font-heading); }
.gruppenkopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px; }
.gruppenkopf h2 { font-size: var(--t-m); }
.vorschau { display: grid; gap: var(--s3); }
@media (min-width: 64em) { .vorschau { position: sticky; top: var(--s6); } }
.vorschau__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.vorschau__kopf strong { font-weight: 800; }
.vorschau__rahmen {
  display: block;
  width: 392px;
  max-width: 100%;
  height: 2200px;
  border: 1px solid var(--a-rand);
  border-radius: var(--s4);
  background: #fff;
}
.entwurfhinweis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s6); padding: var(--s4) 0; margin-bottom: var(--s8); border-top: 1px solid var(--a-linie); border-bottom: 1px solid var(--a-linie); }
.gruppenkopf .btn--text { font-weight: 600; }
.reiter { display: flex; gap: var(--s1); margin-bottom: var(--s6); }
.reiter a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); border-radius: var(--s2); font-weight: 600; color: var(--a-leise); text-decoration: none; }
.reiter a:hover { background: var(--a-hover); }
.reiter a[aria-current="page"] { background: var(--a-auswahl); color: var(--c-ink); font-weight: 800; }

/* Textfeld mit schmaler Formatierungsleiste: ein Bedienelement */
.rte { border: 1px solid var(--a-rand); border-radius: var(--s2); background: #fff; }
.rte__leiste { display: flex; align-items: center; gap: var(--s1); padding: var(--s1); border-bottom: 1px solid var(--a-linie); }
.rte__leiste button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--s1);
  background: none;
  color: var(--c-ink);
  cursor: pointer;
}
.rte__leiste button:hover { background: var(--a-hover); }
.rte__leiste .icon { width: 18px; height: 18px; }
.rte__leiste .rte__trenner { width: 1px; height: 20px; margin: 0 var(--s1); background: var(--a-linie); }
.rte__text { padding: var(--s3) var(--s4); min-height: 96px; }
.rte__text p + p, .rte__text p + ul, .rte__text ul + p { margin-top: var(--s2); }
.rte__text ul { margin: 0; padding-left: var(--s6); display: grid; gap: var(--s1); }
.rte__text strong { font-weight: 800; }
.rte__text a { text-decoration: underline; }

/* Titelbild aus der Bildbibliothek */
.bildwahl { display: grid; gap: var(--s4); }
.bildwahl__aktuell { display: flex; gap: var(--s4); align-items: center; }
.bildwahl__aktuell img { width: 160px; height: 100px; object-fit: cover; border-radius: var(--s2); }
.bildwahl__aktuell div { display: grid; gap: var(--s1); justify-items: start; }
.bibliothek { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.bibliothek img { display: block; width: 72px; height: 48px; object-fit: cover; border-radius: var(--s1); }
.bibliothek [aria-checked="true"] img { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.bibliothek__plus {
  display: grid;
  place-items: center;
  width: 72px;
  height: 48px;
  border: 1px dashed var(--a-rand);
  border-radius: var(--s1);
  color: var(--c-ink);
}

/* Auswahl der Ansprechperson */
.personwahl { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--a-linie); }
.personwahl li { border-bottom: 1px solid var(--a-linie); }
.personwahl label { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--s3); padding: var(--s3) 0; cursor: pointer; }
.personwahl input { width: 20px; height: 20px; margin: 0; accent-color: var(--c-ink); }
.personwahl span { display: grid; line-height: 1.4; min-width: 0; }
.personwahl strong { font-weight: 700; }
.personwahl small { font-size: var(--t-s); color: var(--a-leise); overflow-wrap: anywhere; }

/* ---------- Assistent ---------- */
.grenze { display: flex; align-items: flex-start; gap: var(--s2); color: var(--a-leise); font-size: var(--t-s); }
.grenze .icon { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.schnell { display: grid; column-gap: var(--s6); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--a-linie); }
.schnell li { border-bottom: 1px solid var(--a-linie); }
.schnell a { display: flex; align-items: center; gap: var(--s3); min-height: 48px; font-weight: 700; text-decoration: none; }
.schnell a:hover { text-decoration: underline; }
.assistent-inhalt { gap: var(--s8); }
.assistent-inhalt form { display: grid; gap: var(--s3); }
.assistent-inhalt select, .assistent-inhalt textarea { width: 100%; }
.assistent-verlauf { list-style: none; margin: 0; padding: 0; }
.assistent-verlauf li { padding: var(--s4) 0; border-bottom: 1px solid var(--a-linie); }
.assistent-verlauf small { display: block; color: var(--a-leise); }
.assistent-verlauf textarea { width: 100%; }
.uebersicht-assistent { margin-bottom: var(--s8); }
.uebersicht-assistent .eingabezeile__feld { display: flex; gap: var(--s2); }
.uebersicht-assistent input { flex: 1; min-width: 0; }
@media (min-width: 48em) { .schnell { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gespraech { display: grid; gap: var(--s8); margin: 0; padding: 0; list-style: none; }
.beitrag { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s2) var(--s3); }
.beitrag__wer { display: flex; align-items: baseline; gap: var(--s2); }
.beitrag__wer strong { font-weight: 800; }
.beitrag__wer span { font-size: var(--t-s); color: var(--a-leise); }
.beitrag__symbol { display: grid; place-items: center; width: 24px; height: 24px; }
.beitrag__symbol .icon { width: 20px; height: 20px; }
.beitrag__inhalt { grid-column: 2; display: grid; gap: var(--s3); }
.beitrag__inhalt ul { margin: 0; padding-left: var(--s6); list-style: disc; }
.beitrag__inhalt ul.ergebnis .btn { grid-column: 2; justify-self: start; }
@media (min-width: 48em) {
  .ergebnis { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ergebnis .btn { grid-column: auto; }
}
.erledigt { padding-left: 0; list-style: none; }
.ergebnis { text-decoration: none; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--a-linie); border-bottom: 1px solid var(--a-linie); }
.ergebnis > span:not(.btn) { display: grid; line-height: 1.4; }
.ergebnis strong { font-weight: 700; }
.ergebnis small { font-size: var(--t-s); color: var(--a-leise); }
.ergebnis .btn { grid-column: 2; justify-self: start; }
@media (min-width: 48em) {
  .ergebnis { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ergebnis .btn { grid-column: auto; }
}
.erledigt { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; font-size: var(--t-s); color: var(--a-leise); }
.erledigt li { display: flex; align-items: center; gap: var(--s2); }
.erledigt .icon { width: 16px; height: 16px; color: var(--c-ink); }
.eingabezeile { display: grid; gap: var(--s3); }
.eingabezeile__feld { position: relative; }
.eingabezeile__feld { display: grid; gap: var(--s3); justify-items: end; }
.eingabezeile__feld textarea { min-height: 88px; }
.vorschlaege { display: grid; gap: 0 var(--s4); }
.vorschlaege__label { color: var(--a-leise); font-size: var(--t-s); }
.vorschlaege ul { display: flex; flex-wrap: wrap; gap: 0 var(--s6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 64em) {
  /* Haengender Einzug: alle Links fluchten an der Kante des ersten Links */
  .vorschlaege { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
  .vorschlaege__label { line-height: 44px; }
}
.vorschlaege a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.auftraege { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.auftraege a { display: grid; gap: var(--s1); padding: var(--s2) var(--s3); border-radius: var(--s2); text-decoration: none; line-height: 1.4; }
.auftraege a:hover { background: var(--a-hover); }
.auftraege a[aria-current="page"] { background: var(--a-auswahl); }
.auftraege strong { font-weight: 700; }
.auftraege small { font-size: var(--t-s); color: var(--a-leise); }

.schritte-klein { margin: 0; padding: 0; list-style: none; counter-reset: k; border-top: 1px solid var(--a-linie); }
.schritte-klein li { counter-increment: k; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--a-linie); }
.schritte-klein li::before { content: counter(k); font-family: var(--font-heading); font-weight: 800; }
fieldset.feld { min-width: 0; }
fieldset.feld legend { padding: 0; }

/* ---------- Heute zu tun ---------- */
.todo { display: grid; gap: var(--s12); }
.aufgaben { margin: 0; padding: 0; list-style: none; border: 1px solid var(--t-rand); border-radius: var(--s3); overflow: hidden; }
.aufgaben li:nth-child(even) { background: var(--t-zebra); }
.aufgaben li:hover { background: var(--t-hover); }
.aufgabe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s1) var(--s4);
  min-height: 56px;
  padding: var(--s3) var(--s4);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.aufgabe__wer { font-weight: 600; }
.aufgabe__wer a { text-decoration: none; }
.aufgabe__was { grid-column: 1 / -1; grid-row: 2; color: var(--a-leise); font-size: var(--t-s); }
.aufgabe__wann { grid-column: 2; grid-row: 1; justify-self: end; }
.aufgabe--bild { grid-template-columns: 64px minmax(0, 1fr); }
.aufgabe--bild .vorschaubild { grid-row: 1 / span 2; }
.aufgabe--bild .aufgabe__wer, .aufgabe--bild .aufgabe__was { grid-column: 2; }
.aufgabe--bild .aufgabe__wann { grid-column: 2; grid-row: 3; justify-self: start; }
.aufgabe--kurz { min-height: 0; padding: 0; }
@media (min-width: 64em) {
  .aufgabe { grid-template-columns: 224px minmax(0, 1fr) 176px; padding: 0 var(--s4); }
  .aufgabe__was, .aufgabe--bild .aufgabe__was { grid-column: auto; grid-row: auto; font-size: var(--t-m); }
  .aufgabe__wann, .aufgabe--bild .aufgabe__wann { grid-column: auto; grid-row: auto; justify-self: end; }
  .aufgabe--bild { grid-template-columns: 64px 144px minmax(0, 1fr) auto; min-height: 80px; }
  .aufgabe--kurz { grid-template-columns: 64px minmax(0, 1fr); padding: 0; min-height: 0; align-content: center; }
  .aufgabe--kurz .aufgabe__wer, .aufgabe--kurz .aufgabe__was { grid-column: 2; }
  .aufgabe--kurz .vorschaubild { grid-row: 1 / span 2; }
  .aufgabe--bild .vorschaubild { grid-row: auto; }
  .aufgabe--bild .aufgabe__wer { grid-column: auto; }
}

/* ---------- Bestaetigung (Stelle schliessen) ---------- */
.folgen { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--a-linie); max-width: 640px; }
.folgen li { padding: var(--s3) 0; border-bottom: 1px solid var(--a-linie); }

/* Stellenliste, Rückfrage und manuelle Erfassung */
.stellen-tabelle th:nth-child(1) { width: 96px; font-size: 0.75rem; }
.stellen-tabelle th:nth-child(2) { width: 21%; }
.stellen-tabelle th:nth-child(3) { width: 16.5%; }
.stellen-tabelle th:nth-child(4) { width: 11.7%; }
.stellen-tabelle th:nth-child(5) { width: 15%; }
.stellen-tabelle th:nth-child(6) { width: 13.3%; }
.stellen-tabelle th:nth-child(7) { width: 102px; }
.stellen-tabelle td:last-child { white-space: nowrap; }
.stellen-tabelle td { white-space: normal; }
.stellen-tabelle td.haupt > .klein, .stellen-tabelle td.rechts > .klein { display: block; margin-top: var(--s1); }
.stellen-tabelle__aktionen a { display: block; font-size: var(--t-s); }
.stellen-tabelle__aktionen a + a { margin-top: var(--s1); }
.vorschaubild--leer { background: var(--a-avatar); border: 1px solid var(--a-linie); }
.stellen-zeilen .zeile { row-gap: var(--s1); }
.stellen-zeilen .zeile__titel { color: var(--c-ink); }
.stellen-zeilen .zeile__neben a { color: var(--c-ink); }
.stellen-zeilen__aktionen { display: flex; gap: var(--s4); }
.schliessfrage { max-width: 640px; }
.schliessfrage__stelle { display: flex; align-items: center; gap: var(--s4); margin: var(--s8) 0; }
.schliessfrage__stelle p { margin-top: var(--s1); }
.schliessfrage__aktionen { margin-top: var(--s8); }
.erfassung-layout { display: grid; gap: var(--s12); align-items: start; }
.erfassung-form { max-width: 640px; }
.erfassung-form__quelle { border: 0; margin: 0; padding: 0; }
.erfassung-form__quelle legend { margin-bottom: var(--s2); }
.erfassung-form__quelle .wahl { display: flex; flex-wrap: wrap; gap: var(--s4); }
.erfassung-hinweis { max-width: 320px; }
.erfassung-hinweis h2 { margin-bottom: var(--s4); }
@media (min-width: 64em) { .erfassung-layout { grid-template-columns: minmax(0, 640px) minmax(240px, 320px); justify-content: space-between; } }
@media (max-width: 63.999em) { .stellen-kopf .seitenkopf__zeile { display: grid; justify-content: start; } }

/* ---------- Bewerberseiten (Karriereseite) ---------- */
/* Ohne Skript bleibt das Menue der Karriereseite am Handy zu; am Schreibtisch steht es offen wie im Klickdummy. */
@media (max-width: 63.999em) {
  .site-header__menu[open] .site-header__menu-list { display: none; }
}
.bf-seite { padding-block: var(--s8) var(--s16); }
.bf-layout { display: grid; gap: var(--s12); align-items: start; }
@media (min-width: 64em) {
  .bf-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
  .bf-layout > aside { position: sticky; top: calc(var(--header-h) + var(--space-md)); }
}
.bf-main { display: grid; gap: var(--space-lg); max-width: calc(var(--container-text) + 2 * var(--gutter)); }
.bf-zurueck { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--touch); color: var(--c-brand-ink); font-weight: 700; text-decoration: none; justify-self: start; }
.bf-titel { font-size: var(--text-h2); }
.bf-stelle { display: flex; align-items: center; gap: var(--space-md); }
.bf-stelle img { width: 96px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.bf-stelle span { display: grid; line-height: var(--leading-snug); }
.bf-stelle strong { font-family: var(--font-heading); font-size: var(--text-sub); }
.bf-form { display: grid; gap: var(--space-lg); }
.bf-reihe { display: grid; gap: var(--space-lg); }
@media (min-width: 64em) { .bf-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); } }
.bf-feld { display: grid; gap: var(--space-xs); align-content: start; }
.bf-feld label, .bf-feld legend { font-weight: 700; }
.bf-feld label small { font-weight: 400; color: var(--c-ink-muted); }
.bf-eingabe {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: 1rem;
}
textarea.bf-eingabe { min-height: 8rem; resize: vertical; }
.bf-eingabe--fehler { border-color: var(--rot); box-shadow: inset 0 0 0 1px var(--rot); }
.bf-hilfe { font-size: var(--text-sm); color: var(--c-ink-muted); }
.bf-fehler { display: flex; gap: var(--space-xs); align-items: flex-start; font-size: var(--text-sm); font-weight: 700; color: var(--rot); }
.bf-fehler .icon { width: 1rem; height: 1rem; margin-top: 0.15rem; }
.bf-datei { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); min-height: 3rem; }
.bf-platzhalter { color: var(--c-ink-muted); font-style: italic; }
.bf-senden { display: grid; gap: var(--space-sm); justify-items: start; }
.bf-fehlerliste { display: grid; gap: var(--s2); }
.bf-fehlerliste p { display: flex; align-items: center; gap: var(--s2); font-weight: 700; color: var(--rot); }
.bf-fehlerliste p .icon { width: 20px; height: 20px; }
.karriere-inhalt .bf-fehlerliste ul { margin: 0; padding-left: 0; list-style: none; }
.bf-fehlerliste a { color: var(--c-ink); }
.bf-schrittpunkt { justify-self: center; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c-ink-muted); }
.bf-schrittpunkt--fertig { background: var(--c-brand); box-shadow: none; }
.bf-schritte [aria-current="step"] { color: var(--c-brand-ink); }
.bf-schritte { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-line-subtle); }
.bf-schritte li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; min-height: 3.5rem; border-bottom: 1px solid var(--c-line-subtle); }
.bf-schritte .icon { width: 1.25rem; height: 1.25rem; }
.bf-schritte .offen { color: var(--c-ink-muted); }
.bf-schritte span.offen[aria-hidden] { justify-self: center; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c-ink-muted); }
.contact-card { display: flex; flex-wrap: wrap; align-items: start; gap: var(--space-lg); padding: var(--space-lg); border-radius: var(--radius-md); background: var(--c-brand-tint-1); color: var(--c-ink); }
.contact-card__label { flex-basis: 100%; margin: 0; color: var(--c-ink-muted); font-size: var(--text-sm); font-weight: 400; }
.contact-card__photo { flex-shrink: 0; width: 5rem; height: 5rem; object-fit: cover; border-radius: var(--radius-md); }
.contact-card__body { display: grid; flex: 1 1 12rem; gap: 0; min-width: 0; }
.contact-card__name { font-size: var(--text-sub); font-weight: 700; }
.contact-card__role { color: var(--c-ink-muted); }
.contact-card__links { display: grid; gap: 0; margin: var(--space-xs) 0 0; padding: 0; list-style: none; }
.bf-schritte strong { font-weight: 700; }
.bf-schritte small { color: var(--c-ink-muted); font-size: var(--text-sm); }
.job-detail__main p:not(.lead):not(.job-detail__fact-value) { max-width: var(--container-text); }
.job-detail__main strong { font-weight: 700; }

/* Vorschau im Editor: Bildhoehe wie auf einem Handy mit 844 px Bildschirmhoehe, unabhaengig von der Rahmenhoehe */
.ist-vorschau .job-detail__hero { block-size: 287px; }

/* ---------- Einstieg (ChancenPlus+-Theme, vor der Betriebswahl) ---------- */
.einstieg { min-height: 100vh; display: flex; flex-direction: column; background: #fff; color: var(--c-ink); font-size: var(--t-m); line-height: 1.5; }
.einstieg main { flex: 1; }
.einstieg__kopf { border-bottom: 1px solid var(--a-linie); }
.einstieg__kopf .innen, .einstieg__fuss .innen, .einstieg__inhalt { max-width: 1040px; margin: 0 auto; padding-inline: var(--s4); }
@media (min-width: 64em) { .einstieg__kopf .innen, .einstieg__fuss .innen, .einstieg__inhalt { padding-inline: var(--s12); } }
.einstieg__kopf .innen { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; }
.marke { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-heading); font-weight: 800; font-size: 1.0625rem; text-decoration: none; color: var(--c-ink); }
.marke img { width: 36px; height: 36px; }
.einstieg__fuss { border-top: 1px solid var(--a-linie); }
.einstieg__fuss .innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s6); min-height: 64px; padding-block: var(--s3); font-size: var(--t-s); color: var(--a-leise); }
.einstieg__fuss ul { display: flex; flex-wrap: wrap; gap: 0 var(--s6); margin: 0; padding: 0; list-style: none; }
.einstieg__fuss a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-ink); text-decoration: none; }
.einstieg__fuss a:hover { text-decoration: underline; }
.einstieg h1 { font-size: 2rem; line-height: 1.15; letter-spacing: -0.015em; }
@media (min-width: 64em) { .einstieg h1 { font-size: 2.5rem; } }
.einstieg h2 { font-size: var(--t-l); line-height: 1.3; }
.einstieg__inhalt { padding-block: var(--s12) var(--s16); }
.schmal { max-width: 400px; margin: 0 auto; }
.schritte-liste { margin: 0; padding: 0; list-style: none; counter-reset: s; border-top: 1px solid var(--a-linie); }
.schritte-liste li { counter-increment: s; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--a-linie); }
.schritte-liste li::before { content: counter(s); font-family: var(--font-heading); font-weight: 800; font-size: var(--t-l); line-height: 1.2; }
.schritte-liste strong { font-weight: 700; }
.oder { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s3); color: var(--a-leise); font-size: var(--t-s); }
.oder::before, .oder::after { content: ""; height: 1px; background: var(--a-linie); }
.betriebsliste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--a-linie); }
.betriebsliste li { border-bottom: 1px solid var(--a-linie); }
.betriebsliste button {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
  width: 100%;
  min-height: 72px;
  padding: var(--s3) 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.betriebsliste button:hover strong { text-decoration: underline; }
.betriebsliste__logo { display: grid; place-items: center start; height: 40px; }
.betriebsliste__logo img { width: auto; max-width: 96px; max-height: 32px; }
.betriebsliste span { display: grid; line-height: 1.4; }
.betriebsliste strong { font-weight: 700; }
.betriebsliste small { color: var(--a-leise); font-size: var(--t-s); }
.betriebsliste button > span:nth-child(2) { min-width: 0; }
.betriebsliste strong, .betriebsliste small { overflow-wrap: anywhere; }

.nach-rechts { margin-left: auto; }
@media (max-width: 63.999em) {
  .aktionen--stapel { display: grid; width: 100%; }
  .aktionen--stapel .btn--primary { order: -1; }
}

/* Startseite, Anmeldung, Betriebswahl */
.start { display: grid; gap: var(--s12); }
@media (min-width: 64em) { .start { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s16); align-items: start; } }
.start__text { display: grid; gap: var(--s6); align-content: start; }
.start__lead { font-size: var(--t-l); line-height: 1.4; color: var(--a-leise); max-width: 480px; }
.start__liste h2, .start__wege h2 { margin-bottom: var(--s4); }
.punkte { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--a-linie); }
.punkte li { padding: var(--s3) 0; border-bottom: 1px solid var(--a-linie); }
.punkte strong { font-weight: 800; }
.start__wege { margin-top: var(--s16); }
@media (min-width: 64em) {
  .schritte-liste--quer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s8); }
}
.anmeldung { display: grid; gap: var(--s6); }
.anmeldung__kopf { display: grid; gap: var(--s2); text-align: center; }
.feld__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.anmeldung__code { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; font-weight: 700; }
.anmeldung__neu { padding-top: var(--s6); border-top: 1px solid var(--a-linie); text-align: center; }
.anmeldung__neu a { font-weight: 700; }
.avatar--eckig { border-radius: var(--s2); }
.kopf-person a { color: var(--c-ink); font-weight: 600; }
.ab-tablet { display: none; }
@media (min-width: 48em) { .ab-tablet { display: inline; } }
.betriebsliste .icon { color: var(--a-leise); }
.kopf-person { display: inline-flex; align-items: center; gap: var(--s1); }
.kopf-person form { display: inline; margin: 0; }
.betriebswahl { max-width: 560px; }
.betriebswahl__einleitung { margin: var(--s3) 0 var(--s8); }
.betriebswahl__hinweis { margin-top: var(--s4); }
@media (max-width: 35em) {
  .betriebsliste button { grid-template-columns: 48px minmax(0, 1fr) 24px; gap: var(--s3); }
  .betriebsliste__logo img { max-width: 48px; }
}

/* Handy: Entscheidungen im Kopf der Bewerbung, Herunterladen nur als Symbol */
@media (max-width: 63.999em) {
  .aktionen--mobil-voll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .aktionen--mobil-voll .btn--primary { grid-column: 1 / -1; order: -1; }
  .ohne-text-mobil .btn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ohne-text-mobil.btn { width: 44px; padding: 0; }
}

/* Stelle als kurze Zeile (Rueckfrage beim Schliessen): Bild links ueber zwei Textzeilen */
.aufgabe.aufgabe--kurz { grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--s4); row-gap: var(--s1); min-height: 0; padding: 0; align-content: center; }
.aufgabe.aufgabe--kurz .vorschaubild { grid-column: 1; grid-row: 1 / span 2; }
.aufgabe.aufgabe--kurz .aufgabe__wer { grid-column: 2; grid-row: 1; align-self: end; }
.aufgabe.aufgabe--kurz .aufgabe__was { grid-column: 2; grid-row: 2; align-self: start; }
.tabelle td.umbruch { white-space: normal; line-height: 1.35; }

/* Tabellen: jede Zelle einer Zeile auf dieselbe senkrechte Mitte. Bausteine mit Symbol oder Avatar werden
   zu Blockelementen in der Zelle, damit die Zelle sie mittig setzt statt an der Grundlinie des Texts. */
.tabelle td > .status,
.tabelle td > .mit-avatar { display: flex; width: fit-content; }
.tabelle td > .status + .klein { display: block; margin-top: var(--s1); }

/* Abschnitte einer Stellenanzeige: einfache Liste, ein Punkt je Zeile (die Karriereseite zeigt reinen Text) */
.punktliste { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; counter-reset: p; }
.punktliste li { counter-increment: p; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--s2); }
.punktliste li::before { content: counter(p) "."; color: var(--a-leise); font-size: var(--t-s); font-variant-numeric: tabular-nums; text-align: right; }
.punktliste .zaehler { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.editor__gruppe > .btn--text { justify-self: start; }
.vorschau .btn--breit { justify-content: center; }
.punktliste textarea.eingabe { min-height: 44px; resize: none; field-sizing: content; }
.punktliste li:not(:has(.zaehler)) { grid-template-columns: 24px minmax(0, 1fr); }

/* ATS-Geruest: ChancenPlus-Vorgabe, bis ein Betrieb eigene Theme-Tokens hinterlegt. */
:root[data-theme="tenant"] {
  --c-brand: #2d6a4f;
  --c-brand-strong: #194b35;
  --c-brand-ink: #194b35;
  --c-brand-deep: #163d2c;
  --c-brand-tint-1: #f4faf6;
  --c-brand-tint-2: #e3f1e9;
  --c-brand-tint-3: #cee5d6;
  --c-on-brand: #fff;
  --c-on-brand-strong: #fff;
  --font-heading: "Nunito Variable", system-ui, sans-serif;
  --font-body: "Nunito Sans Variable", system-ui, sans-serif;
}
body { font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-heading); }
.sprunglink { position: absolute; top: -5rem; left: var(--s4); z-index: 100; padding: var(--s2) var(--s4); background: #fff; color: var(--c-brand-ink); }
.sprunglink:focus { top: var(--s2); }
:is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.betrieb__name { display: block; overflow-wrap: anywhere; }
.betrieb__wechsel { display: inline-block; margin: var(--s2) 0 var(--s4); font-size: var(--t-s); }
.person { display: block; }
.person > * { display: block; }
.person form { margin: var(--s2) 0 0; }
.textknopf { padding: 0; border: 0; background: transparent; color: var(--c-ink); font: inherit; text-decoration: underline; cursor: pointer; }
.textknopf:hover { background: transparent; }
.siegel { border-top: 1px solid var(--a-linie); padding: var(--s4) var(--s3) 0; }
.handykopf strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menue summary { display: grid; place-items: center; min-width: 44px; min-height: 44px; cursor: pointer; list-style: none; }
.menue summary::-webkit-details-marker { display: none; }
.menue nav { position: absolute; top: 100%; right: 0; z-index: 40; display: grid; width: min(280px, calc(100vw - 32px)); padding: var(--s2); background: #fff; border: 1px solid var(--a-rand); border-radius: var(--s2); box-shadow: 0 12px 24px #0002; }
.menue nav a, .menue nav button { display: block; min-height: 44px; padding: var(--s2); }
.menue nav form { margin: 0; }
.tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tabbar a { min-width: 0; padding: var(--s1) 0; text-align: center; white-space: nowrap; font-size: clamp(10px, 3vw, 12px); }
.tabbar__label { display: block; }
.haupt { overflow-wrap: anywhere; }
.haupt .inhalt { max-width: var(--inhalt); }
.haupt h1 { margin: 0 0 var(--s6); }
.haupt h2 { margin: var(--s8) 0 var(--s4); }
.haupt .seitenkopf { gap: var(--s2); }
.haupt .seitenkopf h1, .haupt .seitenkopf p { margin: 0; }
.haupt .todo .abschnitt__kopf h2 { margin: 0; }
.haupt .seitenkopf--kompakt { gap: var(--s2); margin-bottom: var(--s6); }
.haupt .seitenkopf--kompakt h1, .haupt .seitenkopf--kompakt p { margin: 0; }
.haupt .bewerbungskopf > div:first-child { display: grid; gap: var(--s2); }
.haupt ul:not(.errorlist), .einstieg__inhalt ul:not(.punkte, .betriebsliste), .karriere-inhalt ul { padding-left: var(--s6); }
.haupt li, .einstieg__inhalt li, .karriere-inhalt li { margin-bottom: var(--s2); }
.haupt ul.aufgaben { padding-left: 0; }
.haupt ul.schnell, .haupt ul.folgen { padding-left: 0; }
.haupt .aufgaben li { margin-bottom: 0; }
.haupt p, .einstieg__inhalt p, .karriere-inhalt p { margin-bottom: var(--s4); }
:is(.haupt, .einstieg__inhalt, .karriere-inhalt) form { margin: var(--s4) 0 var(--s6); }
:is(.haupt, .einstieg__inhalt, .karriere-inhalt) form p { margin-bottom: var(--s4); }
:is(.haupt, .einstieg__inhalt, .karriere-inhalt) form p > label { display: block; font-weight: 700; margin-bottom: var(--s1); }
:is(.haupt, .einstieg__inhalt, .karriere-inhalt) input:not([type="checkbox"], [type="radio"], [type="hidden"]),
:is(.haupt, .einstieg__inhalt, .karriere-inhalt) select,
:is(.haupt, .einstieg__inhalt, .karriere-inhalt) textarea { display: block; width: 100%; max-width: 100%; min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--a-rand); border-radius: var(--s2); background: #fff; color: var(--c-ink); font: inherit; }
:is(.haupt, .einstieg__inhalt, .karriere-inhalt) select { appearance: none; padding-right: var(--s12); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='%235E5A56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px 18px; }
:is(.haupt, .einstieg__inhalt, .karriere-inhalt) textarea { min-height: 112px; }
:is(.haupt, .einstieg__inhalt, .karriere-inhalt) button:not(.textknopf), .bewerben { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--s2) var(--s4); border: 1px solid var(--c-brand-strong); border-radius: var(--radius-button); background: var(--c-brand-strong); color: var(--c-on-brand-strong); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
:is(.haupt, .einstieg__inhalt, .karriere-inhalt) fieldset { margin-bottom: var(--s4); padding: var(--s4); border: 1px solid var(--a-rand); border-radius: var(--s2); }
.einstieg__inhalt .punkte li, .einstieg__inhalt .schritte-liste li, .einstieg__inhalt .betriebsliste li { margin-bottom: 0; }
.einstieg__inhalt .start__text > * { margin-top: 0; margin-bottom: 0; }
.einstieg__inhalt .betriebswahl__einleitung { margin: var(--s3) 0 var(--s8); }
.einstieg__inhalt .betriebswahl__hinweis { margin-top: var(--s4); }
.einstieg__inhalt .betriebsliste form { margin: 0; }
.einstieg__inhalt .betriebsliste button { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; justify-content: initial; width: 100%; min-height: 72px; padding: var(--s3) 0; border: 0; border-radius: 0; background: none; color: var(--c-ink); text-align: left; font-weight: 400; }
@media (max-width: 35em) { .einstieg__inhalt .betriebsliste button { grid-template-columns: 48px minmax(0, 1fr) 24px; } }
.karriere-inhalt .bf-schritte, .karriere-inhalt .contact-card__links, .haupt .contact-card__links { padding-left: 0; list-style: none; }
.karriere-inhalt .bf-datei { padding: var(--s3); border: 1px dashed var(--c-line); border-radius: var(--radius-sm); background: var(--c-surface-muted); }
.karriere-inhalt .bf-datei input[type="file"] { min-height: 0; padding: 0; border: 0; background: transparent; }
.karriere-inhalt .bf-datei input[type="file"]::file-selector-button { margin-right: var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--c-brand); border-radius: var(--radius-button); background: var(--c-surface); color: var(--c-brand-ink); font: inherit; font-weight: 700; cursor: pointer; }
.haupt .bf-datei { padding: var(--s3); border: 1px dashed var(--a-rand); border-radius: var(--s2); background: var(--a-leiste); }
.haupt .bf-datei input[type="file"] { min-height: 0; padding: 0; border: 0; background: transparent; }
.haupt .bf-datei input[type="file"]::file-selector-button { margin-right: var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--a-rand); border-radius: var(--radius-button); background: #fff; color: var(--c-ink); font: inherit; font-weight: 700; cursor: pointer; }
.karriere-inhalt .bf-feld--fehler input:not([type="checkbox"]), .karriere-inhalt .bf-feld--fehler textarea { border-color: var(--rot); box-shadow: inset 0 0 0 1px var(--rot); }
.karriere-inhalt .bf-feld textarea[name="nachricht"] { height: 8rem; min-height: 8rem; resize: vertical; }
.errorlist { color: var(--rot); font-weight: 700; }
.meldungen { padding: var(--s3) var(--s4); margin-bottom: var(--s6); background: var(--c-brand-tint-1); }
.mailvorschau { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
/* Vorhandene Listen behalten ihren Inhalt; Tabellen verwenden das Raster des Entwurfs. */
.haupt table { width: 100%; border: 1px solid var(--t-rand); border-collapse: separate; border-spacing: 0; border-radius: var(--s2); }
.haupt th, .haupt td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--t-rand); }
.haupt thead th { background: var(--t-kopf); font-size: var(--t-s); }
.haupt table:not(.tabelle) tbody tr:nth-child(even) td { background: var(--t-zebra); }
.haupt tbody tr:last-child td { border-bottom: 0; }
.haupt tbody td:first-child { font-weight: 700; color: var(--c-ink); }
.haupt tbody td:not(:first-child) { color: var(--a-leise); }
.haupt tbody td:last-child { font-variant-numeric: tabular-nums; }
.karriere { background: var(--c-surface); }
.karriere-kopf { border-bottom: 1px solid var(--c-line-subtle); background: var(--c-surface); }
.karriere-kopf__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin: 0 auto; padding-block: var(--s4); }
.karriere-kopf__inner, .karriere-fuss__inner, .karriere-inhalt { max-width: var(--container); padding-inline: var(--gutter); }
.karriere-marke { color: var(--c-brand-ink); font-family: var(--font-heading); font-size: var(--t-l); font-weight: 800; text-decoration: none; }
.karriere-marke img { display: block; width: auto; max-width: min(40vw, 240px); max-height: 48px; }
.karriere-inhalt { min-height: 65vh; margin: 0 auto; padding-block: var(--s12) var(--s16); }
.karriere-inhalt .contact-card p, .haupt .contact-card p { margin: 0; }
.karriere-inhalt .contact-card__links li, .haupt .contact-card__links li { margin: 0; }
.karriere-inhalt .job-detail__meta { margin-block: var(--space-xs); }
.karriere-inhalt h1 { color: var(--c-ink); }
.karriere-fuss { padding-block: var(--space-lg); background: var(--c-brand-deep); color: var(--c-on-brand-deep); font-size: var(--text-sm); }
.karriere-fuss__inner { display: grid; grid-template-areas: "siegel" "recht"; gap: var(--space-sm); align-items: center; margin: 0 auto; }
.karriere-fuss__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-md); margin: 0; padding: 0; list-style: none; color: var(--c-on-brand-deep-muted); }
.karriere-fuss__recht { grid-area: recht; padding-top: var(--space-sm); border-top: 1px solid color-mix(in srgb, var(--c-on-brand-deep) 25%, transparent); }
.karriere-fuss a { display: inline-flex; align-items: center; min-height: 2rem; color: var(--c-on-brand-deep); }
.karriere-fuss__siegel { grid-area: siegel; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 var(--space-sm); align-items: center; }
.karriere-fuss__siegel img { display: block; width: 2.5rem; height: 2.5rem; }
.karriere-fuss__siegeltitel { margin: 0; font-weight: 700; }
@media (min-width: 48em) {
  .karriere-fuss__inner { grid-template-areas: "recht siegel"; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); }
  .karriere-fuss__recht { padding-top: 0; border-top: 0; }
}
@media (min-width: 64em) { .karriere-inhalt .stellenanzeige__titelbild { aspect-ratio: 5 / 2; } }
@media (max-width: 47.999em) {
  .karriere-inhalt { padding-block: var(--s8); }
  .karriere-fuss__inner { align-items: start; }
  .haupt table { display: block; overflow-x: auto; }
}
/* Vorhandene Betriebslisten erscheinen als durchgehende Zeilen statt Aufzaehlung. */
.app .inhalt > ul { margin: var(--s4) 0 var(--s8); padding: 0; list-style: none; border-top: 1px solid var(--a-linie); }
.app .inhalt > ul > li { min-height: 56px; margin: 0; padding: var(--s3) var(--s1); border-bottom: 1px solid var(--a-linie); }
.app .inhalt > ul > li:hover { background: var(--a-hover); }

/* Stellenanzeige: Eckdaten und Kontakt nach Entwurf vom 09.10.2026. */
.stellenanzeige, .karriere-inhalt {
  --marke-hauch: color-mix(in srgb, var(--c-brand-strong) 6%, var(--c-surface));
  --marke-linie: color-mix(in srgb, var(--c-brand-strong) 16%, var(--c-surface));
}
.karriere-inhalt .job-detail__meta, .job-detail__meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 0;
  margin-block: var(--space-sm) var(--space-md);
  padding-block: var(--space-xs);
  border-radius: var(--radius-lg);
  background: var(--marke-hauch);
  color: var(--c-ink);
}
.job-detail__fact {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.125rem;
  min-height: 0;
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: 0;
  background: none;
}
.job-detail__fact:last-child:nth-child(odd) { grid-column: auto; }
.job-detail__fact:nth-child(even) { border-left: 1px solid var(--marke-linie); }
.job-detail__fact:nth-child(n+3) { border-top: 1px solid var(--marke-linie); }
.job-detail__fact-icon {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: var(--space-xs);
  padding: 0;
  color: var(--c-brand-strong);
  background: none;
  border-radius: 0;
}
.job-detail__fact-icon .icon { width: 1.75rem; height: 1.75rem; stroke-width: 1.75; }
.job-detail__fact-icon[data-symbol="map-pin"] .icon path,
.job-detail__fact-icon[data-symbol="briefcase"] .icon rect,
.job-detail__fact-icon[data-symbol="calendar-days"] .icon rect,
.job-detail__fact-icon[data-symbol="clock"] .icon circle,
.contact-card__link .icon path, .contact-card__link .icon rect {
  fill: currentColor;
  fill-opacity: 0.14;
}
.job-detail__fact-text { display: grid; gap: 0.125rem; }
.job-detail__fact-label, .job-detail__fact-value { margin: 0; line-height: 1.35; }
.job-detail__fact-label { color: var(--c-ink-muted); font-size: var(--text-sm); }
.job-detail__fact-value { font-weight: 700; }
.stellenanzeige__einleitung p { color: var(--c-ink); font-size: var(--text-sub); line-height: 1.45; }
.stellenanzeige section li::marker { color: var(--c-brand-strong); }
@media (min-width: 48em) {
  .job-detail__fact {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-sm);
  }
  .job-detail__fact-icon { margin-bottom: 0; }
}

.contact-card {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding: 0;
  color: var(--c-ink);
  background: none;
  border-radius: 0;
}
.contact-card .contact-card__label, .haupt .contact-card__label {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--c-ink);
  font-family: var(--font-heading);
  font-size: var(--text-sub);
  font-weight: 700;
  line-height: var(--leading-snug);
}
.contact-card__photo {
  width: 4.5rem;
  height: 4.5rem;
  margin: 4px;
  object-fit: cover;
  border-radius: 50%;
  outline: 2px solid var(--c-brand-strong);
  outline-offset: 2px;
}
.contact-card__body { grid-column: 2; display: grid; gap: 0; min-width: 0; }
.contact-card--ohne-foto .contact-card__body { grid-column: 1 / -1; }
.contact-card__name { font-size: 1.0625em; }
.contact-card__links, .karriere-inhalt .contact-card__links, .haupt ul.contact-card__links {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line-subtle);
  list-style: none;
}
.contact-card__links li { border-bottom: 1px solid var(--c-line-subtle); }
.contact-card__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 3rem;
  color: var(--c-ink);
  text-decoration: none;
}
.contact-card__link:hover { color: var(--c-brand-ink); text-decoration: underline; }
.contact-card__link .icon { width: 1.5rem; height: 1.5rem; color: var(--c-brand-strong); stroke-width: 1.75; }
.stellenanzeige__bewerben-zeile { margin: var(--space-sm) 0 0; }
.stellenanzeige__bewerben {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 3.25rem;
  font-size: 1.0625rem;
  text-decoration: none;
}
@media (max-width: 63.999em) {
  .stellenanzeige .job-detail__layout { row-gap: var(--space-md); }
}
@media (min-width: 64em) {
  .stellenanzeige .job-detail__layout { grid-template-rows: auto auto 1fr; }
  .stellenanzeige .job-detail__main { grid-row: 1 / span 3; }
  .stellenanzeige__kontakt { grid-column: 2; grid-row: 1; }
  .stellenanzeige__bewerben-zeile { grid-column: 2; grid-row: 2; margin-top: var(--space-md); }
  .stelleneditor__vorschau .job-detail__meta { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .stelleneditor__vorschau .job-detail__fact { grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: var(--space-sm); border-left: 0; }
  .stelleneditor__vorschau .job-detail__fact + .job-detail__fact { border-top: 1px solid var(--marke-linie); }
  .stelleneditor__vorschau .job-detail__fact-icon,
  .stelleneditor__vorschau .job-detail__fact-icon .icon { width: 1.5rem; height: 1.5rem; margin: 0; }
  .stelleneditor__vorschau .contact-card__label { font-size: var(--t-m); }
  .stelleneditor__vorschau .job-detail__fact-label { font-size: 0.92em; }
  .stelleneditor__vorschau .stellenanzeige__einleitung p { font-size: inherit; }
  .stelleneditor__vorschau .stellenanzeige .job-detail__main { grid-row: auto; }
  .stelleneditor__vorschau .stellenanzeige__bewerben-zeile { grid-column: 1; grid-row: auto; }
}

/* Bewerbungsübersicht und Dokumentansicht */
.haupt .bewerbungen-tabelle { border: 0; border-radius: 0; table-layout: fixed; }
.haupt .bewerbungen-tabelle th, .haupt .bewerbungen-tabelle td { border-bottom: 0; padding: var(--s3); }
.haupt .bewerbungen-tabelle th:first-child, .haupt .bewerbungen-tabelle td:first-child { padding-left: var(--s4); }
.haupt .bewerbungen-tabelle th:last-child, .haupt .bewerbungen-tabelle td:last-child { padding-right: var(--s4); }
.haupt .bewerbungen-tabelle .gruppenzeile th { background: var(--t-gruppe); }
.haupt .bewerbungen-tabelle tbody tr.gruppenzeile { background: var(--t-gruppe); }
.bewerbungen-tabelle th:nth-child(1) { width: 17%; }
.bewerbungen-tabelle th:nth-child(2) { width: 24%; }
.bewerbungen-tabelle th:nth-child(3) { width: 17%; }
.bewerbungen-tabelle th:nth-child(4) { width: 12%; }
.bewerbungen-tabelle th:nth-child(5) { width: 14%; }
.bewerbungen-tabelle th:nth-child(6) { width: 16%; }
.haupt .liste .zeilen { padding-left: 0; }
.haupt .liste .zeilen li { margin: 0; }
.haupt .liste .liste__gruppe { margin: 0; }
.haupt form.werkzeuge, .haupt .bewerbung-layout--vorschau form.zusatz-form { margin-top: 0; }
.ruecklink { display: inline-block; margin-bottom: var(--s6); color: var(--a-leise); }
.bewerbungskopf { grid-template-columns: minmax(0, 1fr); }
.bewerbungskopf h1 { margin-bottom: var(--s1); }
.bewerbungskopf p { margin-bottom: var(--s2); }
.bewerbungskopf .aktionen form, .vorschau-aktionen form { margin: 0; }
.bewerbungskopf .aktionen button.btn--neutral,
.bewerbung-verlauf button.btn--neutral,
.zusatz-form button.btn--neutral { background: #fff; color: var(--c-ink); border: 1px solid var(--a-rand); }
.bewerbung-layout { display: grid; gap: var(--s8); }
.bewerbung-layout h2 { margin-top: 0; }
.bewerbung-dokument .abschnitt { margin-top: var(--s12); }
.bewerbung-dokument .abschnitt:first-child { margin-top: 0; }
.angaben { margin: 0; }
.angaben > div { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--a-linie); }
.angaben > div:last-child { border-bottom: 1px solid var(--a-linie); }
.angaben dt { color: var(--a-leise); }
.angaben dd { margin: 0; }
.bewerbung-verlauf form { margin: 0 0 var(--s8); }
.bewerbung-verlauf form label { display: block; margin-bottom: var(--s2); font-weight: 700; }
.bewerbung-verlauf form p { margin: var(--s2) 0; }
.haupt .bewerbung-verlauf textarea { min-height: 0; height: calc(3lh + var(--s4) + 2px); }
.haupt .zeitlinie { list-style: none; padding: 0 0 0 var(--s6); margin: 0; border-left: 1px solid var(--a-linie); }
.haupt .zeitlinie li { position: relative; display: grid; gap: var(--s1); margin-bottom: var(--s6); }
.zeitlinie li::before { content: ''; position: absolute; left: calc(-1 * var(--s6) - 5px); top: 7px; width: 9px; height: 9px; border: 1px solid var(--c-ink); border-radius: 50%; background: #fff; }
.mailkarte { border: 1px solid var(--a-rand); border-radius: var(--s3); overflow: hidden; }
.mailkarte__kopf { margin: 0; padding: var(--s3) var(--s6); }
.mailkarte__kopf > div { display: grid; grid-template-columns: 72px 1fr; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--a-linie); }
.mailkarte__kopf > div:last-child { border: 0; }
.mailkarte__kopf dt { color: var(--a-leise); }
.mailkarte__kopf dd { margin: 0; }
.mailkarte .mailvorschau { margin: 0; padding: var(--s6); border-top: 1px solid var(--a-linie); white-space: pre-wrap; }
.vorschau-folgen p { padding: var(--s3) 0; border-bottom: 1px solid var(--a-linie); }
.vorschau-aktionen { margin-top: var(--s6); }
@media (min-width: 64em) {
  .bewerbungskopf { display: flex; justify-content: space-between; align-items: end; }
  .bewerbung-layout { grid-template-columns: minmax(0, 2fr) minmax(245px, 1fr); gap: var(--s12); }
  .bewerbung-layout--vorschau { grid-template-columns: minmax(0, 2fr) minmax(245px, 1fr); }
}

/* Personenbilder in den Einstellungen */
.profilfoto { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
.profilfoto--klein { width: 40px; height: 40px; margin-top: var(--s2); }

@media (max-width: 47.999em) {
  .haupt table:is(.team-tabelle, .standort-tabelle) { display: block; overflow: visible; border: 0; }
  .haupt table:is(.team-tabelle, .standort-tabelle) thead { display: none; }
  .haupt table:is(.team-tabelle, .standort-tabelle) tbody,
  .haupt table:is(.team-tabelle, .standort-tabelle) tr,
  .haupt table:is(.team-tabelle, .standort-tabelle) td { display: block; width: 100%; }
  .haupt table:is(.team-tabelle, .standort-tabelle) tr { border-bottom: 1px solid var(--a-linie); padding: var(--s4) 0; }
  .haupt table:is(.team-tabelle, .standort-tabelle) td { border: 0; padding: var(--s1) 0; background: transparent; }
}

@media (min-width: 64em) and (max-width: 79.999em) {
  .einstellungen { grid-template-columns: minmax(0, 1fr); }
  .unternav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.haupt .team-tabelle { table-layout: fixed; }
.team-tabelle th:nth-child(1) { width: 35%; }
.team-tabelle th:nth-child(2) { width: 24%; }
.team-tabelle th:nth-child(3) { width: 25%; }
.team-tabelle th:nth-child(4) { width: 16%; }
.team-tabelle td { overflow-wrap: anywhere; vertical-align: middle; }
.team-tabelle th:last-child, .team-tabelle td:last-child { padding-left: var(--s2); padding-right: var(--s2); }
.team-tabelle td small { display: block; color: var(--a-leise); font-size: var(--t-s); font-weight: 400; }
.team-tabelle td > strong { font-weight: 600; }
.team-person { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.team-person__text { display: grid; min-width: 0; }
.team-person__text strong { font-weight: 700; }
.team-person__initialen { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--a-avatar); font-size: var(--t-s); font-weight: 700; }
.team-person .profilfoto--klein { flex: none; margin-top: 0; }
.einladung-form #id_standorte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.einladung-form :is(#id_rolle, #id_gleicher_rechtstraeger) { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); }
.einladung-form :is(#id_standorte, #id_rolle, #id_gleicher_rechtstraeger) label,
.standortwahl label { display: flex; align-items: center; gap: var(--s2); font-weight: 400; }
.einladung-form :is(#id_standorte, #id_rolle, #id_gleicher_rechtstraeger) input,
.standortwahl input { margin: 0; }
.einladung-form :is(input[type="radio"], input[type="checkbox"]), .rollen-form input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--c-ink); }
.einladung-form legend, .rollen-form legend { font-weight: 700; }
.einladung-form fieldset { border: 0 !important; padding: 0 !important; margin: var(--s6) 0 !important; }
.einladung-form fieldset legend { margin-bottom: var(--s2); }
.rollen-form { max-width: 500px; }
.rollen-form > label { display: block; font-weight: 700; }
.rollen-form .standortwahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.entfernen-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
@media (max-width: 47.999em) {
  .haupt table.team-tabelle tr:nth-child(even) { background: var(--t-zebra); }
  .haupt table.team-tabelle tr { padding: var(--s4); }
  .haupt table.team-tabelle td { overflow-wrap: anywhere; }
  .haupt table.team-tabelle td:nth-child(4) { padding-top: var(--s3); }
  .einladung-form #id_standorte, .rollen-form .standortwahl { grid-template-columns: 1fr; }
}

.haupt .team-tabelle button.btn--neutral { background: #fff; color: var(--c-ink); border: 1px solid var(--a-rand); }

/* Das Grundlayout enthaelt spaete Regeln fuer alte Listen und Formulare. */
.haupt table.stellen-tabelle { border: 0; border-radius: 0; border-collapse: collapse; }
.haupt .stellen-tabelle th, .haupt .stellen-tabelle td { border-bottom: 0; padding: var(--s3); }
.haupt .stellen-tabelle th:first-child, .haupt .stellen-tabelle td:first-child { padding-left: var(--s4); }
.haupt .stellen-tabelle th:last-child, .haupt .stellen-tabelle td:last-child { padding-right: var(--s4); }
.haupt .stellen-tabelle td.haupt { color: var(--c-ink); font-weight: 600; }
.haupt .stellen-tabelle th.rechts, .haupt .stellen-tabelle td.rechts { text-align: right; }
.app .inhalt > ul.stellen-zeilen { margin: 0; padding: 0; border: 1px solid var(--t-rand); }
.app .inhalt > ul.stellen-zeilen > li { min-height: 0; margin: 0; padding: 0; border: 0; }
.haupt form.erfassung-form { margin: 0; }
.haupt fieldset.erfassung-form__quelle { margin: 0; padding: 0; border: 0; }
.haupt .schliessfrage__stelle p { margin: var(--s1) 0 0; }

/* Letzter Abgleich der Formular- und Einstellungsseiten. */
@media (min-width: 64em) {
  .haupt form.werkzeuge { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(0, 175px)) auto; gap: var(--s2); align-items: end; }
  .haupt form.werkzeuge .werkzeuge__suche { grid-column: auto; }
  .haupt form.werkzeuge button { white-space: nowrap; }
}
.haupt form.werkzeuge .btn--neutral { background: #fff; color: var(--c-ink); border-color: var(--a-rand); }
.haupt .einstellungen__inhalt > h2:first-child { margin-top: 0; }
.haupt .einstellungen__inhalt > .einstellungen__titel:has(+ p) { margin-bottom: var(--s2); }
.haupt .einstellungen__inhalt > h2 + form { margin-top: 0; }
.haupt :is(.einladung-form, .rollen-form, .generator__formular) fieldset legend { padding: 0; }
.haupt .assistent-inhalt .eingabezeile button { justify-self: end; width: auto; }
/* ChancenPlus+-Block: eigene Marke im Bewerbungsformular und auf der Statusseite (Farben aus dem Siegel) */
.karriere-inhalt .cp-chance, .cp-chance { --cp-creme: #FDF5E3; --cp-gold: #E59A00; display: grid; gap: var(--space-sm); margin: var(--space-md) 0; padding: var(--space-md) var(--space-lg); border: 0; border-radius: var(--radius-lg); background: var(--cp-creme); }
.cp-chance__kopf { display: flex; align-items: center; gap: var(--space-sm); padding: 0; margin: 0 0 var(--space-xs); float: none; width: 100%; }
.cp-chance__kopf img { width: 2.75rem; height: 2.75rem; flex: none; }
.cp-chance__kopf strong { display: block; font-family: var(--font-heading); font-size: 1.125rem; line-height: 1.25; }
.cp-chance__kopf small { display: block; color: var(--c-ink-muted); font-size: var(--text-sm); }
.cp-chance__lead { margin: 0; }
.cp-chance__vorteile { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.cp-chance__vorteile li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-xs); align-items: start; margin: 0; }
.cp-chance__vorteile li::before { content: ""; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; border-radius: 50%; background: var(--cp-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.8rem no-repeat; }
.cp-chance label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; margin-top: var(--space-xs); padding-top: var(--space-sm); border-top: 1px solid color-mix(in srgb, var(--cp-gold) 30%, transparent); font-weight: 600; }
.cp-chance input[type=checkbox] { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--c-brand-strong); }
.cp-chance .bf-hilfe { margin: 0; }
.karriere-inhalt .cp-chance__widerruf button:hover { background: color-mix(in srgb, var(--c-ink) 6%, transparent); }
.cp-chance__lead + .cp-chance__widerruf { margin-top: var(--space-xs); }
.cp-chance__widerruf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin: 0; }
.karriere-inhalt .cp-chance__widerruf button, .cp-chance__widerruf button { min-height: 2.75rem; padding: 0 var(--space-lg); border: 1.5px solid var(--c-ink); border-radius: 999px; background: transparent; color: var(--c-ink); font: inherit; font-weight: 700; cursor: pointer; }
/* Fieldset: Legende als Kopf innerhalb der Fläche (Float-Technik), Liste ohne Einzug */
.karriere-inhalt fieldset.cp-chance { display: block; }
.karriere-inhalt fieldset.cp-chance > legend.cp-chance__kopf { float: left; width: 100%; margin: 0 0 var(--space-sm); }
.karriere-inhalt fieldset.cp-chance > legend + * { clear: both; }
.karriere-inhalt fieldset.cp-chance > * + * { margin-top: var(--space-sm); }
.karriere-inhalt .cp-chance__vorteile { padding-left: 0; }