/*
 * Störung & Reklamation – Stil des Meldeformulars.
 *
 * Baut auf pf.css (Grundraster, Leiste unten, Hinweise). Farben und Maße aus
 * dem Prototyp (11.09.2026): dunkles Blau für Kopf und Hauptschaltfläche,
 * Cyan als Akzent, Karten mit 16 px Rundung. Schriften vom Gerät – keine
 * fremden Hosts (Inhalts-Sicherheitsregel).
 */

:root {
    --st-dunkel: #2C3A57;
    --st-dunkel-hover: #224989;
    --st-dunkel-2: #3A4662;
    --st-akzent: #0682C5;
    --st-akzent-bg: #E6F2F9;
    --st-rand: #E5E7EB;
    --st-rand-hover: #D3D6E0;
    --st-feldrand: #D3D6E0;
    --st-grau: #6B7280;
    --st-grund: #F7F9FC;
    --st-gruen: #10B981;
    --st-amber: #E6A53F;
    --st-rot: #DC2626;
}

body.pf-body {
    background: var(--st-grund);
    color: var(--st-dunkel);
}

.st-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Honigtopf: für Menschen nicht da, für Screenreader ausgeblendet. */
.st-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Kopf: Schritt x von 6 · Rest · Balken ─────────────────────────────── */

.st-kopf {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #FFFFFF;
    border-bottom: 1px solid var(--st-rand);
    margin: -16px calc(-1 * var(--pf-gutter)) 14px;
    padding: 12px var(--pf-gutter) 11px;
}

/* Offline-Hinweis unter dem Kopf, nicht klebend (sonst läge er über dem Kopf). */
.st-offline {
    position: static;
    margin: 0 0 12px;
    border-radius: 10px;
}

.st-kopf-zeile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.st-kopf-schritt {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--st-akzent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-kopf-rest {
    font-size: 12px;
    font-weight: 700;
    color: var(--st-grau);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.st-zurueck {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -6px 0 -6px -6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--st-dunkel);
    cursor: pointer;
}

.st-zurueck:hover:not(:disabled) {
    background: var(--st-grund);
}

.st-balken {
    margin-top: 9px;
    height: 6px;
    border-radius: 999px;
    background: var(--st-akzent-bg);
    overflow: hidden;
}

.st-balken > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--st-dunkel-hover), var(--st-akzent));
    transition: width 0.3s ease;
}

.st-balken-amber > span {
    background: var(--st-amber);
}

/* ── Leiste unten ──────────────────────────────────────────────────────── */

.st-actions {
    background: #FFFFFF;
    border-top: 1px solid var(--st-rand);
}

.st-knopfreihe {
    display: flex;
    gap: 8px;
}

.st-knopfreihe > .pf-btn {
    margin: 0;
}

.st-knopfreihe > .st-neben {
    flex: 1;
}

.st-knopfreihe > .st-cta {
    flex: 1.5;
}

.pf-btn.st-cta {
    background: var(--st-dunkel);
    min-height: 52px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.pf-btn.st-cta:hover:not(:disabled) {
    background: var(--st-dunkel-hover);
}

.pf-btn.st-neben {
    min-height: 52px;
    font-weight: 800;
    border-color: var(--st-rand);
    line-height: 1.2;
}

.st-telefon {
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--st-grau);
}

.st-telefon a {
    color: var(--st-dunkel);
    font-weight: 800;
    text-decoration: none;
}

@media (min-width: 820px) {
    .st-actions {
        background: none;
        border-top: 0;
    }
}

/* ── Karten und Text ───────────────────────────────────────────────────── */

.st-karte {
    background: #FFFFFF;
    border: 1px solid var(--st-rand);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 10px;
}

.st-karte-akzent {
    box-shadow: inset 3px 0 0 var(--st-akzent);
}

.st-titel {
    margin: 2px 0 0;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--st-dunkel);
    outline: none;
}

.st-titel-inline {
    margin: 0;
    font-size: 18px;
}

.st-lead {
    margin: 5px 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--st-grau);
}

.st-absatz {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--st-dunkel);
}

.st-label-klein {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--st-grau);
}

.st-label-akzent {
    color: var(--st-akzent);
}

.st-klein {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--st-grau);
}

.st-mitte {
    text-align: center;
}

/* Datenschutz-Hinweis in Schritt 1 und Fußzeile (Impressum, Datenschutz). */
.st-datenschutz {
    margin: 12px 2px 0;
}

