/* ── Bewerbungsformular: Datei-Upload ──────────────────────────────────
   Die Textfelder (.contact-form__field, __input, __privacy, __error …)
   nutzen bewusst das bestehende, global gebündelte .contact-form-Styling
   aus ueber-uns.css (main.css) — hier nur, was dafür wirklich neu ist:
   der native Datei-Input, umgestylt über ::file-selector-button statt
   über ein verstecktes Input + Fake-Button (weniger Code, nativ
   barrierefrei, moderne Evergreen-Browser unterstützen es durchgängig). */

.bewerbung-form__file-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-md, 18px);
  font-weight: 700;
  color: var(--c-dark, #2D2D2B);
}

.bewerbung-form__file {
  display: block;
  width: 100%;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-sm, 14px);
  color: var(--c-dark, #2D2D2B);
}

.bewerbung-form__file::file-selector-button {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-sm, 14px);
  font-weight: 700;
  color: var(--c-ink, #1a1914);
  background: var(--gradient-gold, linear-gradient(158.2deg, #FDE298 14.29%, #D29F13 97.14%));
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  margin-right: 14px;
  cursor: pointer;
  transition: filter 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  .bewerbung-form__file::file-selector-button:hover { filter: brightness(1.06); }
}

.bewerbung-form__hint {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-xs, 13px);
  color: var(--c-muted, #767572);
}

/* ── Liste der ausgewählten Dateien ────────────────────────────────────── */
.bewerbung-form__file-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bewerbung-form__file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--c-white, #fff);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-sm, 14px);
  color: var(--c-dark, #2D2D2B);
}
.bewerbung-form__file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bewerbung-form__file-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  color: #b91c1c;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-xs, 13px);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ── Hero: helle Variante mit Bild rechts ─────────────────────────────
   Der projektweite .hero ist dunkel mit weißer Schrift (hero.css) — diese
   Seite soll hell mit schwarzer Schrift sein, deshalb Hintergrund-Layer
   und Textfarben hier gezielt überschrieben statt hero.css anzufassen
   (das würde alle anderen Hero-Seiten mitverändern). Spaltenaufteilung
   bewusst NICHT überschrieben — bleibt beim projektweiten 1fr-1fr-Grid
   aus hero.css (ein 40/60-Split ließ den langen Titel zu schmal umbrechen). */
.bewerbung-hero.hero {
  background: var(--c-cream, #F1EFE9);
  box-shadow: none;
}
.bewerbung-hero.hero::before,
.bewerbung-hero.hero::after,
.bewerbung-hero .hero__bg {
  display: none;
}

/* Grid-/Flex-Items schrumpfen per Spezifikation nie unter ihre eigene
   Inhaltsbreite (min-width:auto), egal was width/max-width sagen — ein
   einzelnes Kind mit zu breitem Inhalt (Bild, langes Wort, Button-Text)
   zieht dadurch die ganze Spalte/Zeile in die Breite. Auf Mobil (1-spaltiges
   Grid) reicht das bis zum ganzen .hero__inner durch. min-width:0 an jeder
   Stufe der Kette schaltet das ab. */
.bewerbung-hero .hero__inner,
.bewerbung-hero .hero__left,
.bewerbung-hero .hero__right,
.bewerbung-hero .hero__right picture {
  min-width: 0;
}

.bewerbung-hero .hero__eyebrow { color: var(--c-gold-text, #8B6200); }
.bewerbung-hero .hero__body { color: var(--c-dark, #2D2D2B); }

/* "Anwendungsentwicklung" ist ein einzelnes, nicht umbrechbares 22-Zeichen-
   Wort — ohne Sicherheitsnetz breiter als knappe Viewports, was die ganze
   Hero-Spalte in die Breite zwingt. overflow-wrap greift nur, wenn ein Wort
   wirklich nicht passt (bricht am Ende der Zeile). hyphens:auto wurde
   wieder entfernt — bei "Fachinformatiker/in" (Schrägstrich) hat Chromes
   Trennlogik mitten im Wort ohne Trennstrich umgebrochen, auch auf breiten
   Laptop-Screens mit eigentlich genug Platz. */
.bewerbung-hero .hero__headline {
  color: var(--c-dark, #2D2D2B);
  overflow-wrap: break-word;
}

/* .btn setzt projektweit white-space:nowrap — bei "Ausbildung im Detail
   ansehen" (langer Label-Text) im gestapelten .hero__ctas--stacked reicht
   das auf schmalen Screens nicht, der Text zwingt dadurch die ganze
   Hero-Spalte in die Breite (min-width:auto bei Flex-Items lässt den
   Container nicht unter die Inhaltsbreite schrumpfen). Hier gezielt
   Umbruch erlauben statt die globale .btn-Regel anzufassen. */
.bewerbung-hero .hero__ctas--stacked .btn {
  white-space: normal;
}

.bewerbung-hero .btn-ghost {
  color: var(--c-dark, #2D2D2B);
  border-color: rgba(45, 45, 43, 0.35);
}
@media (hover: hover) and (pointer: fine) {
  .bewerbung-hero .btn-ghost:hover {
    border-color: rgba(45, 45, 43, 0.6);
    background: rgba(45, 45, 43, 0.06);
  }
}

/* ── "Ausbildung auf einen Blick" ─────────────────────────────────────
   .konzept-detail wird auch von anderen Konzept-Seiten genutzt, daher
   hier über .bewerbung-detail skopiert statt konzept.css global zu ändern. */
.bewerbung-detail .konzept-detail__title {
  color: var(--c-dark, #2D2D2B);
}
.bewerbung-detail .konzept-detail__grid {
  align-items: center;
}

/* ── "Das lernst du bei uns" ───────────────────────────────────────────
   Eigene, einfache Karten-Liste — keine bestehende Komponente deckt eine
   Überschrift+Beschreibung-Kombi in dieser Form ab. */
.lernst-du {
  background: var(--c-cream, #F1EFE9);
  padding-block: clamp(56px, 6vw, 88px);
}
.lernst-du__inner {
  max-width: var(--page-max, 1440px);
  margin-inline: auto;
  padding-inline: var(--page-pad, clamp(20px, 4vw, 60px));
}
.lernst-du__title {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-h3, clamp(24px, 2.6vw, 32px));
  font-weight: 700;
  color: var(--c-dark, #2D2D2B);
  margin: 0 0 32px;
}
.lernst-du__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.lernst-du__item {
  background: var(--c-white, #fff);
  border-radius: 16px;
  padding: 24px;
  border-top: 3px solid var(--c-gold, #D29F13);
}
.lernst-du__item h3 {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-md, 18px);
  font-weight: 700;
  color: var(--c-dark, #2D2D2B);
  margin: 0 0 8px;
}
.lernst-du__item p {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-sm, 14px);
  line-height: 1.55;
  color: var(--c-muted, #767572);
  margin: 0;
}