/* ==========================================================================
   Kerkemeier Karriere — Bausteine der Unterseiten (Ausbildung, später Jobseiten)
   Baut auf neu2.css auf: dieselben Tokens, dieselbe Kopfzeile, derselbe Abschluss.
   Siehe DESIGNSYSTEM.md, Abschnitt 12.
   ========================================================================== */

/* Aktuelle Seite in der Navigation: voll deckend, die Marke ruht darunter (Skript) */
.kopf__nav a[aria-current="page"] { opacity: 1; }
.menue a[aria-current="page"] { font-weight: bold; }

/* Helles Hero-Foto (Lagerhalle): der Verlauf braucht links mehr Deckung für die Schrift */
.hero--hell .hero__schleier {
  background:
    linear-gradient(90deg, rgba(8,30,22,.55) 0%, rgba(8,30,22,.18) 55%, rgba(8,30,22,0) 75%),
    linear-gradient(180deg, rgba(8,30,22,.4) 0%, rgba(8,30,22,0) 30%),
    linear-gradient(0deg, rgba(8,30,22,.92) 0%, rgba(8,30,22,.62) 38%, rgba(8,30,22,0) 72%);
}

/* ---------- Berufe: Bildkarten in einer Reihe, jede führt auf die Seite ihres Berufs ---------- */

.berufe {
  padding: var(--s9) 0 var(--s8);
  background: var(--gruen);
  color: var(--weiss);
}

/* Überschrift links, Bereichsknöpfe rechts auf derselben Grundlinie: sortieren, bevor man blättert */
.berufe__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4) var(--s6);
  padding: 0 var(--rand) var(--s6);
}

.berufe__kopf > div:first-child { flex: none; }

/* Reicht der Platz neben der Überschrift nicht, rücken die Knöpfe in eine eigene Zeile, weiter rechts */
@media (max-width: 1180px) {
  .berufe__kopf { flex-wrap: wrap; }
  .berufe__gruppen { flex-basis: 100%; }
}

.berufe__kopf h2 {
  margin: 0 0 var(--s3);
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.berufe__kopf p {
  margin: 0;
  max-width: 24em;
  font-size: var(--t-gross);
  line-height: 1.5;
  color: rgba(255,255,255,.8);
}

.berufe__direkt {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 26px;
  font-size: var(--t-text);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--r-pille);
  transition: background-color var(--zeit-kurz), color var(--zeit-kurz), border-color var(--zeit-kurz);
}

.berufe__direkt:hover { color: var(--gruen); background: var(--weiss); border-color: var(--weiss); }

/* Unter den Karten rechts nur die Abkürzung zum Formular, keine Blätterpfeile: der Zeiger bleibt das einzige Zeichen */
.berufe__steuer { display: flex; justify-content: flex-end; padding: var(--s5) var(--rand) 0; }

/* Bereichsknöpfe: eine Zeile je Knopf, nur Text. Ohne Skript gibt es nichts zu wählen. */
.berufe__gruppen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); min-width: 0; }
html:not(.js) .berufe__gruppen { display: none; }

.gruppe {
  min-height: 44px;
  padding: 0 20px;
  font: inherit;
  font-size: var(--t-klein);
  color: var(--weiss);
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--r-pille);
  cursor: pointer;
  transition: background-color var(--zeit-kurz), color var(--zeit-kurz), border-color var(--zeit-kurz);
}

.gruppe:hover { border-color: var(--weiss); }
.gruppe[aria-pressed="true"] { color: var(--gruen); background: var(--weiss); border-color: var(--weiss); }
.gruppe:focus-visible { outline: 2px solid var(--gruen-akzent); outline-offset: 2px; }

.pfeil {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  color: var(--weiss);
  background: transparent;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--r-pille);
  cursor: pointer;
  transition: background-color var(--zeit-kurz), color var(--zeit-kurz), opacity var(--zeit-kurz);
}

.pfeil svg { width: 16px; height: 16px; fill: currentColor; }
.pfeil--voll { color: var(--gruen); background: var(--weiss); border-color: var(--weiss); }
.pfeil:hover:not(:disabled) { color: var(--gruen); background: var(--weiss); }
.pfeil:disabled { opacity: .35; cursor: default; }
.pfeil:focus-visible { outline: 2px solid var(--gruen-akzent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pfeil, .gruppe { transition: none; }
}

/* ---------- Vorteile: Kopf links, die fünf Vorteile als Zeilen rechts ---------- */

.nutzen {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 6vw, 120px);
  align-items: start;
  padding: var(--s9) var(--rand) var(--s8);
  background: var(--weiss);
  color: var(--tinte);
}

/* Kopf wie im Mosaik, hier klebend, solange die Liste daneben läuft */
.nutzen__kopf {
  position: sticky;
  top: calc(var(--kopf-h, 128px) + var(--s5));
  padding-bottom: 0;
}

.nutzen__liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--gruen-linie); }

.nutzen__zeile {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: var(--s5);
  padding: var(--s5) 0 var(--s6);
  border-bottom: 1px solid var(--gruen-linie);
}

