/* ============================================================
   KARRIERE — Stile für Karriere-, Stellen-, Bewerbungs- und 404-Seiten
   ------------------------------------------------------------
   Eingebunden auf: karriere.html, karriere-*.html,
   bewerbung.html, 404.html

   1. page-hero ....... kompakter dunkler Unterseiten-Header
   1b. page-hero--split  Variante mit gerahmtem Foto rechts
   2. breadcrumb ...... Brotkrumen-Navigation
   3. identity ........ «Wer ist Translogistik?» (Tabelle der Werte)
   4. benefits-roller . «Was du bei uns bekommst» (scroll-gesteuertes Karussell)
   5. jobs ............ Liste der offenen Stellen
   5b. standortfilter . Pillen «Alle Standorte / Hamburg / …» über den Stellen
   5c. standort-team .. Ansprechpartner je Standort (Foto oder Monogramm)
   6. montage ......... Video-Player (großformatig, mit Scrub-Leiste)
   7. steps ........... Weg von der Bewerbung bis zum ersten Tag
   8. job ............. Seite einer einzelnen Stelle (2 Spalten + sticky)
   9. form ............ Bewerbungsformular (Layout, Felder, Checkbox)
   10. wizard .......... gamifiziertes Bewerbungsformular (3 Schritte)
   11. error .......... 404
   12. legal .......... impressum.html, datenschutz.html
   13. process ......... interaktive «Vier Schritte» (löst .steps auf karriere.html ab)
   14. marquee ......... zweizeiliges Laufband zwischen Prozess und CTA
   15. cta-banner ....... rote Gradient-Karte «Bereit, mit uns zu wachsen?»

   Hier werden keine neuen Farben definiert — nur Tokens.
   ============================================================ */

/* ============================================================
   1. PAGE-HERO — kompakter Unterseiten-Header
   ------------------------------------------------------------
   Ein großer Hero (84vh + gerahmtes Foto) wäre auf Unterseiten
   zu viel: der gehört auf die Startseite. Hier wandert das Foto
   als Textur unter einen roten Verlauf in den Hintergrund, damit
   der Textkontrast nicht vom Bildmotiv abhängt.
   ============================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  background: #111;
  color: #fff;
}

:root[data-theme='dark'] .page-hero { background: #0A0A0A; }

.page-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 40%);
  opacity: 0.22;
}

.page-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(17, 17, 17, 0.94) 0%, rgba(17, 17, 17, 0.72) 55%, rgba(17, 17, 17, 0.5) 100%),
    radial-gradient(90% 120% at 88% 0%, rgba(227, 6, 19, 0.5) 0%, rgba(227, 6, 19, 0.12) 45%, rgba(227, 6, 19, 0) 70%);
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: 48px 56px;
  max-width: 760px;
}


.page-hero__figure {
  display: none;
  position: absolute;
  right: 150px;
  bottom: 0;
  z-index: 1;
  width: clamp(300px, 30vw, 460px);
  aspect-ratio: 0.9;
  overflow: hidden;
  pointer-events: none;
}

.page-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 1200px) {
  .page-hero__figure { display: block; }
}

@media (min-width: 1024px) {
  .page-hero__inner { padding-block: 64px 72px; }
}

.page-hero__title {
  margin-top: 18px;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
}

.page-hero__lead {
  margin-top: 20px;
  max-width: 620px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 1024px) {
  .page-hero__lead { font-size: 1.0625rem; }
}

.page-hero__meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.page-hero__chip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--accent);
}

.page-hero__actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.page-hero .btn--ghost {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.page-hero .btn--ghost:hover {
  background: #fff;
  color: #111;
  border-color: #fff;
}

/* ============================================================
   1a2. PAGE-HERO --photobg — volles Foto, weicher Verlauf, keine Karte
   ------------------------------------------------------------
   Wie .hero auf der Startseite: kein .page-hero__visual, dafür läuft
   das Hintergrundfoto in voller Stärke (statt der leisen 0.22-Opacity
   von .page-hero__bg) mit einem weichen Verlauf links (dunkel, Text
   liegt dort) nach rechts (klar, Originalfoto sichtbar).             */
.page-hero--photobg .page-hero__visual { display: none; }

/* Ohne Karte war die Sektion nur so hoch wie der (kurze) Text — das
   Foto blieb auf halber Höhe abgeschnitten. Mehr Höhe zeigt mehr davon. */
.page-hero--photobg { min-height: min(70vh, 620px); }

.page-hero--photobg > .container {
  min-height: min(70vh, 620px);
  display: flex;
  align-items: center;
}

@media (min-width: 1024px) {
  .page-hero--photobg,
  .page-hero--photobg > .container {
    min-height: 74vh;
  }
}

.page-hero--photobg .page-hero__bg img {
  opacity: 1;
  object-position: 82% 42%;
}

@media (min-width: 1024px) {
  .page-hero--photobg .page-hero__bg img { object-position: 50% 50%; }
}

.page-hero--photobg .page-hero__bg::after {
  background: linear-gradient(to right,
    rgba(10, 8, 8, 0.9) 0%,
    rgba(10, 8, 8, 0.8) 55%,
    rgba(10, 8, 8, 0.5) 100%);
}

