/* Programmseite „Gut ankommen. Gut bleiben.“ (nachwuchskraefte.html, 11.11.2026).
   Nur für diese Seite, ergänzt style.css. Bausteine aus style.css werden
   wiederverwendet (seitenkopf, bilanz-liste, positionen, katalog-panel,
   kette, abschluss). Gestaltung nach der Broschüre: Haarlinien, Schwarz,
   Gelb als Fläche hinter schwarzer Schrift, Poppins und Public Sans.
   Signatur-Geste: die 30,9 % als sehr große Poppins-Zahl. */

.nk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Seitenkopf ---------- */
.nk-kopf .nk-pfad {
  margin: 0 0 1.4rem;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
}
.nk-kopf .nk-pfad a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-decoration-color: rgba(239, 229, 44, 0.7);
  text-underline-offset: 0.25em;
}
.nk-kopf .nk-pfad a:hover { color: var(--farbe-weiss); }
.nk-kopf h1 {
  font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.nk-gelb { color: var(--farbe-gelb); }
.nk-kopf .nk-wer {
  margin-top: 1.2rem;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.45;
  color: var(--farbe-weiss);
  max-width: 44ch;
}
.nk-kopf .nk-wer span { color: var(--farbe-gelb); }
.nk-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.75rem;
  margin-top: 1.8rem;
}
.nk-kopf .nk-aktionen { animation: eintreten 700ms 260ms ease both; }
.nk-dateiinfo { font-weight: 400; opacity: 0.7; }

/* ---------- Warum: die große Zahl ---------- */
.nk-haupt {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--raum-m);
  align-items: start;
  margin-top: var(--raum-m);
  padding-top: var(--raum-s);
  border-top: 2px solid var(--farbe-schwarz);
}
.nk-haupt-wert {
  margin: 0;
  max-width: none;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(5.5rem, 2.5rem + 12vw, 13rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: var(--farbe-schwarz);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.nk-haupt-wert span { font-size: 0.45em; letter-spacing: -0.02em; }
.nk-haupt-text { padding-top: 0.4rem; }
.nk-haupt-text > p:first-child {
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  line-height: 1.55;
}
.nk-haupt-text strong { color: var(--farbe-schwarz); font-weight: 600; }
.nk-hinweis {
  margin: 1.1rem 0 0.8rem;
  padding: 0.8rem 1rem;
  background: var(--farbe-gelb);
  color: var(--farbe-schwarz);
  font-size: 0.95rem;
  line-height: 1.5;
}
.nk-hinweis strong { font-family: 'Poppins', Arial, sans-serif; font-weight: 700; }

.nk-quelle {
  display: block;
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.45;
  color: #5E5D57;
}
.nk-quelle a, .nk-beleg a, .nk-q, .nk-zusatz a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(13, 13, 13, 0.35);
  text-underline-offset: 0.2em;
}
.nk-fakten { margin-top: var(--raum-m); }
.nk-fakten .bilanz-text { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); }
/* Werte wie in der Broschüre in Poppins (style.css setzt sie in Public Sans) */
.nk-fakten .bilanz-wert { font-family: 'Poppins', Arial, sans-serif; font-weight: 800; letter-spacing: -0.045em; }

.nk-stimme {
  margin-top: var(--raum-m);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--farbe-schwarz);
  color: var(--farbe-weiss);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.6rem var(--raum-m);
  align-items: start;
}
.nk-stimme h3 {
  margin: 0;
  color: var(--farbe-gelb);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
}
.nk-stimme-zahl {
  display: block;
  margin-bottom: 0.4rem;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.nk-stimme p { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 0.97rem; }
.nk-stimme .nk-quelle { grid-column: 2 / 4; margin-top: 0.6rem; color: rgba(255, 255, 255, 0.62); }
.nk-stimme .nk-quelle a { text-decoration-color: rgba(255, 255, 255, 0.4); }

/* ---------- Ansatz ---------- */
.nk-beleg {
  margin-top: 0.8rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--farbe-schwarz);
  font-size: 0.93rem;
}
.nk-beleg strong { color: var(--farbe-schwarz); }

/* ---------- Bausteine ---------- */
.nk-gruppe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  margin: var(--raum-m) 0 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nk-gruppe::before {
  content: "";
  width: 2rem;
  height: 0.3rem;
  background: var(--farbe-gelb);
}
.nk-gruppe span {
  font-family: 'Public Sans', Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.85rem;
  color: #5E5D57;
}
.nk-nr {
  display: inline-block;
  min-width: 2.1em;
  margin-right: 0.35em;
  padding: 0.1em 0.35em;
  background: var(--farbe-gelb);
  color: var(--farbe-schwarz);
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
  vertical-align: 0.1em;
  font-variant-numeric: tabular-nums;
}
.katalog-panel .nk-inhalt { grid-column: 3; grid-row: 1 / span 2; }
.katalog-panel .nk-inhalt .katalog-punkte { margin: 0.2rem 0 0; }
.nk-zusatz {
  margin: 0.9rem 0 0;
  padding-left: 1.35rem;
  font-size: 0.88rem;
  line-height: 1.5;
}
.nk-zusatz strong { color: var(--farbe-schwarz); }
.nk-bausteine .katalog-panel .angebot h3 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); }
@media (max-width: 760px) {
  .katalog-panel .nk-inhalt { grid-column: 1; grid-row: auto; margin-top: 1rem; }
}

/* ---------- Formate ---------- */
.nk-formate {
  margin: var(--raum-m) 0 0;
  border-top: 2px solid var(--farbe-schwarz);
}
.nk-format {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr) 10rem;
  gap: 0.4rem var(--raum-s);
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(13, 13, 13, 0.14);
}
.nk-format dt {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.nk-format dd { margin: 0; color: var(--farbe-grau); max-width: 60ch; }
.nk-format .nk-dauer {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--farbe-schwarz);
  text-align: right;
}