/* Dieselben Strichzeichen wie im Mosaik, hier klein und voll sichtbar neben dem Titel */
.nutzen__zeichen {
  grid-row: 1 / 3;
  width: 48px;
  height: 48px;
  fill: none;
  stroke: var(--gruen-akzent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nutzen__zeile h3 {
  margin: 0 0 var(--s2);
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.15;
  color: var(--gruen);
}

.nutzen__zeile p { margin: 0; max-width: 38em; font-size: var(--t-text); line-height: 1.6; color: var(--tinte-leise); }

/* ---------- Werte & Kultur: Zitat, darunter zwei versetzte Stufen von 1919 bis heute ---------- */

.werte {
  padding: var(--s9) var(--rand);
  background: var(--weiss);
  color: var(--tinte);
}

.werte__zitat { margin: 0; }
/* Auf der Hub-Seite steht das Zitat mittig über den beiden Etappen */
.werte > .werte__zitat { margin-bottom: var(--s7); text-align: center; }

.werte__zitat p {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: var(--t-aussage-gross);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--gruen);
}

/* Satz unter dem Zitat (Berufsseiten, .werte--mitte in beruf.css) */
.werte__satz { margin: var(--s5) 0 0; max-width: 34em; font-size: var(--t-gross); line-height: 1.55; color: var(--tinte-leise); }

/* Jede Stufe ist eine Zeile mit durchgehenden Linien oben und unten; das Feld darin
   steht bei 1919 links, bei heute nach rechts versetzt und überlappt die erste Stufe */
.etappe {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  border-top: 1px solid var(--gruen-linie);
}

.etappe:last-child { border-bottom: 1px solid var(--gruen-linie); }

.etappe__feld {
  grid-column: 1 / span 7;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s6);
  padding: var(--s6);
  border-left: 1px solid var(--gruen-linie);
  border-right: 1px solid var(--gruen-linie);
}

.etappe--heute .etappe__feld { grid-column: 6 / -1; }

/* Im freien Teil jeder Zeile eine kurze Aussage, die die beiden Etappen verbindet */
.etappe__aussage {
  grid-row: 1;
  grid-column: 8 / -1;
  align-self: center;
  margin: 0;
  padding: var(--s6);
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.15;
  color: var(--gruen);
  text-wrap: balance;
}

.etappe--heute .etappe__aussage { grid-column: 1 / 6; text-align: right; }
.etappe__feld { grid-row: 1; }

.etappe__zahl {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(64px, 7.6vw, 124px);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--gruen);
}

.etappe__zahl span {
  display: block;
  margin-top: var(--s2);
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: var(--t-klein);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--tinte-leise);
}

.etappe__text { margin: 0; max-width: 34em; font-size: var(--t-text); line-height: 1.6; color: var(--tinte-leise); }
.etappe__text p { margin: 0; }

.etappe__text h3 {
  margin: 0 0 var(--s2);
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.15;
  color: var(--gruen);
}

/* ---------- Abschluss und direkter Draht: Ergänzungen der Ausbildungsseite ---------- */

/* Langer Aufruf aus dem Text: etwas kleiner, damit er in drei Zeilen bleibt */
.abschluss__titel--lang { font-size: clamp(38px, 4.4vw, 68px); line-height: 1.04; }

/* Praktikum als eigener Absatz zwischen Aufruf und Einstiegswegen */
.einstieg__frage {
  margin: var(--s5) 0 0;
  max-width: 34em;
  font-size: var(--t-text);
  line-height: 1.55;
  color: rgba(255,255,255,.8);
}

.einstieg__frage b { display: block; margin-bottom: var(--s1); font-family: var(--schrift-titel); font-size: var(--t-h3); color: var(--weiss); }

.direkt__satz { max-width: 30em; }
.direkt__satz .direkt__person { margin-top: var(--s3); color: var(--weiss); }

/* ---------- Kleinere Bildschirme ---------- */

@media (max-width: 1180px) {
  .etappe__feld { grid-column: 1 / span 9; }
  .etappe--heute .etappe__feld { grid-column: 4 / -1; }
  .etappe__aussage { grid-column: 10 / -1; padding: var(--s5) var(--s4); font-size: clamp(20px, 2.2vw, 26px); }
  .etappe--heute .etappe__aussage { grid-column: 1 / 4; }
}

@media (max-width: 960px) {
  .nutzen { grid-template-columns: 1fr; }
  .nutzen__kopf { position: static; padding-bottom: var(--s5); }
}

@media (max-width: 860px) {
  .nutzen { padding: var(--s7) var(--rand); }
  .nutzen__zeile { grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--s3); padding: var(--s4) 0 var(--s5); }
  .nutzen__zeichen { width: 36px; height: 36px; }
  .werte { padding: var(--s7) var(--rand); }
  .werte > .werte__zitat { margin-bottom: var(--s6); }
  .werte__satz { font-size: 16px; }
  /* Auf dem Handy Zahl über dem Text; die Stufen bleiben leicht versetzt */
  .etappe__feld { grid-column: 1 / span 11; grid-template-columns: 1fr; row-gap: var(--s4); padding: var(--s5); }
  .etappe--heute .etappe__feld { grid-column: 2 / -1; }
  /* Die Aussage steht als eigene Zeile über ihrem Feld */
  .etappe__feld { grid-row: 2; }
  .etappe__aussage,
  .etappe--heute .etappe__aussage { grid-row: 1; grid-column: 1 / -1; padding: var(--s5) 0 var(--s4); text-align: left; }
  /* Ohne durchgehende Linien: jedes Feld bekommt seinen eigenen Rahmen */
  .etappe, .etappe:last-child { border: 0; }
  .etappe__feld { border: 1px solid var(--gruen-linie); }
  .berufe { padding: var(--s7) 0; }
  .berufe__kopf { display: block; padding-bottom: var(--s5); }
  .berufe__kopf p { font-size: 16px; }
  /* Bereichsknöpfe in einer Zeile, die sich wischen lässt, statt drei Reihen */
  .berufe__gruppen {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: var(--s4) calc(-1 * var(--rand)) 0;
    padding: 2px var(--rand);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .berufe__gruppen::-webkit-scrollbar { display: none; }
  .gruppe { flex: none; white-space: nowrap; }
  /* Der lange Hero-Knopf aus dem Text darf auf dem Handy umbrechen */
  .hero .btn--gross { white-space: normal; }
}