.st-konto {
    margin: 0 2px 14px;
}

.st-datenschutz a,
.st-konto a,
.st-fuss a {
    color: inherit;
    text-decoration: underline;
}

/*
 * Fußzeile steht NACH der Schaltflächen-Leiste (app.blade.php). Am Handy klebt
 * die Leiste unten und ist unterschiedlich hoch (umbrechende Knöpfe, schmale
 * Geräte): stoerung.js misst sie und setzt --st-leiste, damit Impressum und
 * Datenschutz nie darunter verschwinden. Der feste Abstand von .pf-shell
 * übernimmt dann die Fußzeile.
 */
.st-fuss {
    padding: 12px var(--pf-gutter) calc(var(--st-leiste, 120px) + 16px);
    text-align: center;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--st-grau);
}

@media (max-width: 819.98px) {
    #st-app.pf-shell {
        padding-bottom: 16px;
    }
}

@media (min-width: 820px) {
    .st-actions.pf-actions {
        padding-bottom: 8px;
    }

    .st-fuss {
        padding-bottom: 40px;
    }
}

.st-mitte-block {
    display: block;
    margin: 4px auto 0;
}

.st-link {
    border: 0;
    background: none;
    padding: 4px 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--st-akzent);
    cursor: pointer;
}

.st-link:hover {
    color: var(--st-dunkel-hover);
}

.st-hinweis,
.st-test {
    margin-bottom: 12px;
}

/* ── Dunkler Kopf (Start und Bestätigung) ──────────────────────────────── */

.st-hero {
    background: var(--st-dunkel);
    color: #FFFFFF;
    margin: -14px calc(-1 * var(--pf-gutter)) 14px;
    padding: 22px 20px;
}

@media (min-width: 600px) {
    .st-hero {
        margin: 0 0 14px;
        border-radius: 16px;
    }
}

.st-hero-logo {
    display: block;
    width: 126px;
    height: auto;
    /* Das Logo ist dunkel auf hell – auf dem dunklen Kopf weiß darstellen. */
    filter: brightness(0) invert(1);
}

.st-hero-label {
    margin-top: 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--st-akzent-bg);
}

.st-hero-titel {
    margin: 6px 0 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    color: #FFFFFF;
    text-wrap: balance;
    outline: none;
}

.st-hero-titel-klein {
    margin: 0;
    font-size: 22px;
}

.st-hero-text {
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--st-akzent-bg);
}

.st-fertig-kopf {
    display: flex;
    gap: 14px;
    align-items: center;
}

.st-fertig-kopf .st-hero-text {
    margin-top: 4px;
    font-size: 13.5px;
}

.st-fertig-kreis {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--st-gruen);
    display: flex;
    align-items: center;
    justify-content: center;
}

.st-nummer {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--st-dunkel-2);
    border-radius: 12px;
    padding: 12px 14px;
}

.st-nummer-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #B8C5DA;
}

.st-nummer-wert {
    margin-top: 3px;
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #FFFFFF;
}

.st-stufe-badge {
    flex: none;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: #FFFFFF;
}

/* ── Schritt 1: Felder ─────────────────────────────────────────────────── */

.st-feld-wrap {
    margin-top: 8px;
}

.st-zweier {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 8px;
}

.st-feld-label {
    display: block;
    margin: 0 0 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--st-grau);
}

.pf-input.st-feld {
    height: 46px;
    border: 1px solid var(--st-feldrand);
    border-radius: 6px;
    padding: 0 12px;
    font-size: 16px;
    color: var(--st-dunkel);
}

.pf-input.st-feld.is-fehler {
    border-color: var(--st-rot);
}

.st-feld-fehler {
    margin: 4px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--st-rot);
}

.st-feld-hilfe {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--st-grau);
}

.st-info {
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--st-akzent-bg);
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.5;
}

.st-info svg {
    flex: none;
}

/* ── Schritt 2: Symptom-Kacheln ────────────────────────────────────────── */

.st-symptome {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.st-symptom {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-height: 132px;
    padding: 14px 13px 13px;
    background: #FFFFFF;
    border: 1px solid var(--st-rand);
    border-radius: 16px;
    font: inherit;
    color: var(--st-dunkel);
    cursor: pointer;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}

.st-symptom:hover:not(:disabled) {
    border-color: var(--st-rand-hover);
}

.st-symptom.is-aktiv {
    box-shadow: inset 0 0 0 2px var(--st-akzent);
    background: var(--st-akzent-bg);
    border-color: transparent;
}

.st-symptom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--st-akzent-bg);
    flex: none;
}