@media (min-width: 1024px) {
  .page-hero--photobg .page-hero__bg::after {
    background: linear-gradient(to right,
      rgba(10, 8, 8, 0.86) 0%,
      rgba(10, 8, 8, 0.72) 30%,
      rgba(10, 8, 8, 0.32) 58%,
      rgba(10, 8, 8, 0) 82%);
  }
}

/* ============================================================
   1b. PAGE-HERO --split — gerahmtes Foto rechts neben dem Text
   ------------------------------------------------------------
   Derselbe Rahmen wie .hero__frame auf der Startseite (roter
   Verlauf unter dem Bild, Scrim von unten), aber OHNE die
   Trust-Plakette: Bewertungen bleiben der Startseite vorbehalten.

   Unter 900px klappt die Karte — genau wie .hero--bg auf der
   Startseite — in den Hintergrund der Sektion: das Foto füllt den
   Hero, der Text liegt mit dichterem Scrim darauf. Eine zweite
   Fotokarte unter dem Text würde den ersten Screen nur verlängern.
   Das Hintergrundfoto (.page-hero__bg) wird dort ausgeblendet,
   sonst lägen zwei Motive übereinander.
   ============================================================ */
.page-hero__frame {
  position: relative;
  overflow: hidden;
}

.page-hero__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 60% 20%, #ff2a36 0%, var(--accent) 42%, #8f040c 100%);
}

.page-hero__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 25%);
}

/* --- Handy/Tablet: Foto ist der Hintergrund der Sektion --- */
@media (max-width: 899px) {
  .page-hero--split .page-hero__bg { display: none; }

  .page-hero--split .page-hero__visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .page-hero--split .page-hero__frame { height: 100%; }

  /* die rote Fläche trägt hier nichts: das Foto füllt die Sektion */
  .page-hero--split .page-hero__frame::before { display: none; }

  /* dichter als im Rahmen — Titel und Lead liegen direkt auf dem Foto */
  .page-hero--split .page-hero__frame::after {
    background:
      linear-gradient(to bottom,
        rgba(17, 17, 17, 0.92) 0%,
        rgba(17, 17, 17, 0.74) 46%,
        rgba(17, 17, 17, 0.88) 100%),
      radial-gradient(120% 70% at 88% 0%,
        rgba(227, 6, 19, 0.34) 0%, rgba(227, 6, 19, 0) 66%);
  }
}

/* --- Desktop: gerahmte Fotokarte rechts --- */
@media (min-width: 900px) {
  .page-hero--split > .container {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 48px;
  }

  /* im Splitscreen begrenzt die Spalte die Breite, nicht max-width */
  .page-hero--split .page-hero__inner { max-width: none; }

  .page-hero__visual {
    position: relative;
    z-index: 2;
    padding-block: 48px;
  }

  .page-hero__frame {
    height: clamp(360px, 42vw, 520px);
    border-radius: var(--radius-lg);
  }

  .page-hero__frame::after {
    background:
      linear-gradient(to top, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0) 58%),
      radial-gradient(115% 75% at 78% 6%, rgba(227, 6, 19, 0.4) 0%, rgba(227, 6, 19, 0.1) 46%, rgba(227, 6, 19, 0) 72%);
  }
}

/* ============================================================
   2. BREADCRUMB
   ============================================================ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
}

.breadcrumb a {
  color: inherit;
  transition: color var(--dur-fast) var(--ease);
}

.breadcrumb a:hover { color: #fff; }

.breadcrumb [aria-current='page'] { color: rgba(255, 255, 255, 0.85); }

.breadcrumb__sep {
  color: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   Gemeinsamer Sektionskopf (wird in vielen Blöcken unten genutzt)
   ============================================================ */
.section-head {
  max-width: 720px;
  margin-bottom: 44px;
}

.section-head__title {
  margin-top: 16px;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
}

.section-head__lead {
  margin-top: 18px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ============================================================
   3. IDENTITY — «Wer ist Translogistik?»
   ------------------------------------------------------------
   Adaptiert aus dem "Wer ist Translogistik?" Konzept, jetzt mit dem
   generierten Charakter-Loop (generated_video_hd.mp4). Das Video hat
   einen eigenen hellen Studio-Hintergrund, der sich nicht mit dem
   Seiten-Theme mischt — deshalb bleibt die Karte bewusst IMMER hell
   (wie ein Foto), unabhängig von data-theme.
   ============================================================ */
.identity__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.identity__pointer {
  margin-bottom: 20px;
}

.identity__media {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

/* Fast quadratisch, aber leicht breiter — Video wird per object-fit:cover
   seitlich beschnitten statt komplett gezeigt (mehr Charakter, weniger
   vom leeren Studio-Hintergrund links/rechts). Die Figur bleibt in der
   gesamten Loop-Länge horizontal zentriert, deshalb ist ein Mittenschnitt
   sicher (kein Abschneiden von Kopf/Füßen). */
.identity__media-card {
  width: 260px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

@media (min-width: 640px) {
  .identity__media-card { width: 380px; }
}

@media (min-width: 1024px) {
  .identity__media-card { width: 460px; }
}

.identity__media-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.identity__title {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  margin-bottom: 18px;
}

.identity__lead {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 36px;
}

.identity__table {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  text-align: left;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.identity__table-head {
  display: grid;
  grid-template-columns: 1.3fr 2.4fr 1.8fr;
  padding: 18px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--border);
}

.identity__table-row {
  display: grid;
  grid-template-columns: 1.3fr 2.4fr 1.8fr;
  align-items: center;
  gap: 16px;
  padding: 30px 12px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease);
}

.identity__table-row:last-child { border-bottom: none; }

.identity__table-row:hover { background: var(--surface-2); }

.identity__col-title {
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.identity__col-desc {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted);
  padding-right: 24px;
}

.identity__col-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.identity__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  white-space: nowrap;
}

@media (max-width: 880px) {
  .identity__table-head { display: none; }

  .identity__table-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px 4px;
    text-align: center;
    justify-items: center;
  }

  .identity__col-desc { padding-right: 0; }
}

