.bewerbung {
  width: 100%;
  max-width: 100rem;
  margin: 3.2rem auto 0;
  padding: 2.4rem 2rem 2.8rem;
  background: var(--farbe-weiss);
  border: .1rem solid var(--farbe-linie);
  border-radius: 1.6rem;
  box-shadow: var(--schatten-medium);
  scroll-margin-top: 10rem;
  font-family: Inter, sans-serif;
  color: var(--farbe-tinte);
}
.bewerbung[hidden], .bewerbung [hidden] { display: none; }

.bewerbung__fortschritt { margin-bottom: 2.8rem; }
.bewerbung__schrittzahl {
  color: var(--farbe-text-zweit);
  font: 600 1.3rem/1.4 Inter, sans-serif;
  letter-spacing: .1rem;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.bewerbung__balken {
  height: .6rem;
  border-radius: .6rem;
  background: var(--farbe-flaeche);
  overflow: hidden;
}
.bewerbung__fuellung {
  display: block;
  height: 100%;
  background: var(--farbe-tinte);
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(.1667);
  transition: transform var(--dauer-4) var(--kurve-aus);
}

.bewerbung__falle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bewerbung__seite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.8rem; }
.bewerbung__titel {
  font: 800 2.6rem/1.15 Inter, sans-serif;
  letter-spacing: -.06rem;
  margin: 0;
  outline: none;
}
.bewerbung__hinweis {
  color: var(--farbe-text-zweit);
  font: 400 1.5rem/1.5 Inter, sans-serif;
  margin: -1.6rem 0 0;
}

.bewerbung__frage { border: 0; margin: 0; padding: 0; min-width: 0; }
.bewerbung__legende {
  display: block;
  padding: 0;
  margin: 0 0 1.2rem;
  font: 600 1.8rem/1.35 Inter, sans-serif;
}

.bewerbung__karten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .8rem;
}
.bewerbung__karten--kurz { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

.bewerbung__karte {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-width: 0;
  min-height: 5.6rem;
  padding: 1.2rem 1.6rem;
  background: var(--farbe-weiss);
  border: .15rem solid var(--farbe-linie);
  border-radius: 1.2rem;
  cursor: pointer;
  transition: border-color var(--dauer-2) var(--kurve-weich), background-color var(--dauer-2) var(--kurve-weich);
}
@media (hover: hover) {
  .bewerbung__karte:hover { border-color: var(--farbe-text-grau); }
}
.bewerbung__karte:has(.bewerbung__wahl:checked) {
  border-color: var(--farbe-tinte);
  background: var(--farbe-flaeche-karte);
}
.bewerbung__karte:has(.bewerbung__wahl:focus-visible) {
  outline: .3rem solid var(--farbe-violett-link);
  outline-offset: .2rem;
}
.bewerbung__wahl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.bewerbung__punkt {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: .2rem solid var(--farbe-text-stumm);
  background: var(--farbe-weiss);
  transition: border-color var(--dauer-2) var(--kurve-weich), border-width var(--dauer-2) var(--kurve-weich);
}
.bewerbung__wahl:checked + .bewerbung__punkt {
  border-color: var(--farbe-tinte);
  border-width: .6rem;
}
.bewerbung__kartentext {
  min-width: 0;
  font: 500 1.7rem/1.3 Inter, sans-serif;
  overflow-wrap: break-word;
}

.bewerbung__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.8rem;
}
.bewerbung__feld { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; min-width: 0; }
.bewerbung__etikett { font: 600 1.6rem/1.35 Inter, sans-serif; }
.bewerbung__freiwillig { color: var(--farbe-text-zweit); font-weight: 400; }
.bewerbung__eingabe {
  width: 100%;
  min-width: 0;
  height: 5.6rem;
  padding: 0 1.6rem;
  font: 400 1.7rem/1.4 Inter, sans-serif;
  color: var(--farbe-tinte);
  background: var(--farbe-weiss);
  border: .15rem solid var(--farbe-linie);
  border-radius: 1rem;
  appearance: none;
  transition: border-color var(--dauer-2) var(--kurve-weich);
}
.bewerbung__eingabe::placeholder { color: var(--farbe-text-stumm); }
.bewerbung__eingabe:focus { border-color: var(--farbe-tinte); outline: none; }
.bewerbung__eingabe:focus-visible { outline: .3rem solid var(--farbe-violett-link); outline-offset: .2rem; }
.bewerbung__eingabe--text { height: auto; min-height: 16rem; padding: 1.4rem 1.6rem; resize: vertical; }
.bewerbung__eingabe[aria-invalid="true"] { border-color: var(--farbe-fehler); }
.bewerbung__frage[data-ungueltig] .bewerbung__karte { border-color: var(--farbe-fehler); }