.st-symptom-icon-klein {
    width: 36px;
    height: 36px;
}

.st-symptom-titel {
    display: block;
    margin-top: 10px;
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.2;
}

.st-symptom-beispiel {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--st-grau);
}

.st-symptom-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

/* ── Schritt 3: Fragen mit Pillen ──────────────────────────────────────── */

.st-frage {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--st-dunkel);
}

.st-frage-abstand {
    margin-top: 14px;
}

.st-pillen {
    margin-top: 9px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.st-pille,
.st-feldwahl {
    position: relative;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid var(--st-rand);
    border-radius: 999px;
    background: #FFFFFF;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--st-dunkel);
    cursor: pointer;
    text-align: center;
}

.st-feldwahl {
    border-radius: 10px;
    padding: 11px 6px;
    font-size: 13.5px;
}

.st-feldwahl-links {
    text-align: left;
    padding: 11px 12px;
}

.st-pille:hover:not(:disabled),
.st-feldwahl:hover:not(:disabled) {
    border-color: var(--st-rand-hover);
}

.st-pille.is-aktiv,
.st-feldwahl.is-aktiv {
    box-shadow: inset 0 0 0 2px var(--st-akzent);
    background: var(--st-akzent-bg);
    border-color: transparent;
}

.st-pille:disabled,
.st-feldwahl:disabled,
.st-symptom:disabled,
.st-stufe:disabled {
    cursor: default;
}

.pf-input.st-freitext {
    margin-top: 9px;
}

.pf-textarea.st-textarea {
    margin-top: 9px;
    min-height: 96px;
    border: 1px solid var(--st-feldrand);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--st-dunkel);
    resize: vertical;
}

.st-sprache {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.st-sprach-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    border: 1px solid var(--st-rand);
    border-radius: 10px;
    background: #FFFFFF;
    font: inherit;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--st-dunkel);
    cursor: pointer;
}

.st-sprach-knopf:hover:not(:disabled) {
    border-color: var(--st-rand-hover);
}

.st-warnkarte {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #FFFFFF;
    border: 1px solid var(--st-rand);
    border-radius: 16px;
    padding: 13px 14px;
    box-shadow: inset 3px 0 0 var(--st-rot);
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.st-warnkarte svg {
    flex: none;
    margin-top: 1px;
}

.st-warnkarte strong {
    font-weight: 800;
}

/* ── Schritt 4: Medien ─────────────────────────────────────────────────── */

.st-anleitung {
    margin: 6px 0 0;
    font-size: 14.5px;
    line-height: 1.5;
}

.st-kacheln {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.st-kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 104px;
    padding: 14px 8px;
    background: #FFFFFF;
    border: 1px solid var(--st-rand);
    border-radius: 16px;
    font: inherit;
    color: var(--st-dunkel);
    cursor: pointer;
}

.st-kachel:hover:not(.is-voll) {
    border-color: var(--st-akzent);
}

.st-kachel.is-voll {
    opacity: 0.5;
    cursor: default;
}

.st-kachel-rund {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--st-dunkel);
}

.st-kachel-rund-akzent {
    background: var(--st-akzent);
}

.st-kachel-titel {
    font-size: 14px;
    font-weight: 800;
}

.st-kachel-titel small {
    font-size: 11px;
    font-weight: 600;
    color: var(--st-grau);
}

.st-pflicht {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--st-akzent-bg);
    font-size: 10px;
    font-weight: 800;
    color: var(--st-akzent);
}

/* Dateifeld unsichtbar, aber fokussierbar – die Kachel ist sein <label>. */
.st-datei-eingabe {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.st-medien-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.st-leer {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--st-grau);
    text-align: center;
}

.st-zustand {
    background: #FFFFFF;
    border: 1px solid var(--st-rand);
    border-radius: 16px;
    padding: 12px 14px;
}

.st-zustand-langsam {
    box-shadow: inset 3px 0 0 var(--st-amber);
}

.st-zustand-fehler {
    box-shadow: inset 3px 0 0 var(--st-rot);
}

.st-zustand-kopf {
    display: flex;
    gap: 12px;
    align-items: center;
}

.st-zustand-text {
    flex: 1;
    min-width: 0;
}