/* ============================================================
   4. BENEFITS ROLLER — «Was du bei uns bekommst»
   ------------------------------------------------------------
   Ersetzt die vorherige statische Kachel-Grid durch ein
   scroll-gesteuertes Karussell (Konzept: test-benefits-perfect).
   ============================================================ */
.benefits-roller {
  position: relative;
  height: 320vh;
}

.benefits-roller__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.benefits-roller__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .benefits-roller__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 80px;
  }
}

.benefits-roller__wheel-wrap {
  position: relative;
  height: 480px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
}

.benefits-roller__bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 220px;
  background: var(--accent);
  filter: blur(130px);
  opacity: 0.14;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.benefits-roller__wheel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform 0.55s var(--ease);
}

.benefits-roller__item {
  padding-block: 28px;
  padding-inline: 4px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: -1px;
  opacity: 0.4;
  transform: scale(0.96);
  transform-origin: left center;
  filter: blur(1px);
  transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease, border-color 0.45s ease;
}

.benefits-roller__item.is-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  z-index: 2;
  position: relative;
  border-color: var(--border-strong);
}

.benefits-roller__icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 14px;
}

.benefits-roller__icon svg { width: 19px; height: 19px; }

.benefits-roller__item-title {
  display: block;
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.benefits-roller__item-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease), opacity 0.4s ease, margin-top 0.4s ease;
  margin-top: 0;
}

.benefits-roller__item.is-active .benefits-roller__item-body {
  max-height: 160px;
  opacity: 1;
  margin-top: 12px;
}

.benefits-roller__item-body p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 560px;
}

.benefits-roller__cta {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.benefits-roller__cta .circle-icon {
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.benefits-roller__cta:hover .circle-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: translateX(3px);
}

/* ============================================================
   5. JOBS — Liste der offenen Stellen
   ============================================================ */
.jobs {
  display: grid;
  gap: 16px;
}

.job-card {
  display: grid;
  gap: 18px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease),
              opacity var(--dur) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

@media (min-width: 768px) {
  .job-card {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    padding: 30px;
  }
}

.job-card:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}

/* display:grid schlägt das UA-Standard-[hidden] — ohne diese Zeile
   würde der Standortfilter (§5b) keine Karte ausblenden. */
.job-card[hidden] { display: none; }