.bewerbung__meldung {
  margin: .8rem 0 0;
  padding-left: 1.2rem;
  border-left: .3rem solid var(--farbe-fehler);
  font: 600 1.5rem/1.4 Inter, sans-serif;
  color: var(--farbe-tinte);
}
.bewerbung__feld .bewerbung__meldung { margin-top: 0; }

.bewerbung__recht {
  color: var(--farbe-text-zweit);
  font: 400 1.4rem/1.55 Inter, sans-serif;
  margin: 0;
}
.bewerbung__recht a { color: var(--farbe-tinte); text-decoration: underline; }

.bewerbung__fehler {
  margin-top: 2.8rem;
  padding: 1.6rem 1.8rem;
  border-radius: 1.2rem;
  border: .15rem solid var(--farbe-fehler);
  background: var(--farbe-weiss);
}
.bewerbung__fehlertext { margin: 0; font: 600 1.6rem/1.5 Inter, sans-serif; }
.bewerbung__ausweg { display: flex; flex-wrap: wrap; gap: .8rem 2.4rem; margin: 1.2rem 0 0; }
.bewerbung__ausweg a { color: var(--farbe-tinte); font: 600 1.6rem/1.4 Inter, sans-serif; text-decoration: underline; }

.bewerbung__leiste {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 3.2rem;
}
.bewerbung__leiste .knopf { min-width: 0; font-size: 1.8rem; }
.bewerbung .bewerbung__leiste .knopf__innen { padding: .8rem 2rem; white-space: nowrap; }
.bewerbung__weiter { flex: 1 1 auto; margin-left: auto; }
.bewerbung__zurueck { flex: 0 0 auto; }
.bewerbung__leiste .knopf:disabled { cursor: progress; }
.bewerbung__leiste .knopf:disabled .knopf__innen { opacity: .6; }

@media screen and (width >= 641px) {
  .bewerbung { padding: 3.6rem 4rem 4rem; }
  .bewerbung__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bewerbung__karten--kurz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bewerbung__zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .bewerbung__weiter { flex: 0 0 auto; }
  .bewerbung__leiste .knopf { font-size: 2rem; }
  .bewerbung .bewerbung__leiste .knopf__innen { padding: .8rem 4rem; }
}

@media screen and (width >= 1025px) {
  .bewerbung {
    margin-top: 5.6rem;
    padding: 5.6rem 6.4rem 6rem;
    border-radius: 2rem;
  }
  .bewerbung__fortschritt { margin-bottom: 4.4rem; }
  .bewerbung__schrittzahl { font-size: 1.8rem; margin-bottom: 1.4rem; }
  .bewerbung__balken { height: .8rem; }
  .bewerbung__seite { gap: 4rem; }
  .bewerbung__titel { font-size: 4rem; letter-spacing: -.12rem; }
  .bewerbung__hinweis { font-size: 2.2rem; margin-top: -2.4rem; }
  .bewerbung__legende { font-size: 2.6rem; margin-bottom: 1.8rem; }
  .bewerbung__karten { gap: 1.2rem; }
  .bewerbung__karte { min-height: 8rem; padding: 1.6rem 2.4rem; gap: 1.6rem; border-radius: 1.4rem; border-width: .2rem; }
  .bewerbung__punkt { width: 2.8rem; height: 2.8rem; border-width: .27rem; }
  .bewerbung__wahl:checked + .bewerbung__punkt { border-width: .8rem; }
  .bewerbung__kartentext { font-size: 2.3rem; }
  .bewerbung__zeile { gap: 2.8rem; }
  .bewerbung__feld { gap: 1.1rem; }
  .bewerbung__etikett { font-size: 2.2rem; }
  .bewerbung__eingabe { height: 7.6rem; padding: 0 2.2rem; font-size: 2.4rem; border-radius: 1.4rem; border-width: .2rem; }
  .bewerbung__eingabe--text { height: auto; min-height: 22rem; padding: 1.8rem 2.2rem; }
  .bewerbung__meldung { font-size: 2rem; padding-left: 1.6rem; border-left-width: .4rem; }
  .bewerbung__recht { font-size: 2rem; }
  .bewerbung__fehler { margin-top: 4rem; padding: 2.2rem 2.6rem; }
  .bewerbung__fehlertext, .bewerbung__ausweg a { font-size: 2.2rem; }
  .bewerbung__leiste { margin-top: 4.8rem; gap: 1.6rem; }
  .bewerbung .bewerbung__leiste .knopf__innen { padding: .8rem 5.6rem; }
}