.st-zustand-titel {
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-zustand-meta {
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--st-grau);
    font-variant-numeric: tabular-nums;
}

.st-zustand .st-balken {
    margin-top: 8px;
}

.st-gruen {
    color: var(--st-gruen);
    font-weight: 700;
}

.st-zustand-prozent {
    flex: none;
    font-size: 14px;
    font-weight: 800;
    color: var(--st-akzent);
    font-variant-numeric: tabular-nums;
}

.st-zustand .st-knopfreihe {
    margin-top: 10px;
}

.st-zustand .st-knopfreihe > .pf-btn {
    flex: 1;
    min-height: 46px;
}

.st-mini {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--st-grund);
}

.st-fertig-haken {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--st-gruen);
}

.st-entfernen {
    margin-top: 6px;
    border: 0;
    background: none;
    padding: 4px 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--st-grau);
    cursor: pointer;
}

.st-entfernen:hover {
    color: var(--st-rot);
}

/* ── Aufnahme im Browser ───────────────────────────────────────────────── */

.st-aufnahme {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(44, 58, 87, 0.92);
}

.st-aufnahme-innen {
    width: 100%;
    max-width: 480px;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 16px;
}

.st-aufnahme-titel {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 800;
}

.st-aufnahme-video {
    display: block;
    width: 100%;
    max-height: 55vh;
    border-radius: 12px;
    background: #000000;
    object-fit: cover;
}

.st-aufnahme-mikro {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    border-radius: 12px;
    background: var(--st-dunkel);
}

.st-aufnahme-zeit {
    margin-top: 10px;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.st-aufnahme-hinweis {
    margin: 6px 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--st-grau);
    text-align: center;
}

.st-aufnahme .st-knopfreihe > .pf-btn {
    flex: 1;
}

.pf-btn.st-galerie {
    position: relative;
    display: block;
    margin-top: 8px;
    text-align: center;
    cursor: pointer;
}

/* ── Schritt 5: Stufen und Erreichbarkeit ──────────────────────────────── */

.st-stufen {
    margin: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.st-stufe {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 64px;
    padding: 13px 14px;
    background: #FFFFFF;
    border: 1px solid var(--st-rand);
    border-radius: 16px;
    font: inherit;
    color: var(--st-dunkel);
    text-align: left;
    cursor: pointer;
}

.st-stufe:hover:not(:disabled) {
    border-color: var(--st-rand-hover);
}

.st-stufe.is-aktiv {
    box-shadow: inset 0 0 0 2px var(--st-akzent);
    background: var(--st-akzent-bg);
    border-color: transparent;
}

.st-stufe:disabled:not(.is-aktiv) {
    opacity: 0.55;
}

.st-stufe-punkt {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.st-stufe-text {
    flex: 1;
    min-width: 0;
}

.st-stufe-titel {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
}

.st-stufe-sla {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--st-grau);
}

.st-rot-hinweis {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--st-rot);
}

.st-stufen + .st-karte,
.st-rot-hinweis + .st-karte {
    margin-top: 14px;
}

.st-raster {
    margin-top: 8px;
    display: grid;
    gap: 8px;
}

.st-raster-2 {
    grid-template-columns: 1fr 1fr;
}

.st-raster-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.st-raster-5 {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 10px;
}

/* ── Schritt 6: Zusammenfassung ────────────────────────────────────────── */

.st-karte-liste {
    padding: 0;
    overflow: hidden;
}

.st-zeile {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid var(--st-rand);
    background: #FFFFFF;
    font: inherit;
    color: var(--st-dunkel);
    text-align: left;
    cursor: pointer;
}

.st-zeile:last-child {
    border-bottom: 0;
}

.st-zeile:hover:not(:disabled) {
    background: var(--st-grund);
}

.st-zeile svg {
    flex: none;
}

.st-zeile-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--st-akzent-bg);
}

.st-zeile-text {
    flex: 1;
    min-width: 0;
}

.st-zeile-wert {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.st-zeile-unter {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--st-grau);
}

.st-rueckruf {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.st-rueckruf-text {
    font-size: 14.5px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* ── Bestätigung ───────────────────────────────────────────────────────── */

.st-ablauf {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.st-ablauf-punkt {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 14px;
    line-height: 1.45;
}

.st-ablauf-nr {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--st-dunkel);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
}

.pf-btn.st-link-knopf {
    display: block;
    margin: 0 0 10px;
    text-align: center;
    text-decoration: none;
    font-weight: 800;
}