.job-card__title {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.job-card__tags {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.job-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}

.job-card__tag--new {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.job-card__text {
  margin-top: 14px;
  max-width: 620px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}

.job-card__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}

.job-card__go .circle-icon {
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.job-card:hover .job-card__go .circle-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: translateX(3px);
}

/* Hinweisbox «keine passende Stelle dabei» */
.jobs-note {
  display: grid;
  gap: 16px;
  align-items: center;
}

@media (min-width: 768px) {
  .jobs-note { grid-template-columns: 1fr auto; gap: 32px; }
}

.jobs-note__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.jobs-note p {
  margin-top: 8px;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   5b. STANDORTFILTER — Pillen über der Stellenliste
   ------------------------------------------------------------
   Dieselbe Pillen-Optik wie .gruppe__pill auf der Startseite
   (sections.css §Gruppe), hier aber ein echter Filter: die aktive
   Pille blendet .job-card ohne passenden data-standorte aus.
   Gerendert von assets/js/karriere-standorte.js.

   Auf dem Handy scrollt die Pillenreihe horizontal statt in vier
   Zeilen umzubrechen — zehn Städte plus «Alle Standorte» wären sonst
   ein halber Screen, noch bevor die erste Stelle sichtbar ist.
   ============================================================ */
.standortfilter {
  margin-bottom: 28px;
}

.standortfilter__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 14px;
}

.standortfilter__label,
.standortfilter__count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.standortfilter__label { color: var(--muted); }
.standortfilter__count { color: var(--faint); }

.standortfilter__pills {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.standortfilter__pills::-webkit-scrollbar { display: none; }

@media (min-width: 900px) {
  .standortfilter__pills {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.standortfilter__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.standortfilter__pill:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.standortfilter__pill.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* «neu» an Bremen: dieselbe Aussage wie die NEU-Pille auf der
   Standortkarte der Startseite (.location__flag). */
.standortfilter__pill-tag {
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.standortfilter__pill.is-active .standortfilter__pill-tag {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Leerlauf: gewählter Standort hat gerade keine Stelle. Kein «nichts
   gefunden»-Nichts, sondern der Weg zur Initiativbewerbung. */
.standortfilter__empty {
  margin-top: 16px;
  padding: 22px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

/* ============================================================
   5c. STANDORT-TEAM — Ansprechpartner je Standort
   ------------------------------------------------------------
   Ohne Auswahl ein Raster aller Standorte, mit Auswahl eine
   einzelne, breitere Karte (.standort-team--single). Das Foto ist
   quadratisch; liegt keines vor, rendert das JS ein Monogramm
   (.standort-team__avatar--mono) statt eines fremden Gesichts.

   Fotos kommen als assets/img/team/<slug>.jpg (quadratisch, ~440px)
   und werden in STANDORTE[].kontakt.photo eingetragen.
   ============================================================ */
.standort-team__head {
  margin-top: 88px;
  margin-bottom: 16px;
}

.standort-team__heading {
  margin-top: 8px;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.standort-team {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .standort-team { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .standort-team { grid-template-columns: repeat(3, 1fr); }
}

/* Eine Karte allein soll nicht auf ein Drittel der Zeile schrumpfen. */
.standort-team--single {
  grid-template-columns: 1fr;
  max-width: 620px;
}

.standort-team__card {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: start;
  gap: 14px;
  padding: 16px;
}

.standort-team--single .standort-team__card {
  grid-template-columns: 100px 1fr;
  gap: 20px;
  padding: 22px;
}

.standort-team__avatar {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
}

.standort-team--single .standort-team__avatar {
  width: 100px;
  height: 100px;
}

.standort-team__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.standort-team__avatar--mono {
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.standort-team--single .standort-team__avatar--mono { font-size: 30px; }

.standort-team__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.standort-team__place {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.standort-team__name {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.standort-team--single .standort-team__name { font-size: 19px; }

.standort-team__role {
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

.standort-team__contact {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.standort-team__contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  font-size: 13.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) var(--ease);
}

.standort-team__contact a:hover { color: var(--accent); }

.standort-team__contact svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--accent);
}

.standort-team__cta { margin-top: 12px; }


/* ============================================================
   6. MONTAGE — Video-Player
   ------------------------------------------------------------
   EIN Video (MONTAGE_Captions.mp4, Hochformat 9:16), großformatig,
   zentriert. Der Ton hat bereits eingebrannte Untertitel — daher
   kein zusätzliches Transkript-Panel, nur ein Player mit
   Scrub-Leiste (klick- und ziehbar) und Vollbild-Button.
   ============================================================ */
/* Grid statt zentriertem flex: das erste Video sitzt auf derselben
   linken Führungslinie wie der Text von .section-head oben, das zweite
   rechts daneben mit Abstand. auto-fill heißt: eine dritte Rolle
   braucht keine CSS-Änderung — die Spalte entsteht von selbst, und auf
   schmalen Screens rutschen die Clips in eine Spalte. */
.montage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 440px));
  justify-content: start;
  /* Die Videos sind groß (bis 440×782px) — 32px wirkten neben dieser
     Höhe wie «verklebte» Karten statt wie ein bewusster Abstand. */
  gap: 56px;
}

@media (max-width: 900px) {
  .montage__grid { gap: 40px; }
}

@media (max-width: 640px) {
  .montage__grid { gap: 24px; }
}

.montage__card-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
}

.montage__card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
  cursor: pointer;
}

.montage__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.montage__card:fullscreen,
.montage__card:-webkit-full-screen {
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.montage__card:fullscreen .montage__video,
.montage__card:-webkit-full-screen .montage__video {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.montage__badge {
  position: absolute;
  top: 16px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  z-index: 6;
}

.montage__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.montage__card.is-playing .montage__dot {
  animation: montage-pulse 1.8s infinite;
}

@keyframes montage-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.8); }
}

.montage__fullscreen-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  z-index: 7;
  transition: background 0.2s ease, transform 0.2s ease;
}

.montage__fullscreen-btn:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.06);
}

.montage__fullscreen-btn svg {
  width: 15px;
  height: 15px;
}

.montage__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  cursor: pointer;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 5;
}

