/*
 * Schurz Karriere, Website
 *
 * Ohne eigene Einstellungen übernimmt alles Schrift und Farben des Themes.
 * Linien und leise Texte entstehen aus der Textfarbe der Umgebung, so passt
 * die Liste auch auf dunkle Flächen. Alle Werte stehen als CSS-Variablen im
 * Bereich .skr und nicht global, damit nichts auf den Rest der Seite abfärbt.
 *
 * Was ein Theme bestimmen darf, etwa die Rundung der Knöpfe, steht in
 * :where() und hat damit keine Spezifität. Was für den Aufbau nötig ist,
 * setzt sich gegen das Theme durch.
 */

.skr {
    /* Knöpfe folgen in Block-Themes den Farben des Themes. */
    --skr-akzent: var(--wp--preset--color--contrast, #1d1d1b);
    --skr-akzent-text: var(--wp--preset--color--base, #ffffff);

    --skr-linie: color-mix(in srgb, currentColor 16%, transparent);
    --skr-rahmen: color-mix(in srgb, currentColor 42%, transparent);
    --skr-leise: color-mix(in srgb, currentColor 72%, transparent);
    --skr-flaeche: color-mix(in srgb, currentColor 5%, transparent);
    --skr-feld: transparent;
    --skr-fehler: #b3261e;

    --skr-radius: 0px;
    --skr-hoehe: 3rem;
    --skr-titel-groesse: 1.25em;
    --skr-abschnitt-abstand: 2.5rem;
    /* Faktor für die Luft in Listen und Formularen, siehe Reiter Design. */
    --skr-luft: 1;

    box-sizing: border-box;
    width: 100%;
    text-align: start;
}

.skr *,
.skr *::before,
.skr *::after {
    box-sizing: border-box;
}

/* Versteckt heißt versteckt, auch wenn eine Regel mit mehr Gewicht
   display setzt, etwa bei den Knöpfen. */
.skr [hidden],
.skr[hidden] {
    display: none !important;
}

.skr-liste,
.skr-suche,
.skr-stelle,
.skr-teil,
.skr-bewerbung,
.skr-einstieg {
    container-type: inline-size;
}

.skr .skr-unsichtbar {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Knöpfe und Felder
   ────────────────────────────────────────────────────────────────────────── */

/*
 * Manche klassischen Themes gestalten jeden <button> mit Regeln wie
 * button:not(:hover):not(:active):not(.has-background). Das :not(#skr) hebt
 * die Knöpfe des Plugins auf die Stufe einer ID, ohne dass es eine ID gibt.
 * So sehen Links und Knöpfe des Plugins in jedem Theme gleich aus.
 */
.skr .skr-knopf:not(#skr) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--skr-hoehe);
    margin: 0;
    padding: 0.625rem 1.5rem;

    background-color: var(--skr-akzent);
    border: 1px solid var(--skr-akzent);
    box-shadow: none;
    color: var(--skr-akzent-text);

    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
    cursor: pointer;
}

.skr .skr-knopf:not(#skr):hover,
.skr .skr-knopf:not(#skr):active {
    background-color: color-mix(in srgb, var(--skr-akzent) 84%, var(--skr-akzent-text));
    border-color: color-mix(in srgb, var(--skr-akzent) 84%, var(--skr-akzent-text));
    color: var(--skr-akzent-text);
}

.skr .skr-knopf:not(#skr):focus-visible {
    outline: 2px solid var(--skr-akzent);
    outline-offset: 3px;
}

:where(.skr) :where(.skr-knopf) {
    border-radius: var(--skr-radius);
    font: inherit;
    font-weight: 600;
}

.skr .skr-textknopf:not(#skr) {
    appearance: none;
    display: inline;
    min-height: 0;
    margin: 0;
    padding: 0;

    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;

    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.skr .skr-label {
    display: block;
    margin: 0;
    color: inherit;
    font-size: 0.875em;
    font-weight: 600;
    line-height: 1.3;
}

.skr .skr-eingabe {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: var(--skr-hoehe);
    margin: 0;
    padding: 0.625rem 0.875rem;

    background: var(--skr-feld);
    border: 1px solid var(--skr-rahmen);
    border-radius: var(--skr-radius);
    box-shadow: none;
    color: inherit;

    font: inherit;
    /* Ab 16 Pixel zoomt iOS beim Antippen nicht hinein. */
    font-size: max(1em, 16px);
    line-height: 1.4;
}

/* Einzeilige Felder genau so hoch wie die Knöpfe, unabhängig von der
   Schriftgröße des Themes. */
.skr input.skr-eingabe,
.skr select.skr-eingabe {
    height: var(--skr-hoehe);
    padding-top: 0;
    padding-bottom: 0;
}

.skr .skr-eingabe:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.skr .skr-eingabe::placeholder {
    color: var(--skr-leise);
    opacity: 1;
}

.skr .skr-auswahl {
    position: relative;
    display: block;
}

.skr select.skr-eingabe {
    appearance: none;
    padding-right: 2.75rem;
    background-image: none;
    cursor: pointer;
}

.skr .skr-auswahl::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.125rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.skr select.skr-eingabe option {
    color: initial;
}

/* ──────────────────────────────────────────────────────────────────────────
   Suche und Filterleiste
   ────────────────────────────────────────────────────────────────────────── */

.skr .skr-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin: 0;
}

.skr-liste .skr-leiste {
    margin-bottom: 2rem;
}

.skr .skr-feld {
    display: flex;
    flex: 1 1 11rem;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
}

.skr .skr-feld--suche {
    flex: 2 1 16rem;
}

.skr .skr-feld--knopf {
    flex: 0 0 auto;
}

/* In der Liste: oben Suchfeld und Knopf, darunter die Filter in gleich
   breiten Spalten. */
.skr .skr-leiste--liste {
    display: grid;
    gap: 1rem;
}

.skr .skr-leiste-suche {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.skr .skr-leiste-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    align-items: end;
    gap: 1rem;
}

@container (max-width: 36rem) {
    .skr-suche .skr-feld,
    .skr-suche .skr-feld--suche,
    .skr-suche .skr-feld--knopf {
        flex-basis: 100%;
    }

    .skr-suche .skr-feld--knopf .skr-knopf {
        width: 100%;
    }
}

@container (max-width: 30rem) {
    .skr .skr-leiste-suche {
        flex-wrap: wrap;
    }

    .skr .skr-leiste-suche .skr-feld {
        flex-basis: 100%;
    }

    .skr .skr-leiste-suche .skr-knopf,
    .skr .skr-leiste-filter .skr-knopf {
        width: 100%;
    }

    /* Zwei Filter je Zeile. Bleibt einer übrig, nimmt er die ganze Zeile. */
    .skr .skr-leiste-filter {
        grid-template-columns: 1fr 1fr;
    }

    .skr .skr-leiste-filter > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Stellenliste
   ────────────────────────────────────────────────────────────────────────── */

.skr .skr-liste-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin: 0 0 1rem;
}

.skr .skr-treffer {
    margin: 0;
    font-weight: 600;
}

.skr .skr-zuruecksetzen {
    color: inherit;
    font-size: 0.875em;
}

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

.skr .skr-eintrag {
    position: relative;
    margin: 0;
    padding: calc(1.25rem * var(--skr-luft)) 0;
    border-bottom: 1px solid var(--skr-linie);
}

.skr .skr-eintrag::before,
.skr .skr-eintrag::marker {
    content: none;
}

.skr .skr-eintrag-titel {
    margin: 0;
    font-size: var(--skr-titel-groesse);
    line-height: 1.3;
}

.skr .skr-eintrag-titel a {
    color: inherit;
    text-decoration: none;
}

/* Die ganze Zeile ist anklickbar, nicht nur der Titel. */
.skr .skr-eintrag-titel a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.skr .skr-eintrag:hover .skr-eintrag-titel a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.skr .skr-eintrag-titel a:focus-visible {
    outline: none;
}

.skr .skr-eintrag:has(.skr-eintrag-titel a:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.skr .skr-eintrag-daten {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin: 0.5rem 0 0;
    padding: 0;
    color: var(--skr-leise);
    font-size: 0.9375em;
    list-style: none;
}

.skr .skr-eintrag-datum {
    margin: 0;
    padding: 0;
}

.skr .skr-eintrag-datum::before {
    content: none;
}

.skr .skr-eintrag-text {
    max-width: 68ch;
    margin: 0.75rem 0 0;
}

.skr .skr-leer {
    margin: 1.5rem 0;
}

.skr .skr-seiten {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 2rem 0 0;
}

.skr .skr-seite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.875rem;
    border: 1px solid var(--skr-linie);
    border-radius: var(--skr-radius);
    color: inherit;
    text-decoration: none;
}

.skr a.skr-seite:hover {
    border-color: var(--skr-rahmen);
}

.skr .skr-seite--aktuell {
    border-color: currentColor;
    font-weight: 600;
}

.skr .skr-seite--luecke {
    min-width: auto;
    padding: 0 0.25rem;
    border-color: transparent;
}

.skr .skr-mehr {
    margin: 1.5rem 0 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Stellenseite
   ────────────────────────────────────────────────────────────────────────── */

.skr-stelle {
    display: flex;
    flex-direction: column;
    gap: var(--skr-abschnitt-abstand);
}

.skr-stelle > * {
    margin-top: 0;
    margin-bottom: 0;
}

.skr .skr-titel {
    margin: 0;
}

.skr .skr-zurueck {
    margin: 0;
}

.skr .skr-eckdaten-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1.25rem 2rem;
    margin: 0;
    padding: calc(1.5rem * var(--skr-luft)) 0;
    border-top: 1px solid var(--skr-linie);
    border-bottom: 1px solid var(--skr-linie);
}

.skr .skr-eckdatum {
    min-width: 0;
    margin: 0;
}

.skr .skr-eckdatum dt,
.skr .skr-eckdatum dd {
    padding: 0;
}

.skr .skr-eckdatum dt {
    margin: 0 0 0.25rem;
    color: var(--skr-leise);
    font-size: 0.875em;
    font-weight: 400;
}

.skr .skr-eckdatum dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.skr .skr-eckdaten .skr-bewerben {
    margin: 1.5rem 0 0;
}

.skr .skr-einleitung {
    font-size: 1.125em;
}

.skr .skr-einleitung p,
.skr .skr-abschnitt p {
    margin: 0 0 1em;
}

.skr .skr-einleitung p:last-child,
.skr .skr-abschnitt p:last-child {
    margin-bottom: 0;
}

.skr .skr-abschnitt {
    margin: 0;
}

.skr .skr-beschreibung .skr-abschnitt {
    margin-top: var(--skr-abschnitt-abstand);
}

.skr .skr-beschreibung > :first-child {
    margin-top: 0;
}

.skr .skr-abschnitt-titel {
    margin: 0 0 0.75rem;
}

.skr .skr-abschnitt ul {
    margin: 0;
    padding-left: 1.25em;
    list-style: disc;
}

.skr .skr-abschnitt li {
    margin: 0.375rem 0;
    padding: 0;
}

.skr .skr-kontakt-text {
    margin: 0 0 1.25rem;
}

.skr .skr-kontakt-person {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.skr .skr-kontakt-bild {
    flex: none;
    width: 6rem;
    height: 6rem;
    margin: 0;
    border-radius: var(--skr-radius);
    object-fit: cover;
}

.skr .skr-kontakt-angaben p {
    margin: 0;
}

.skr .skr-kontakt-name {
    font-weight: 600;
}

.skr .skr-kontakt-rolle {
    color: var(--skr-leise);
}

.skr .skr-kontakt-angaben .skr-kontakt-wege {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.75rem;
}

.skr .skr-bewerben {
    margin: 0;
}

.skr .skr-teilen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--skr-linie);
}

.skr .skr-teilen-titel {
    margin: 0;
    font-weight: 600;
}

.skr .skr-teilen-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.skr .skr-teilen-liste li {
    margin: 0;
    padding: 0;
}

.skr .skr-teilen-liste li::before {
    content: none;
}

.skr .skr-teilen-liste li[hidden] {
    display: none;
}

.skr .skr-teilen-liste a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.skr .skr-abgelaufen {
    padding: 1rem 0;
    border-top: 2px solid currentColor;
    border-bottom: 1px solid var(--skr-linie);
}

.skr .skr-abgelaufen p {
    margin: 0;
}

.skr .skr-abgelaufen-text {
    font-weight: 600;
}

.skr .skr-abgelaufen-link {
    margin-top: 0.5rem !important;
}

/* Hinweise beim Einrichten, nur für angemeldete Redakteure sichtbar. */
.skr-hinweis-redaktion {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border: 1px dashed currentColor;
    font-size: 0.875rem;
    line-height: 1.5;
}

@container (max-width: 30rem) {
    .skr .skr-kontakt-person {
        flex-direction: column;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Bewerbungsformular
   ────────────────────────────────────────────────────────────────────────── */

.skr .skr-bewerbung-titel {
    margin: 0 0 0.5rem;
}

.skr .skr-bewerbung-stelle {
    margin: 0 0 1.5rem;
}

.skr .skr-meldung {
    margin: 0 0 1.5rem;
    padding: 0.875rem 1rem;
    background: var(--skr-flaeche);
    border-left: 3px solid currentColor;
}

.skr .skr-meldung--fehler {
    border-left-color: var(--skr-fehler);
}

.skr .skr-meldung p {
    margin: 0;
}

.skr .skr-meldung p + p {
    margin-top: 0.5rem;
}

.skr .skr-meldung:focus {
    outline: none;
}

.skr .skr-formular {
    margin: 0;
}

.skr .skr-pflichthinweis {
    margin: 0 0 1.5rem;
    color: var(--skr-leise);
    font-size: 0.875em;
}

/* Liste der Schritte, nur mit JavaScript sichtbar. */
.skr .skr-schritte {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin: 0 0 2rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid var(--skr-linie);
    list-style: none;
}

.skr .skr-schritte-eintrag {
    margin: 0;
    padding: 0;
}

.skr .skr-schritte-eintrag::before,
.skr .skr-schritte-eintrag::marker {
    content: none;
}

.skr .skr-schritte-knopf:not(#skr) {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    min-height: 0;
    margin: 0;
    padding: 0.25rem 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--skr-leise);
    font: inherit;
    font-size: 0.9375em;
    text-decoration: none;
    cursor: pointer;
}

.skr .skr-schritte-knopf:not(#skr):disabled {
    cursor: default;
}

.skr .ist-erledigt .skr-schritte-knopf:not(#skr) {
    color: inherit;
}

.skr .ist-aktuell .skr-schritte-knopf:not(#skr) {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.5em;
}

.skr .skr-schritte-zahl {
    font-variant-numeric: tabular-nums;
}

.skr .skr-schritt {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.skr .skr-schritt + .skr-schritt {
    margin-top: 2.5rem;
}

.skr-mit-js .skr-schritt {
    display: none;
}

.skr-mit-js .skr-schritt.ist-aktiv {
    display: block;
    margin-top: 0;
}

/* Beim Wechsel des Schritts bekommt er den Fokus, damit Screenreader die
   Überschrift vorlesen. Ein Rahmen um den ganzen Schritt hilft dabei nicht. */
.skr .skr-schritt:focus {
    outline: none;
}

.skr .skr-schritt-titel {
    display: block;
    width: 100%;
    margin: 0 0 1.25rem;
    padding: 0;
    font-size: 1.375em;
    font-weight: 600;
    line-height: 1.3;
}

.skr .skr-schritt-zahl {
    display: block;
    margin: 0 0 0.25rem;
    color: var(--skr-leise);
    font-size: 0.625em;
    font-weight: 400;
}

.skr .skr-schritt-text {
    margin: -0.5rem 0 1.5rem;
    color: var(--skr-leise);
}

.skr .skr-felder {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(1.25rem * var(--skr-luft)) 1rem;
}

.skr .skr-formular .skr-feld {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.skr .skr-feld--ganz {
    grid-column: 1 / -1;
}

.skr .skr-formular .skr-label {
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: 0.9375em;
}

.skr .skr-formular legend.skr-label {
    float: none;
    width: 100%;
}

.skr .skr-label--klein {
    font-size: 0.8125em !important;
    font-weight: 500;
}

.skr .skr-stern {
    margin-left: 0.15em;
}

.skr .skr-feldhilfe {
    margin: -0.25rem 0 0.5rem;
    color: var(--skr-leise);
    font-size: 0.875em;
}

.skr .skr-feldfehler {
    margin: 0.5rem 0 0;
    color: var(--skr-fehler);
    font-size: 0.875em;
    font-weight: 600;
}

.skr .ist-fehler .skr-eingabe,
.skr .ist-fehler .skr-datei {
    border-color: var(--skr-fehler);
}

.skr textarea.skr-eingabe {
    min-height: 8rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    line-height: 1.5;
    resize: vertical;
}

.skr input[type="date"].skr-eingabe {
    appearance: none;
}

/* Häkchen und Auswahlknöpfe */
.skr .skr-wahl {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.skr .skr-wahl--nebeneinander {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 2rem;
}

.skr .skr-haken {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 0;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}

.skr .skr-wahl .skr-haken {
    padding: 0.375rem 0;
}

.skr .skr-haken input {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.2em 0 0;
    accent-color: var(--skr-akzent);
}

.skr .skr-haken--klein {
    margin-top: 0.5rem;
    font-size: 0.875em;
}

.skr .skr-haken a {
    color: inherit;
    text-decoration: underline;
}

.skr .skr-datenschutz {
    margin-top: 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--skr-linie);
}

/* Dateien */
.skr .skr-datei {
    display: block;
    width: 100%;
    max-width: 100%;
    color: inherit;
    font: inherit;
    font-size: 0.9375em;
}

.skr .skr-datei::file-selector-button {
    margin: 0 1rem 0 0;
    padding: 0.625rem 1.25rem;
    background: transparent;
    border: 1px solid var(--skr-rahmen);
    border-radius: var(--skr-radius);
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.skr .skr-datei::file-selector-button:hover {
    border-color: currentColor;
}

.skr .skr-datei:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.skr .skr-dateiliste-titel {
    margin: 0 0 0.25rem;
    color: var(--skr-leise);
    font-size: 0.875em;
}

.skr .skr-dateiliste {
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.skr .skr-dateiliste--neu {
    margin: 0.75rem 0 0;
}

.skr .skr-dateiliste li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--skr-linie);
}

.skr .skr-dateiliste li::before {
    content: none;
}

.skr .skr-datei-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.skr .skr-datei-groesse {
    color: var(--skr-leise);
    font-size: 0.875em;
}

.skr .skr-dateiliste .skr-haken--klein {
    margin: 0 0 0 auto;
}

.skr .ist-entfernt .skr-datei-name {
    opacity: 0.6;
    text-decoration: line-through;
}

/* Stationen im Werdegang */
.skr .skr-station {
    margin: 0;
    padding: 0 0 1.25rem;
}

.skr .skr-station + .skr-station {
    padding-top: 1.25rem;
    border-top: 1px solid var(--skr-linie);
}

.skr .skr-station .skr-felder {
    gap: 0.75rem 1rem;
}

.skr .skr-station-weg:not(#skr) {
    margin-top: 0.75rem;
    font-size: 0.875em;
}

.skr .skr-station-neu:not(#skr) {
    font-weight: 600;
}

.skr-mit-js [data-skr-reserve] {
    display: none;
}

.skr .skr-zwischentitel {
    margin: 1rem 0 0;
    font-size: 1.125em;
}

.skr .skr-hinweistext {
    margin: 0;
    color: var(--skr-leise);
}

/* Knöpfe unter dem Formular */
.skr .skr-formular-knoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin: 2rem 0 0;
}

.skr .skr-formular-zurueck:not(#skr) {
    margin-right: auto;
}

.skr .skr-knopf--zweit:not(#skr) {
    background-color: transparent;
    border-color: var(--skr-rahmen);
    color: inherit;
}

.skr .skr-knopf--zweit:not(#skr):hover,
.skr .skr-knopf--zweit:not(#skr):active {
    background-color: transparent;
    border-color: currentColor;
    color: inherit;
}

.skr .skr-knopf[aria-disabled="true"],
.skr .skr-knopf:disabled {
    opacity: 0.6;
    cursor: progress;
}

.skr .skr-spaeter {
    margin: 1.5rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--skr-linie);
}

.skr .skr-spaeter-inhalt p {
    margin: 0 0 1rem;
    color: var(--skr-leise);
    font-size: 0.9375em;
}

.skr-mit-js .skr-spaeter-inhalt {
    margin-top: 1rem;
}

.skr .skr-honigtopf {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skr .skr-danke {
    padding: 1.5rem 0 0;
    border-top: 2px solid currentColor;
}

.skr .skr-danke:focus {
    outline: none;
}

.skr .skr-danke-titel {
    margin: 0 0 0.5rem;
}

.skr .skr-danke-text {
    margin: 0;
}

@container (max-width: 36rem) {
    .skr .skr-schritte {
        display: none !important;
    }
}

@container (max-width: 30rem) {
    .skr .skr-felder {
        grid-template-columns: minmax(0, 1fr);
    }

    .skr .skr-feld--halb {
        grid-column: 1 / -1;
    }

    .skr .skr-formular-knoepfe .skr-knopf {
        flex: 1 1 auto;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   So läuft die Bewerbung
   ────────────────────────────────────────────────────────────────────────── */

.skr .skr-ablauf-liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.skr .skr-ablauf-schritt {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0 1rem;
    margin: 0;
    padding: calc(1rem * var(--skr-luft)) 0;
    border-top: 1px solid var(--skr-linie);
}

.skr .skr-ablauf-schritt::before,
.skr .skr-ablauf-schritt::marker {
    content: none;
}

.skr .skr-ablauf-zahl {
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.skr .skr-ablauf-titel {
    margin: 0 0 0.25rem;
    font-weight: 600;
}

.skr .skr-ablauf-text {
    margin: 0;
    color: var(--skr-leise);
}

/* ──────────────────────────────────────────────────────────────────────────
   Einstiegswege
   ────────────────────────────────────────────────────────────────────────── */

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

.skr .skr-einstieg-eintrag {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.25rem 2rem;
    margin: 0;
    padding: calc(1.25rem * var(--skr-luft)) 0;
    border-bottom: 1px solid var(--skr-linie);
}

.skr .skr-einstieg-eintrag::before,
.skr .skr-einstieg-eintrag::marker {
    content: none;
}

.skr .skr-einstieg-name {
    margin: 0;
    font-size: var(--skr-titel-groesse);
    line-height: 1.3;
}

.skr .skr-einstieg-name a {
    color: inherit;
    text-decoration: none;
}

.skr .skr-einstieg-name a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.skr .skr-einstieg-eintrag:hover .skr-einstieg-name a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.skr .skr-einstieg-anzahl {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    color: var(--skr-leise);
    font-size: 0.9375em;
    white-space: nowrap;
}

.skr .skr-einstieg-text {
    grid-column: 1;
    margin: 0;
    color: var(--skr-leise);
}

@container (max-width: 30rem) {
    .skr .skr-einstieg-eintrag {
        grid-template-columns: minmax(0, 1fr);
    }

    .skr .skr-einstieg-anzahl {
        grid-column: 1;
        grid-row: auto;
    }
}