.nk-paket {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: var(--raum-s) var(--raum-m);
  margin-top: var(--raum-m);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--farbe-schwarz);
  color: var(--farbe-weiss);
}
.nk-paket h3 {
  margin: 0;
  color: var(--farbe-gelb);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
}
.nk-paket .katalog-punkte { margin: 0.2rem 0 0; color: rgba(255, 255, 255, 0.85); }
.nk-paket .katalog-punkte li::before,
.nk-paket .katalog-punkte li::after { background: var(--farbe-gelb); }

.nk-inklusive {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: var(--raum-s) var(--raum-m);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: #F4F2EA;
}
.nk-inklusive h3 { margin: 0; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); }
.nk-inklusive .katalog-punkte { columns: 2; column-gap: var(--raum-m); margin: 0.2rem 0 0; }
.nk-inklusive .katalog-punkte li { break-inside: avoid; }

/* ---------- Über mich ---------- */
.nk-ueber-raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--raum-m);
  align-items: start;
}
.nk-ueber h2 {
  font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  max-width: 18ch;
}
.nk-foto {
  margin: 0;
  background: var(--farbe-schwarz);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.nk-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 20%;
}
.nk-stationen {
  margin: var(--raum-s) 0 1.2rem;
  border-top: 2px solid var(--farbe-schwarz);
}
.nk-stationen div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--raum-s);
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(13, 13, 13, 0.14);
  font-size: 0.95rem;
  line-height: 1.5;
}
.nk-stationen dt { font-family: 'Poppins', Arial, sans-serif; font-weight: 600; font-size: 0.9rem; }
.nk-stationen dd { margin: 0; color: var(--farbe-grau); }
.nk-ueber .hero-textlink { text-decoration-color: var(--farbe-schwarz); }
.nk-zitat {
  margin: var(--raum-m) 0 0;
  padding-left: 1.4rem;
  border-left: 0.45rem solid var(--farbe-gelb);
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--farbe-schwarz);
  max-width: 34ch;
}

/* ---------- Zusammenarbeit ---------- */
.nk-fragen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-s) var(--raum-m);
  margin-top: var(--raum-l);
}
.nk-fragen > div { border-top: 1px solid rgba(13, 13, 13, 0.14); padding-top: 1rem; }
.nk-fragen h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.nk-fragen p { margin: 0; font-size: 0.97rem; }

/* ---------- Quellen ---------- */
.nk-quellen { scroll-margin-top: 100px; }
.nk-lesehilfe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--raum-s) var(--raum-m);
  margin-top: var(--raum-m);
}
.nk-lesehilfe > div { border-top: 2px solid var(--farbe-schwarz); padding-top: 0.9rem; }
.nk-lesehilfe h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.nk-lesehilfe p { margin: 0; font-size: 0.95rem; }
.nk-liste {
  list-style: none;
  counter-reset: q;
  margin: var(--raum-m) 0 0;
  padding: 0;
  border-top: 2px solid var(--farbe-schwarz);
}
.nk-liste li {
  counter-increment: q;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(13, 13, 13, 0.14);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--farbe-grau);
  scroll-margin-top: 110px;
  overflow-wrap: anywhere;
}
.nk-liste li::before {
  content: counter(q);
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 700;
  color: var(--farbe-schwarz);
}
.nk-liste li > * { grid-column: 2; }
.nk-liste li strong { color: var(--farbe-schwarz); font-weight: 600; }
.nk-liste a {
  color: var(--farbe-schwarz);
  text-decoration: underline;
  text-decoration-color: rgba(13, 13, 13, 0.35);
  text-underline-offset: 0.2em;
}
.nk-liste li:target { background: #F4F2EA; }

/* ---------- Abschluss ---------- */
.abschluss .nk-aktionen { margin-top: 1.6rem; }
.abschluss .nk-direkt {
  margin-top: 1.6rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.7);
}
.abschluss .nk-direkt a {
  color: var(--farbe-weiss);
  text-decoration: underline;
  text-decoration-color: var(--farbe-gelb);
  text-underline-offset: 0.2em;
}

/* ---------- Handy und Tablet ---------- */
@media (max-width: 900px) {
  .nk-stimme { grid-template-columns: 1fr 1fr; }
  .nk-stimme h3 { grid-column: 1 / -1; margin-bottom: 0.4rem; }
  .nk-stimme .nk-quelle { grid-column: 1 / -1; }
  .nk-format { grid-template-columns: 10rem minmax(0, 1fr); }
  .nk-format .nk-dauer { grid-column: 2; text-align: left; }
  .nk-fragen { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nk-haupt { grid-template-columns: 1fr; gap: 1rem; }
  .nk-ueber-raster { grid-template-columns: 1fr; }
  .nk-foto { max-width: 360px; aspect-ratio: 1; }
  .nk-paket, .nk-inklusive { grid-template-columns: 1fr; }
  .nk-lesehilfe { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nk-stimme { grid-template-columns: 1fr; }
  .nk-format { grid-template-columns: 1fr; gap: 0.25rem; }
  .nk-format .nk-dauer { grid-column: 1; }
  .nk-inklusive .katalog-punkte { columns: 1; }
  .nk-stationen div { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* Design-Prüfung 11.11.2026: Etiketten der Randspalte nicht unter 11 px,
   Gruppenzeile bricht am Handy um und braucht mehr Zeilenhöhe. */
.nk-bausteine .katalog-marg-kopf { font-size: 0.72rem; }
.nk-gruppe { line-height: 1.4; }