/* ============================================================
   KARRIERE — /karriere/ und /en/careers/
   Drei Bänder: Hero (weiss), Ablauf (hellgrau), Eintragen (weiss). Farben aus
   den Tokens (base.css), Struktur/Bildsprache aus den bestehenden Bändern.
   Reuse: .container, .section-label, .form-*, .btn,
   .kontakt-band__inner/__direct-col/__form-col, .footer. Neu nur die
   karriere-eigenen Bänder und die Radio/Datei/Checkbox-Controls.
   Einzige dunkle Fläche: der Footer (Netz). Rhythmus: weiss / hellgrau / weiss.
   Die .gefragt- und .fuer-wen-Regeln unten sind tot (Bänder 2026-09-21
   entfernt), bleiben bis zum Dead-CSS-Sweep stehen.
   ============================================================ */

/* ── Band 1 — Hero (weiss) ── */
/* Vollhoehe wie der Startseiten-Hero: min-height kommt aus .hero--full (Section
   traegt beide Klassen), Zentrierung hier. Waechst der Inhalt ueber den Screen,
   bleibt es min-height, die Section wird hoeher, nichts wird abgeschnitten. */
.karriere-hero {
  background-color: var(--c-surface);
  display: flex;
  align-items: center;
}
.karriere-hero .container {
  padding-top: var(--nav-height);
}
/* .hero--full schaltet die Vollhoehe bei <=768px ab (Startseiten-Verhalten,
   sections.css:928). Karriere soll auch mobil den Screen fuellen; ist der Inhalt
   laenger als der Screen, waechst die Section (min-height). Scoped auf Karriere,
   .hero--full und der Startseiten-Hero bleiben unveraendert. */
@media (max-width: 768px) {
  .karriere-hero.hero--full {
    min-height: 100vh;
    min-height: 100dvh;
  }
}
.karriere-hero__h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  max-width: 720px;   /* 60% der Containerbreite (1200), H1 dreizeilig */
  margin: 0.35rem 0 var(--sp-md);   /* Rhythmik an Startseiten-Hero angeglichen */
}
.karriere-hero__subline {
  margin-top: var(--sp-sm);
  max-width: 800px;   /* ~67% der Containerbreite, beide Absaetze <=3 Zeilen */
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--c-text-2);
}
.karriere-hero__ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: var(--sp-sm);   /* Rhythmik an Startseiten-Hero angeglichen (enger vor CTA) */
}
.karriere-hero__phone {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--c-accent);
  transition: color 200ms ease;
}
.karriere-hero__phone:hover { color: var(--c-accent-hover); }

/* ── Band 2 — Ablauf (hellgrau), drei nummerierte Karten ── */
.ablauf { background-color: var(--c-surface-2); padding: var(--sp-xl) 0; }
.ablauf__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.ablauf-card {
  background-color: var(--c-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.6rem 1.5rem;
}
.ablauf-card__num {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--c-accent);
  margin-bottom: 0.75rem;
}
.ablauf-card__title { font-size: 1.05rem; margin-bottom: 0.5rem; }
.ablauf-card__desc { color: var(--c-text-2); font-size: 0.92rem; line-height: 1.65; }
.ablauf__note { margin-top: 1.5rem; color: var(--c-text-2); font-size: 0.9rem; }

/* ── Band 3 — Aktuell gefragt (weiss). Leerzustand: ersetzt Lead und Karten ── */
.gefragt { background-color: var(--c-surface); padding: var(--sp-xl) 0; }
.gefragt__empty {
  max-width: 60ch;
  color: var(--c-text-2);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ── Band 4 — Für wen (dunkel, KEIN Netz), zwei mal zwei Textfelder ── */
.fuer-wen { background-color: var(--c-dark); color: var(--c-text-light); padding: var(--sp-xl) 0; }
.fuer-wen .section-label { color: var(--c-signal-light); }
.fuer-wen__h2 { color: var(--c-text-light); }
.fuer-wen__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2.25rem;
}
.fuer-wen__title { color: var(--c-text-light); font-size: 1.05rem; margin-bottom: 0.5rem; }
.fuer-wen__desc { color: var(--c-text-dark-2); font-size: 0.92rem; line-height: 1.7; }

/* ── Band 3 — Eintragen (weiss), zweispaltig wie Band 8 ──
   Grid, Einstiegsspalte, Titel, Kontaktzeile reusen die .kontakt-band__*-Klassen. */
.eintragen { background-color: var(--c-surface); padding: var(--sp-xl) 0; }
.eintragen .section-label { color: var(--c-accent); }
.eintragen .form-privacy { text-align: left; }

/* ── Formular-Controls: Radio-Schaltflächen, Datei, Einwilligung ── */

/* Arbeitsform: drei Schaltflächen wie im Mockup. Radio-Input visuell versteckt,
   Auswahl über :has(). Fokus-Ring bleibt über :focus-visible auf dem Input. */
.form-radio-group { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.form-radio {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--c-text-2);
  background-color: var(--c-surface);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: var(--radius-btn);
  padding: 0.55rem 1rem;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}
.form-radio input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.form-radio:hover { border-color: var(--c-accent); }
.form-radio:has(input:checked) {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-white);
}
.form-radio:has(input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Datei-Feld */
.form-file {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--c-text);
  background-color: var(--c-surface);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  width: 100%;
}
.form-file::file-selector-button {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--c-accent);
  background-color: color-mix(in srgb, var(--c-accent) 8%, transparent);
  border: 1px solid rgba(22, 90, 200, 0.4);
  border-radius: var(--radius-btn);
  padding: 0.45rem 0.9rem;
  margin-right: 0.85rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.form-file::file-selector-button:hover { background-color: color-mix(in srgb, var(--c-accent) 14%, transparent); }
.form-file.is-error { border-color: #EF4444; }
.form-file__hint { font-size: 0.8rem; color: var(--c-meta); margin-top: 0.4rem; }

/* Einwilligung — Kontrollkästchen mit Fließtext daneben */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--c-text-2);
  cursor: pointer;
}
.form-check input {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  accent-color: var(--c-accent);
  cursor: pointer;
}
.form-check.is-error { color: #EF4444; }

/* Demo-Hinweis — steht hidden im Markup, app.js blendet ihn nur auf *.vercel.app ein. */
.demo-note {
  margin-top: 1rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid rgba(22, 90, 200, 0.3);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-accent) 6%, transparent);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--c-text-2);
  text-align: center;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .ablauf__grid { grid-template-columns: 1fr; }
  .fuer-wen__grid { grid-template-columns: 1fr; }
}