.montage__card.is-playing .montage__overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.montage__play-btn {
  width: 58px;
  height: 40px;
  background: var(--accent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px var(--accent-glow);
  transition: transform 0.25s ease, background 0.25s ease;
}

.montage__overlay:hover .montage__play-btn {
  transform: scale(1.08);
  background: var(--accent-hover);
}

/* Kein margin-left: der Container zentriert bereits per flex, und der
   Versatz «für die optische Mitte» des Dreiecks wirkte wie ein Layoutfehler. */
.montage__play-btn svg {
  width: 17px;
  height: 17px;
  fill: #fff;
}

/* ---------- Scrub-Leiste unten im Video ---------- */
.montage__scrub {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
}

.montage__time {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.montage__scrub-track {
  position: relative;
  flex: 1;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

.montage__scrub-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}

.montage__scrub-bar {
  position: absolute;
  left: 0;
  height: 4px;
  width: 0%;
  border-radius: 2px;
  background: var(--accent);
  pointer-events: none;
}

.montage__scrub-thumb {
  position: absolute;
  left: 0%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transform: scale(0.72);
  transition: transform 0.18s ease;
  pointer-events: none;
}

.montage__scrub-track:hover .montage__scrub-thumb,
.montage__scrub-track.is-scrubbing .montage__scrub-thumb {
  transform: scale(1);
}

.montage__scrub-tooltip {
  position: absolute;
  bottom: 26px;
  left: 0%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.montage__scrub-track:hover .montage__scrub-tooltip,
.montage__scrub-track.is-scrubbing .montage__scrub-tooltip {
  opacity: 1;
}

/* ============================================================
   7. STEPS — Weg von der Bewerbung bis zum ersten Tag
   ============================================================ */
.steps {
  display: grid;
  gap: 18px;
  counter-reset: step;
}

@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}

@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
}

.step {
  position: relative;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Auf dem Desktop stehen die Schritte in einer Reihe: wir verbinden sie
   mit einer gestrichelten Linie und entfernen doppelte Rahmen, damit es
   als ein durchgehender Weg gelesen wird. */
@media (min-width: 1024px) {
  .step {
    border-radius: 0;
    border-left: 0;
    padding: 26px 24px;
  }

  .step:first-child {
    border-left: 1px solid var(--border);
    border-radius: var(--radius) 0 0 var(--radius);
  }

  .step:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
  }
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 800;
}

.step__title {
  margin-top: 16px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.step__text {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

/* ============================================================
   8. JOB — Seite einer einzelnen Stelle
   ============================================================ */
.job {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 1024px) {
  .job {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 64px;
  }
}

.job__block + .job__block {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.job__block-title {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
}

.job__intro {
  max-width: 640px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted);
}

/* Titel + erster Absatz standen ohne Abstand direkt aufeinander
   (z. B. "Darum geht es" / "Standorte") — betrifft jede Vakanzseite. */
.job__block-title + .job__intro {
  margin-top: 18px;
}

.job__list {
  margin-top: 22px;
  display: grid;
  gap: 14px;
  max-width: 640px;
}

.job__list li {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

/* Das Häkchen wird per ::before gezeichnet statt als Bild: es nutzt
   currentColor und passt sich damit automatisch dem Theme an. */
.job__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-soft);
}

.job__list li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 9px;
  width: 8px;
  height: 4px;
  border-left: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg);
}

.job__list strong {
  color: var(--ink);
  font-weight: 600;
}

/* Sticky-Karte «jetzt bewerben» */
.job__aside { position: static; }

@media (min-width: 1024px) {
  .job__aside {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}

.apply-box {
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.apply-box__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.apply-box__title {
  margin-top: 12px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.apply-box__facts {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}

.apply-box__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 14.5px;
}

.apply-box__fact dt { color: var(--faint); }
.apply-box__fact dd { font-weight: 600; text-align: right; }

.apply-box .btn { width: 100%; margin-top: 22px; }

.apply-box__note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--faint);
}

.apply-box__contact {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.apply-box__contact a { font-weight: 600; color: var(--ink); }
.apply-box__contact a:hover { color: var(--accent); }

/* ============================================================
   9. FORM — Bewerbung
   ============================================================ */
.bewerbung {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 1024px) {
  .bewerbung {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 64px;
  }
}

.form {
  display: grid;
  gap: 20px;
  max-width: 680px;
}

.form__row {
  display: grid;
  gap: 20px;
}

@media (min-width: 640px) {
  .form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form__row > .field {
    width: 100%;
  }
}

/* Dritte Spalte (Name/E-Mail/Telefon in einer Zeile) — kontakt.html und
   Schritt 3 des Bewerbungs-Wizards. Eigener, höherer Breakpoint als die
   2-Spalten-Regel oben: drei Felder brauchen mehr Platz pro Spalte, sonst
   wirken Telefon- und E-Mail-Eingaben zwischen 640–767px gequetscht.
   Darunter bleibt es einspaltig gestapelt. */
@media (min-width: 768px) {
  .form__row.form__row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* .wizard__step ist nur display:block (kein grid-gap) — ohne diese Regel
   liegen die Kontaktfelder (Schritt 3: Name, Telefon/E-Mail, Einverständnis)
   ohne jeden Abstand aufeinander. Bewusst auf .wizard__step beschränkt:
   .form ist selbst schon display:grid mit gap:20px — hier zusätzlich
   margin-top zu setzen verdoppelte den Abstand zwischen Feldern und
   erzeugte eine uneinheitliche Zeilenhöhe innerhalb des Formulars. */
.wizard__step .field + .field,
.wizard__step .field + .form__row,
.wizard__step .form__row + .field {
  margin-top: 20px;
}

.field {
  display: grid;
  gap: 7px;
  /* Rückt das Eingabefeld an den unteren Rand der Zelle, statt es an der
     Zellhöhe zu stretchen — sonst verschieben unterschiedlich lange Labels
     (z. B. "Telefon (optional)" neben "E-Mail") die Inputs innerhalb einer
     .form__row sichtbar gegeneinander. */
  align-content: end;
}

.field__label {
  font-size: 14px;
  font-weight: 600;
}

.field__req {
  color: var(--accent);
  margin-left: 2px;
}

.field__control {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 15.5px;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

textarea.field__control {
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
}

select.field__control {
  appearance: none;
  /* Pfeil per Hintergrund gezeichnet, um kein Icon ins Markup zu holen */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 19px center, right 13px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.field__control::placeholder { color: var(--faint); }

.field__control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field__hint {
  font-size: 13px;
  line-height: 1.45;
  color: var(--faint);
}

/* Zeile oben ausrichten statt unten: .field bündelt die Controls sonst am
   unteren Zellenrand (siehe align-content: end weiter oben). Sobald ein
   Feld in der Zeile einen Hinweis UNTER dem Control hat, schiebt der das
   Control nach oben und die beiden Eingaben stehen versetzt. */
.form__row--top > .field { align-content: start; }

/* Hinweis UNTER dem Feld (kontakt.html: «aus deiner Standortwahl
   übernommen»). .field ist ein Grid mit gap — der Hinweis ist also einfach
   die nächste Zeile, nur kleiner. */
.field__hint--below { font-size: 12.5px; }

/* Auswahlfeld mit ✕ daneben (Standort im Kontaktformular). Bewusst NEBEN
   dem Feld und nicht darin: select.field__control zeichnet seinen Pfeil
   schon als Hintergrund rechts, ein zweites Icon darüber wäre ein
   Gedrängel aus zwei Symbolen im selben Eck. */
.field__combo {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.field__combo > .field__control { flex: 1; min-width: 0; }

.field__clear {
  flex-shrink: 0;
  width: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--faint);
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.field__clear:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.field__clear svg { width: 15px; height: 15px; }

/* display:grid schlägt sonst die UA-Regel für [hidden] */
.field__clear[hidden] { display: none; }

/* Fehler erst nach einem Absendeversuch zeigen — vorher ist ein leeres
   Pflichtfeld nicht «rot». */
.field__error {
  display: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
}

.field.is-invalid .field__control {
  border-color: var(--accent);
}

.field.is-invalid .field__error { display: block; }

.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
}

.field--check input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--accent);
}

.field--check .field__label {
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

.field--check .field__error { grid-column: 1 / -1; }

/* Die Checkbox hat kein .field__control, deshalb zeichnen wir den roten
   Rahmen des «ungültig»-Zustands hier separat */
.field--check.is-invalid input {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field--check a { font-weight: 600; color: var(--ink); text-decoration: underline; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding-top: 4px;
}

.form__note {
  font-size: 13px;
  line-height: 1.5;
  max-width: 340px;
  color: var(--faint);
}

/* Die Bestätigung nach dem Absenden liegt in einem Modal über der
   Seite — .modal in components.css, Logik in form-modal.js.
   Das inline .form__done wurde entfernt: bei einem langen Formular
   musste man es erst durch Scrollen finden. */

/* ============================================================
   10. WIZARD — gamifiziertes Bewerbungsformular
   ------------------------------------------------------------
   Drei Schritte (Stelle → Standort → Kontakt) statt eines langen
   Formulars. Radios/Checkbox bleiben echte Formularelemente
   (Zugänglichkeit, Funktion ohne CSS) — nur ihre Darstellung wird
   zu großen, klickbaren Karten. .field/.field__control aus Sektion
   9 werden in Schritt 3 (Kontakt) unverändert weiterverwendet.
   ============================================================ */
.wizard { max-width: 680px; }

.wizard__meter {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
  margin-bottom: 10px;
}

.wizard__meter-fill {
  height: 100%;
  width: 33%;
  background: var(--accent);
  border-radius: 2px;
  transition: width var(--dur) var(--ease);
}

.wizard__step-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 28px;
}

.wizard__step { display: none; }
.wizard__step.is-active { display: block; }

.wizard__step-title {
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  margin-bottom: 24px;
}

/* Hinweis unter einer Optionsgruppe — z. B. warum in Schritt 2 nur drei
   Städte stehen, sobald «Ausbildung» gewählt ist (siehe bewerbung.js). */
.wizard__hint {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.wizard__options {
  display: grid;
  gap: 14px;
}

.wizard__options--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 640px) {
  .wizard__options--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Radio bleibt im DOM und ist per Tastatur bedienbar, wird aber
   visuell durch die Karte ersetzt (nicht display:none — sonst
   kein Fokusring beim Tabben). */
.wizard__option {
  position: relative;
  display: block;
  cursor: pointer;
}

/* display:block schlägt das UA-Standard-[hidden] — ohne diese Zeile
   bliebe eine für die gewählte Stelle gesperrte Option sichtbar
   (siehe syncStandorte in bewerbung.js). Gleiches Muster wie bei
   .wizard__nav .btn[hidden] weiter unten. */
.wizard__option[hidden] { display: none; }

.wizard__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.wizard__option-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.wizard__options--grid .wizard__option-card {
  align-items: center;
  text-align: center;
  justify-content: center;
  min-height: 64px;
}

.wizard__option:hover .wizard__option-card { border-color: var(--border-strong); }

.wizard__option input:focus-visible ~ .wizard__option-card {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wizard__option input:checked ~ .wizard__option-card {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
}

.wizard__option-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.wizard__option-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.wizard__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}

/* .btn setzt display:inline-flex — das schlägt sonst das UA-Standard-
   [hidden] und der Button bliebe trotz hidden-Attribut sichtbar. */
.wizard__nav .btn[hidden] { display: none; }

.wizard__nav-spacer { flex: 1; }

/* Bestätigung nach dem Absenden: siehe .modal in components.css */

/* ============================================================
   11. ERROR — 404
   ============================================================ */
.error {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--bg);
}

.error__inner {
  max-width: 620px;
  padding-block: 72px;
}

.error__code {
  font-size: clamp(5rem, 18vw, 11rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--accent);
}

.error__title {
  margin-top: 20px;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
}

.error__lead {
  margin-top: 18px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

.error__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.error__links {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  font-size: 14.5px;
}

.error__links a {
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease);
}

.error__links a:hover { color: var(--accent); }

/* ============================================================
   12. LEGAL — impressum.html, datenschutz.html
   ============================================================ */
.legal {
  max-width: 760px;
}

.legal__updated {
  margin-top: 18px;
  font-size: 13px;
  color: var(--faint);
}

.legal__block + .legal__block {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.legal__block-title {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}

.legal__block p + p,
.legal__block p + ul,
.legal__block ul + p {
  margin-top: 14px;
}

.legal__block p,
.legal__block li {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
}

.legal__block h3 {
  margin-top: 26px;
  font-size: 1.0625rem;
}

.legal__block h4 {
  margin-top: 18px;
  font-size: 1rem;
}

.legal__block ul {
  display: grid;
  gap: 8px;
  padding-left: 22px;
  list-style: disc;
}

.legal__block a { color: var(--ink); text-decoration: underline; }
.legal__block a:hover { color: var(--accent); }

.legal__block dl {
  margin-top: 14px;
  display: grid;
  gap: 6px;
}

.legal__block dl div { display: flex; gap: 8px; }
.legal__block dt { color: var(--faint); min-width: 140px; }
.legal__block dd { color: var(--ink); font-weight: 600; }

/* Platzhalter, die vor dem Live-Gang noch mit echten Firmendaten
   gefüllt werden müssen — bewusst auffällig, damit sie nicht
   versehentlich live gehen. */
.legal__todo {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}

/* ============================================================
   13. PROCESS — interaktive «Vier Schritte bis zum ersten Arbeitstag»
   ------------------------------------------------------------
   Ersetzt die statische .steps-Grid auf karriere.html (dort war es
   nur eine Kachelreihe). .steps/.step selbst bleibt unverändert —
   bewerbung.html nutzt diese Klassen weiterhin für seinen eigenen
   Ablauf-Abschnitt.
   Adaptiert aus import/prozess-karriere-v2.html: Zahl + Linie stehen
   immer, der Text klappt nur bei Hover/Fokus/Klick auf (Desktop) bzw.
   in der Höhe auf (Mobile). JS: assets/js/process.js.
   ============================================================ */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 900px) {
  .process-steps {
    flex-direction: row;
    gap: 24px;
  }
}

.process-step {
  position: relative;
  cursor: pointer;
  user-select: none;
}

@media (min-width: 900px) {
  .process-step {
    flex: 1;
    transition: flex 0.6s var(--ease);
  }

  .process-step.is-active {
    flex: 2.1;
  }
}

.process-step__line {
  height: 2px;
  background: var(--border-strong);
  margin-bottom: 22px;
  transition: background var(--dur-fast) var(--ease);
}

.process-step.is-active .process-step__line { background: var(--ink); }
.process-step:hover .process-step__line { background: var(--accent); }

.process-step__body {
  display: flex;
  align-items: flex-start;
}

.process-step__num {
  font-family: var(--font-sans);
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--border-strong);
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease);
}

.process-step.is-active .process-step__num { color: var(--ink); }
.process-step:hover .process-step__num { color: var(--accent); }

/* Desktop: die aktive Spalte klappt seitlich auf 400px auf.
   Mobile: Höhe statt Breite, siehe unten. */
@media (min-width: 900px) {
  .process-step__content {
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.5s var(--ease), opacity 0.35s ease;
  }

  .process-step.is-active .process-step__content {
    width: 400px;
    opacity: 1;
    transition: width 0.5s var(--ease), opacity 0.4s ease 0.08s;
  }

  .process-step__text {
    width: 400px;
    padding-left: 24px;
    padding-top: 6px;
  }
}

@media (max-width: 899px) {
  .process-step__body { flex-direction: column; }

  .process-step__content {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.4s var(--ease), opacity 0.3s var(--ease);
  }

  .process-step.is-active .process-step__content {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .process-step__inner { overflow: hidden; }

  .process-step__text {
    padding-top: 12px;
    padding-bottom: 4px;
  }
}

.process-step__title {
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.process-step__desc {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ============================================================
   14. MARQUEE — zweizeiliges Laufband zwischen Prozess und CTA
   ------------------------------------------------------------
   Gleicher Streifen-Motiv wie #gruppe auf der Startseite
   (--bg-alt, Linien oben/unten) — liest sich als Zäsur, nicht als
   eigene große Sektion. prefers-reduced-motion greift global über
   base.css (animation-duration wird dort auf .01ms gesetzt).
   ============================================================ */
.marquee {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.marquee-row {
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}

.marquee-track {
  display: inline-flex;
  gap: 28px;
  animation: marquee-left 32s linear infinite;
  will-change: transform;
}

.marquee-track--right { animation-name: marquee-right; }

@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.marquee-group {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding-inline-end: 28px;
  font-size: clamp(1.25rem, 2.6vw, 1.875rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.marquee-track--accent .marquee-group { color: var(--accent); }

.marquee-symbol {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.75em;
  color: var(--accent);
}

.marquee-track--accent .marquee-symbol { color: var(--ink); }

/* ============================================================
   15. CTA-BANNER — rote Gradient-Karte «Bereit, mit uns zu wachsen?»
   ------------------------------------------------------------
   Eigene Klassen statt der geteilten .cta/.cta__card (die bleiben
   für den Foto-CTA auf index.html unverändert). Immer Weiß-auf-Rot,
   deshalb kein zusätzlicher Dark-Mode-Block nötig.
   ============================================================ */
.cta-banner {
  padding-block: 56px;
}

@media (min-width: 1024px) {
  .cta-banner { padding-block: 72px; }
}

.cta-banner__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #fff;
  box-shadow: 0 24px 60px var(--accent-glow);
}

@media (min-width: 900px) {
  .cta-banner__card {
    padding: 44px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: center;
  }
}

.cta-banner__glow {
  position: absolute;
  top: -55%;
  right: -15%;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.cta-banner__content {
  position: relative;
  z-index: 1;
}

.cta-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  margin-bottom: 22px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cta-banner__title {
  font-size: clamp(2rem, 3.8vw, 2.75rem);
  line-height: 1.05;
  color: #fff;
}

.cta-banner__lead {
  margin-top: 18px;
  max-width: 480px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

.cta-banner__panel {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
}

@media (min-width: 900px) {
  .cta-banner__panel { margin-top: 0; }
}

/* Fixe Farben statt Token: die Karte ist immer Weiß-auf-Rot, unabhängig
   vom Theme — var(--ink) wäre im Dark Mode Weiß auf Weiß. */
.cta-banner__btn {
  width: 100%;
  background: #fff;
  color: #111;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.cta-banner__btn:hover {
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.cta-banner__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.cta-banner__checklist {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.925rem;
  font-weight: 700;
}

.cta-banner__check {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   16. ABSTÄNDE — kompaktere Sektionsrhythmik (nur karriere.html)
   ------------------------------------------------------------
   .section--loud/.section--quiet und .section-head sind global
   (auf jeder Seite im Einsatz) — hier NUR die eigenen Sektions-IDs
   von karriere.html überschreiben, damit bewerbung.html und die
   Job-Unterseiten (gleiche karriere.css) unverändert bleiben.
   #benefits (sticky Scroll-Karussell) bleibt bewusst außen vor.
   ============================================================ */
#wer-wir-sind.section--quiet,
#ablauf.section--quiet {
  padding-block: 56px;
}

#stellen.section--loud,
#montage.section--loud {
  padding-block: 72px;
}

@media (min-width: 1024px) {
  #wer-wir-sind.section--quiet,
  #ablauf.section--quiet {
    padding-block: 68px;
  }

  #stellen.section--loud,
  #montage.section--loud {
    padding-block: 88px;
  }
}

@media (max-width: 640px) {
  #wer-wir-sind.section--quiet,
  #ablauf.section--quiet {
    padding-block: 44px;
  }

  #stellen.section--loud,
  #montage.section--loud {
    padding-block: 52px;
  }
}

#stellen .section-head,
#montage .section-head,
#ablauf .section-head {
  margin-bottom: 32px;
}

/* Standort-Team + «Wir suchen auch Fahrer»: eine Reihe, damit die
   schmale Einzelkarte (.standort-team--single) den freien Platz daneben
   nicht leer lässt. Ohne Auswahl (breites Kartenraster) bleibt kein Platz
   übrig, die Notiz rutscht dann automatisch in die nächste Zeile. */
.standort-team-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
}

.standort-team-row .standort-team {
  flex: 1 1 100%;
}

.standort-team-row .standort-team.standort-team--single {
  flex: 0 1 460px;
}

.standort-team-row .jobs-note {
  flex: 1 1 320px;
}