/* Persönlicher Bereich für Eltern (/Profile) — geteiltes Design-System.
   Global (nicht scoped), da Markup auf mehrere Komponenten aufgeteilt ist
   (PersoenlicherBereich + Profile/Tabs/*). Prefix "pb-" verhindert Kollisionen.
   Farben/Abstände 1:1 aus dem Claude-Design-Handoff. */

.pb-root {
    /* Semantische Aliase; Werte aus settings.css-Tokens wo 1:1 identisch. */
    --pb-primary: var(--color-primary);
    --pb-primary-dark: var(--color-primary-dark);
    --pb-cream: var(--color-secondary);
    --pb-cream-strong: var(--color-secondary-dark);
    --pb-text: var(--color-text);
    --pb-muted: var(--color-text-muted);
    --pb-border: var(--color-component-border);
    /* Kein 1:1-Token in settings.css -> bewusst explizit. */
    --pb-label: #8a7a7a;
    --pb-value: #3f3f3f;
    --pb-border-soft: #e2d9c9;
    --pb-dash: rgba(0, 0, 0, .08);
    /* Seitenabstand des randlosen Mobile-Layouts (siehe Abschnitt "Mobile-Optimierung"):
       derselbe Wert, mit dem auch die Navbar einrückt. Dort erbt der innere .container das
       --bs-gutter-x: 1.5rem der darüberliegenden .row und rückt damit 24px ein — der
       persönliche Bereich hat keine .row über seinem .container und käme sonst auf 12px. */
    --pb-gutter: 1.5rem;
    /* Waagrechter Innenabstand eines einzelnen Reiters auf schmalen Screens. Die äußeren Zellen
       der Reiter-Tabelle ersetzen ihn nach außen durch --pb-gutter, damit die Beschriftung der
       linken Spalte auf derselben Kante sitzt wie Hero und Inhalt. */
    --pb-tab-inline: 0.75rem;
    /* Geometrie der Schließen-Buttons in Karten-Köpfen (.pb-pickup-form-close, .pb-new-app-close).
       Sie liegen absolut in der Ecke und belegen im Flexfluss deshalb keinen Platz — die Köpfe
       halten sich mit denselben Werten rechts frei, damit der Titel nicht darunter läuft. */
    --pb-close-inset: 0.5rem;
    --pb-close-size: 2rem;
    color: var(--pb-text);
    font-family: var(--standard-font), sans-serif;
    line-height: 1.6;
    background: white;
}

.pb-shell {
    width: 100%;
    padding: 6rem 0;
}

.pb-card {
    border: 1px solid var(--color-component-border);
    border-radius: var(--border-radius);
    background: #fff;
    min-height: calc(100dvh - var(--navbar-height) - 8rem);
    display: flex;
    flex-direction: column;
}

/* hero */
.pb-hero {
    background: var(--pb-cream);
    border-bottom: 1px solid var(--pb-border-soft);
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Text-Größen kommen aus settings.css (--font-size-*). Bewusst explizit bleiben nur:
   Display-Überschriften (.pb-hero-title/.pb-h2) sowie Icon-/Avatar-Geometrie
   (.pb-avatar-lg, .pb-add-icon, .pb-empty i) — dafür gibt es im Token-Scale (max. 1.5rem) keine Entsprechung. */
.pb-hero-title {
    color: var(--pb-primary);
    font-size: 2.5rem;
    line-height: 1;
    margin: 0;
}

.pb-hero-sub {
    color: var(--pb-muted);
    margin-top: 0.5rem;
}

.pb-hero-user-nr {
    color: var(--pb-label);
    font-size: var(--font-size-small);
}

.pb-avatar {
    border-radius: 50%;
    background: var(--pb-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex: 0 0 auto;
}

.pb-avatar-lg {
    width: 54px;
    height: 54px;
    font-size: var(--font-size-lead);
}

/* tabs */
.pb-tabs {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0 2.5rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.pb-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
    color: var(--pb-muted);
    border-bottom: 3px solid transparent;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-size: var(--font-size-base);
}

    .pb-tab:hover {
        color: var(--pb-primary);
    }

    .pb-tab.pb-tab-active {
        color: var(--pb-primary);
        border-bottom-color: var(--pb-primary);
    }

    /* Reiter, dessen Ansicht es noch nicht gibt: bleibt sichtbar, damit die Stelle im Aufbau
       erkennbar ist, lässt sich aber nicht öffnen. Der Hover der Grundregel wird zurückgenommen —
       sonst leuchtete ein Reiter auf, der auf den Klick nicht reagiert. */
    .pb-tab:disabled,
    .pb-tab:disabled:hover {
        color: var(--pb-label);
        opacity: 0.55;
        cursor: default;
    }

    .pb-tab i {
        position: relative;
        height: 16px;
        width: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.pb-pill {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: #d9cfc0;
    color: #6b5b4a;
    font-size: var(--font-size-smaller);
    font-weight: 500;
}

.pb-tab.pb-tab-active .pb-pill {
    background: var(--pb-primary);
    color: #fff;
}

/* Pillen in der Reiter-Leiste haben eine feste Breite: Platzhalter, einstellige und zweistellige Zahl
   belegen denselben Kasten (Innenabstand 2 x 0.5rem + zwei Zeichen). Damit ändert sich die Breite eines
   Reiters nicht mehr, wenn eine nachgeladene Zahl erscheint — sonst verschiebt sie alle folgenden Reiter. */
.pb-tab .pb-pill {
    min-width: calc(1rem + 2ch);
}

/* Belegt seinen Platz, ist aber nicht zu sehen. Kommt zum Einsatz, solange die Anzahl noch geladen wird,
   und bleibt bei Anzahl 0 stehen — beides würde sonst beim Wechsel die Leiste umspringen lassen. */
.pb-pill-placeholder {
    visibility: hidden;
}

/* Unter-Reiter im Reiter "Dokumente" (Verträge / Anträge / Rechnungen).
   Segmentierte Pill-Leiste — bewusst anders als die Haupt-Reiter (.pb-tabs),
   damit die Hierarchie (Reiter > Unter-Reiter) sofort ablesbar ist. */
.pb-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    margin-top: -1rem;
}

.pb-subtab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-component-border);
    background: white;
    color: var(--pb-muted);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
}

    .pb-subtab:hover {
        color: var(--pb-primary);
    }

    .pb-subtab.pb-subtab-active {
        background: #fff;
        color: var(--pb-primary);
    }

        .pb-subtab.pb-subtab-active .pb-pill {
            background: var(--pb-primary);
            color: #fff;
        }

/* content */
.pb-main {
    padding: 2rem;
}

.pb-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.pb-h2 {
    font-family: var(--title-font), cursive;
    color: var(--pb-primary);
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    margin: 0;
}

.pb-sub {
    color: var(--pb-muted);
    margin-top: 7px;
}

/* Downloads-Reiter (Profile/Tabs/ProfileDownloadsTab) — Suche + nach Anzeige-Ort
   gruppierte Download-Kacheln. Werte 1:1 aus dem Claude-Design-Handoff. */
.pb-search {
    position: relative;
    margin-bottom: 1.75rem;
    max-width: 26rem;
}

    .pb-search i {
        position: absolute;
        left: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--pb-label);
        font-size: 0.9rem;
    }

    .pb-search input {
        width: 100%;
        font-family: inherit;
        font-size: var(--font-size-base);
        color: var(--pb-value);
        padding: 0.6rem 0.85rem 0.6rem 2.4rem;
        border: 1px solid var(--pb-border);
        border-radius: var(--border-radius);
        background: #fff;
    }

        .pb-search input:focus {
            outline: none;
            border-color: var(--pb-primary);
        }

        .pb-search input::placeholder {
            color: var(--pb-label);
        }

.pb-dl-group {
    margin-bottom: 2rem;
}

    .pb-dl-group:last-child {
        margin-bottom: 0;
    }

.pb-dl-grouphead {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.pb-dl-grouptitle {
    font-size: var(--font-size-lead);
    font-weight: 700;
    color: var(--pb-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.pb-dl-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.pb-dl {
    display: flex;
    align-items: stretch;
    background: var(--pb-cream);
    border: 1px solid var(--pb-border-soft);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.pb-dl-main {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 1.15rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
}

.pb-dl-date {
    color: var(--pb-primary);
    font-size: var(--font-size-small);
}

.pb-dl-name {
    font-weight: 700;
    color: var(--pb-primary);
    line-height: 1.3;
}

.pb-dl-desc {
    color: var(--pb-muted);
    font-size: var(--font-size-small);
    line-height: 1.45;
}

.pb-dl-btn {
    flex: 0 0 auto;
    width: 64px;
    background: var(--pb-primary);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    text-decoration: none;
}

    .pb-dl-btn:hover {
        background: var(--pb-primary-dark);
        color: #fff;
    }

    .pb-dl-btn:active {
        color: #fff;
    }

/* buttons */
.pb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--border-radius);
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: 1.5;
    padding: 6px .75rem;
    border: 1px solid transparent;
    text-decoration: none;
}

.pb-btn-primary {
    background: var(--pb-primary);
    border: none;
    color: var(--pb-cream);
}

    .pb-btn-primary:hover {
        background: var(--pb-primary-dark);
        color: var(--pb-cream);
    }

    .pb-btn-primary:disabled {
        background: var(--pb-primary);
        color: var(--pb-cream);
        opacity: 0.5;
        cursor: not-allowed;
    }

        /* Hover im deaktivierten Zustand unterdrücken, damit der Button "tot" bleibt */
        .pb-btn-primary:disabled:hover {
            background: var(--pb-primary);
        }

.pb-btn-link {
    background: transparent;
    border: none;
    color: var(--pb-primary);
    padding: 6px .5rem;
}

    .pb-btn-link:hover {
        color: var(--pb-primary-dark);
        text-decoration: underline;
    }

.pb-btn-danger {
    background: transparent;
    border: none;
    color: #9a3b3b;
    padding: 6px .25rem;
}

    .pb-btn-danger:hover {
        color: #c0392b;
        text-decoration: underline;
    }

/* profile identity strip */
.pb-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--pb-cream);
    border: 1px solid var(--pb-border);
    border-radius: var(--border-radius);
    padding: 1rem 1.125rem;
    margin-bottom: 1rem;
}

.pb-identity-main {
    flex: 1;
    min-width: 11.25rem;
}

.pb-identity-name {
    font-weight: 700;
    color: var(--pb-primary);
    font-size: var(--font-size-lead);
}

.pb-identity-mail {
    color: var(--pb-muted);
    font-size: var(--font-size-small);
}

.pb-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pb-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid var(--pb-border-soft);
    color: var(--pb-muted);
    padding: 6px 0.75rem;
    border-radius: 1.25rem;
    font-size: var(--font-size-small);
    font-weight: 500;
}

.pb-chip-ok {
    background: rgba(60, 179, 113, .14);
    color: #2e7d51;
    border: none;
    font-weight: 600;
}

.pb-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #3cb371;
    display: inline-block;
}

/* data card grid */
.pb-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.pb-cards {
    display: grid;
    gap: 1.25rem;
}

.pb-cards-children {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pb-cards-payments {
    grid-template-columns: repeat(auto-fill, minmax(21.25rem, 1fr));
}

/* Trenner zwischen der Kind-/Zweit-EB-Form und dem ersten EB (Konto) im Kinder-Editor. */
.pb-child-sep {
    margin: 1.75rem 0;
    border: 0;
    border-top: 1px solid var(--pb-border, #e5e0d8);
}

/* status filter (Verträge / Anträge) — Chips, Mehrfachauswahl.
   Verhalten/Optik angelehnt an Verwaltung > ContractKitaStatusFilter. */
.pb-filter-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 1rem;
    margin-bottom: 1rem;
}

.pb-filter-item {
    /* Aktiv-Farben default aus den pb-Tokens; pro Status via Inline-Style überschrieben. */
    --pb-filter-active-bg: var(--pb-primary);
    --pb-filter-active-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 6px 0.75rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--pb-border);
    background: #fff;
    color: var(--pb-muted);
    font-family: inherit;
    font-size: var(--font-size-small);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

    .pb-filter-item:hover {
        background: var(--pb-filter-active-bg);
        color: var(--pb-filter-active-fg);
        border-color: var(--pb-filter-active-bg);
    }

    .pb-filter-item.pb-filter-selected {
        background: var(--pb-filter-active-bg);
        color: var(--pb-filter-active-fg);
        border-color: var(--pb-filter-active-bg);
    }

.pb-list {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.pb-panel {
    background: var(--pb-cream);
    border: 1px solid var(--pb-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.pb-panel-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 1rem;
    background: var(--pb-cream-strong);
}

    .pb-panel-head span {
        font-weight: 700;
        color: var(--pb-primary);
    }

.pb-panel-head-split {
    justify-content: space-between;
    flex-wrap: wrap;
}

.action-button-wrapper {
    flex: 0 0 auto;
    position: relative;
    height: calc(1rem * 1.6);
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pb-panel-body {
    padding: 0.125rem 1rem 0.875rem;
}

.pb-panel-body-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.5rem;
    padding: 0.125rem 1rem 0.5rem;
}

.pb-panel-body-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1.5rem;
    padding: 0.125rem 1rem 0.5rem;
}

.pb-panel-body-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 1.5rem;
    padding: 0.125rem 1rem 0.5rem;
}

.pb-row {
    padding: 10px 0;
    border-top: 1px dashed var(--pb-dash);
}

.pb-panel-body > .pb-row:nth-child(1),
.pb-panel-body-2 > .pb-row:nth-child(-n + 2),
.pb-panel-body-3 > .pb-row:nth-child(-n + 3),
.pb-panel-body-4 > .pb-row:nth-child(-n + 4),
.pb-panel-body .pb-detail-subitem > .pb-row:nth-child(2),
.pb-child-body .pb-row:nth-child(1),
.pb-pay-fixed > .pb-row:nth-child(1) {
    border-top: none;
}

.pb-row-label {
    font-size: var(--font-size-smaller);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pb-label);
    font-weight: 500;
}

.pb-row-value {
    color: var(--pb-value);
    margin-top: 3px;
}

.pb-badge {
    padding: 5px 0.75rem;
    border-radius: 1.25rem;
    font-size: var(--font-size-small);
    font-weight: 700;
    white-space: nowrap;
}

.pb-badge-default {
    background: var(--pb-primary);
    color: #fff;
    padding: 0.25rem 11px;
    font-size: var(--font-size-smaller);
}

/* Standard-Kennzeichen oben rechts (Radio-Metapher, Design-Handoff):
   gefüllter Kreis-Haken = aktueller Standard (span), leerer Kreis (button) = als Standard festlegen. */
.pb-pay-default {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    line-height: 0;
    flex: none;
    font-size: 1.5rem;
}

span.pb-pay-default {
    color: var(--pb-primary);
}

button.pb-pay-default {
    color: #c9b7a3;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s ease;
}

    button.pb-pay-default:hover {
        color: var(--pb-primary);
    }

.pb-panel-actions {
    position: relative;
    padding: 0;
    border-top: 1px solid var(--pb-border-soft);
    display: flex;
    flex-wrap: wrap;
    height: 3rem;
}

    .pb-panel-actions .pb-action-button {
        border-right: 1px solid var(--pb-border-soft);
        border-radius: 0;
        padding-inline: 1rem;
    }

        .pb-panel-actions .pb-action-button:last-child {
            border-right: 0;
        }

        .pb-panel-actions .pb-action-button:hover {
            background-color: var(--pb-cream-strong);
        }

        .pb-panel-actions.pb-detail-actions .pb-action-button:hover {
            background-color: inherit;
        }

        /* Deaktivierter Aktions-Button (z. B. "Warten auf 2. EB"): gedämpft, kein Hover-Effekt. */
        .pb-panel-actions .pb-action-button:disabled {
            color: var(--pb-muted);
            cursor: not-allowed;
        }

            .pb-panel-actions .pb-action-button:disabled:hover {
                background-color: transparent;
            }

/* children card */
.pb-child-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--pb-cream-strong);
}

    .pb-child-head i {
        font-size: 2rem;
    }

.pb-child-head-name {
    font-weight: 700;
    color: var(--pb-primary);
    font-size: var(--font-size-lead);
}

.pb-child-head-role {
    color: var(--pb-label);
    font-size: var(--font-size-small);
}

.pb-child-body {
    padding: 0.125rem 1rem 0.5rem;
}
/* payment card */
.pb-pay {
    position: relative;
    background: var(--pb-cream);
    border: 1px solid var(--pb-border);
    border-radius: var(--border-radius);
    padding: 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.pb-pay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pb-pay-head-left {
    display: flex;
    align-items: center;
    gap: 11px;
}

.pb-pay-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: var(--pb-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pb-pay-type {
    font-weight: 700;
    color: var(--pb-value);
}

.pb-iban {
    font-family: var(--standard-font), monospace;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--pb-value);
}

.pb-status-ok {
    color: #2e7d51;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.pb-pay-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.pb-add {
    background: transparent;
    border: 1px dashed #cbb9a3;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--pb-primary);
    cursor: pointer;
    min-height: 12.5rem;
    font-family: inherit;
}

    .pb-add:hover {
        background: var(--pb-cream);
        border-color: var(--pb-primary);
    }

.pb-add-icon {
    font-size: 2rem;
}

.pb-cards-payments .pb-add {
    min-height: 17rem;
}

.pb-cards-children .pb-add {
    min-height: 26rem;
}

/* Leer-Zustand (noch keine Kinder): kompakter Add-Button in voller Breite,
   direkt unter dem Leer-Hinweis – nicht die hohe Karten-Variante. */
.pb-add-empty {
    min-height: auto;
    padding: 1.75rem 1.5rem;
    margin-top: 1.25rem;
    width: 100%;
}
/* Zahlungsmethoden-Gruppe (eigene / je zweiter Erziehungsberechtigter) */
.pb-pay-group {
    margin-top: 1.5rem;
}

    .pb-pay-group:first-of-type {
        margin-top: 0;
    }

.pb-pay-group-head {
    margin-bottom: 0.875rem;
}

.pb-pay-group-title {
    font-size: var(--font-size-lead);
    font-weight: 500;
    color: var(--pb-primary);
    margin: 0;
}

.pb-pay-group-sub {
    color: var(--pb-muted);
    font-size: var(--font-size-small);
    margin-top: 2px;
}
/* Hinweis, wenn eine Zahlungsmethode nicht entfernt werden darf (letzte Methode / im Vertrag verwendet) */
.pb-pay-locked {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--pb-muted);
    font-size: var(--font-size-small);
}

.pb-add-hint {
    color: var(--pb-muted);
    font-size: var(--font-size-small);
    font-weight: 400;
    text-align: center;
}
/* "Zahlungsmethode hinzufügen": Container um das Stripe-Payment-Element */
.pb-add-payment {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--pb-border, #e6ddcf);
    border-radius: var(--border-radius);
}
/* Readonly-Angaben (Kontoinhaber/Adresse) über dem Stripe-Element im Hinzufügen-Schritt */
.pb-pay-fixed {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: var(--pb-cream, #f7f4ee);
    border: 1px solid var(--pb-border, #e6ddcf);
    border-radius: var(--border-radius);
}

    .pb-pay-fixed .pb-sub {
        margin-bottom: .75rem;
    }
/* Aktionsleiste (Zurück / Hinzufügen) im Hinzufügen-Schritt */
.pb-add-actions {
    margin-top: 1.5rem;
    justify-content: space-between;
}
/* empty state */
.pb-empty {
    background: var(--pb-cream);
    border: 1px dashed var(--pb-border-soft);
    border-radius: var(--border-radius);
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--pb-muted);
}

    .pb-empty i {
        font-size: 2rem;
        color: var(--pb-label);
        margin-bottom: 10px;
        display: block;
    }

.pb-loading {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
/* skeleton (Ladezustand) — bildet die Card-Struktur nach, damit beim Laden
   kein Layout-Sprung entsteht. Blöcke sind halbtransparentes Schwarz, damit
   sie auf weißem wie cremefarbenem Grund gleich gut lesbar sind. */
.pb-sk {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .06) 25%, rgba(0, 0, 0, .12) 37%, rgba(0, 0, 0, .06) 63%);
    background-size: 200% 100%;
    animation: pb-sk-shimmer 1.4s ease-in-out infinite;
}

@keyframes pb-sk-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pb-sk {
        animation: none;
    }
}

.pb-sk-line {
    height: calc(1rem * 1.6);
}

.pb-sk-title {
    width: 18rem;
    max-width: 60%;
    height: 2.5rem;
}

.pb-sk-h2 {
    width: 12rem;
    height: 2rem;
}

.pb-sk-tab {
    width: 8rem;
    height: calc(1rem * 1.6);
}

.pb-sk-btn {
    width: 8rem;
    height: calc(12px + 2px + (1rem * 1.6));
    border-radius: var(--border-radius);
}

.pb-sk-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.pb-sk-chip {
    width: 7rem;
    height: 1.9rem;
    border-radius: 1.25rem;
}
/* Inline-Bearbeitung der Kontakt-Karte (ProfileDataTab) — nutzt die globalen form-*-Styles;
   hier nur Formular-Abstände in der Karte und die Kopf-Aktionen (Speichern/Abbrechen). */
.pb-edit-form {
    padding-top: 0.75rem;
    padding-bottom: 1rem;
}

    .pb-edit-form .form-item-container {
        margin-bottom: 0.75rem;
    }

.pb-edit-head-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
/* "Passwort ändern"-Popup (SfDialog): kompaktes Formular, Fußzeilen-Buttons rechtsbündig mit Abstand. */
.pb-pwd-dialog .e-footer-content {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Der Dialog bekommt seine Breite als Inline-Style (Width="440px" in ProfileDataTab) — auf
   Telefonen (375px, Android oft 360px) ragt er damit über den Rand. max-width ist eine andere
   Eigenschaft als width und begrenzt den Inline-Wert deshalb ohne !important. Auf dem Desktop
   liegt 100vw weit über 440px, dort ändert die Regel also nichts. */
.pb-pwd-dialog.e-dialog {
    max-width: calc(100vw - 1.5rem);
}
/* ============ Reiter "Abholberechtigte" ============
   Pro Kind eine Karte (weiß), Kopf cremefarben. Der Bearbeiten-Modus zeigt oben ein
   Formular zum Anlegen und je Karte eine Zuweisen-Zeile (aktuell UI-Stub ohne Persistenz). */
/* neutraler Sekundär-Button (Abbrechen im Formular) */
.pb-btn-neutral {
    background: #fff;
    border: 1px solid var(--pb-border);
    color: var(--pb-muted);
}

    .pb-btn-neutral:hover {
        background: var(--pb-cream);
        color: var(--pb-value);
    }

    .pb-btn-neutral:disabled {
        background: var(--pb-cream);
        border-color: var(--pb-border);
        color: var(--pb-muted);
        opacity: 0.6;
        cursor: not-allowed;
    }

        /* Hover im deaktivierten Zustand unterdrücken, damit der Button "tot" bleibt */
        .pb-btn-neutral:disabled:hover {
            background: var(--pb-cream);
            color: var(--pb-muted);
        }
/* Kopf-Aktionen im Bearbeiten-Modus (Abbrechen + Fertig) */
.pb-pickup-edit-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* "Neue Person anlegen"-Bereich */
.pb-pickup-new {
    margin-bottom: 1.25rem;
    padding-inline: 1rem;
}

.pb-pickup-add-toggle {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px dashed var(--color-component-border);
    color: var(--pb-primary);
    border-radius: var(--border-radius);
    padding: 1rem 1rem;
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    justify-content: center;
}

    .pb-pickup-add-toggle:hover {
        background: var(--pb-cream);
        border-color: var(--pb-primary);
    }
/* Anlege-Formular */
.pb-pickup-form {
    background: #fff;
    border: 1px solid var(--pb-border);
    border-radius: var(--border-radius);
}

.pb-pickup-form-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    /* Rechts bleibt der Platz des absolut liegenden Schließen-Buttons frei, sonst läuft der
       Titel darunter — gemessen bei 375px endete er bei 316px, der Button beginnt bei 294px. */
    padding: 0.9rem calc(var(--pb-close-inset) + var(--pb-close-size)) 0.9rem 1.1rem;
    border-bottom: 1px solid #eee;
}

.pb-pickup-form-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    background: var(--pb-primary);
    color: #fff;
    flex: 0 0 auto;
}

.pb-pickup-form-head-main {
    flex: 1;
}

.pb-pickup-form-title {
    font-weight: 700;
    color: var(--pb-value);
}

.pb-pickup-form-sub {
    color: var(--pb-label);
    font-size: var(--font-size-small);
}

.pb-pickup-form-close {
    position: absolute;
    top: var(--pb-close-inset);
    right: var(--pb-close-inset);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pb-close-size);
    height: var(--pb-close-size);
    background-color: transparent;
    border: none;
    color: var(--pb-label);
    cursor: pointer;
    font-size: var(--font-size-lead);
}

    .pb-pickup-form-close:hover {
        color: var(--pb-value);
    }

.pb-new-app-close {
    position: absolute;
    top: var(--pb-close-inset);
    right: var(--pb-close-inset);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pb-close-size);
    height: var(--pb-close-size);
    background-color: transparent;
    border: none;
    color: var(--pb-label);
    cursor: pointer;
    font-size: var(--font-size-lead);
}

    .pb-new-app-close:hover {
        color: var(--pb-value);
    }

.pb-pickup-form-body {
    padding: 1.125rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.125rem;
}
/* Formularfelder nutzen die globalen form-item-*-Styles (wie Antrag/Registrierung). */

.pb-pickup-form-foot {
    padding: 0.9rem 1.1rem;
    background: #faf9f3;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    flex-wrap: wrap;
}

.pb-pickup-form-hint {
    color: var(--pb-label);
    font-size: var(--font-size-small);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

    .pb-pickup-form-hint i {
        color: #b9a98f;
    }

.pb-pickup-form-error {
    color: #c0392b;
    font-size: var(--font-size-small);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pb-pickup-action-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(192, 57, 43, .08);
    border: 1px solid rgba(192, 57, 43, .35);
    color: #c0392b;
    border-radius: var(--border-radius);
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    font-size: var(--font-size-small);
    font-weight: 500;
}

.pb-pickup-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/* Kartenliste pro Kind */
.pb-pickup-cards {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pb-pickup-card {
    background: #fff;
    border: 1px solid var(--pb-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.pb-pickup-card-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 13px 1.125rem;
    background: var(--pb-cream-strong);
    border-bottom: 1px solid var(--pb-border-soft);
}

    .pb-pickup-card-head > i {
        color: var(--pb-primary);
        font-size: 1.5rem;
    }

.pb-pickup-card-name {
    font-weight: 700;
    color: var(--pb-primary);
    font-size: var(--font-size-lead);
    flex: 1;
}

.pb-pickup-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--pb-border-soft);
    color: var(--pb-muted);
    padding: 4px 11px;
    border-radius: 999px;
    font-size: var(--font-size-smaller);
    font-weight: 500;
    white-space: nowrap;
}

.pb-pickup-persons {
    padding: 4px 1.125rem;
}

.pb-pickup-person {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

    .pb-pickup-person:first-child {
        border-top: none;
    }

.pb-pickup-person-main {
    flex: 1;
    min-width: 0;
}

.pb-pickup-person-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pb-pickup-person-name {
    font-weight: 600;
    color: var(--pb-value);
}

.pb-pickup-rel {
    background: var(--pb-cream-strong);
    color: var(--pb-primary);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--font-size-smaller);
    font-weight: 500;
}

.pb-pickup-phone {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--pb-label);
    font-size: var(--font-size-small);
    margin-top: 4px;
}

    .pb-pickup-phone i {
        font-size: var(--font-size-smaller);
    }

.link-button {
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}
/* Elternteile: statt "Entfernen" ein gesperrter Hinweis (dürfen sich nicht selbst entfernen). */
.pb-pickup-locked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pb-label);
    font-size: var(--font-size-smaller);
    white-space: nowrap;
}

    .pb-pickup-locked i {
        color: #b9a98f;
    }

.pb-pickup-none {
    padding: 1.375rem 1.125rem;
    color: var(--pb-label);
    font-size: var(--font-size-small);
    display: flex;
    align-items: center;
    gap: 9px;
}

    .pb-pickup-none i {
        color: #b9a98f;
    }
/* Zuweisen-Zeile (Bearbeiten-Modus) */
.pb-pickup-assign {
    padding: 0.9rem 1.125rem;
    background: var(--pb-cream);
    border-top: 1px solid var(--pb-border-soft);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pb-pickup-assign-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pb-muted);
    font-size: var(--font-size-small);
    font-weight: 500;
}

    .pb-pickup-assign-label i {
        color: var(--pb-primary);
    }

.pb-pickup-assign-select {
    flex: 1 1 10rem;
    min-width: 10rem;
}

    .pb-pickup-assign-select .e-input-group.e-control-wrapper.e-ddl input.e-dropdownlist,
    .pb-pickup-assign-select .e-float-input.e-control-wrapper.e-ddl input.e-dropdownlist {
        background-color: white;
    }

    .pb-pickup-assign-select .e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
    .pb-pickup-assign-select .e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
        background-color: white;
    }

.pb-pickup-assign-hint {
    color: var(--pb-label);
    font-size: var(--font-size-small);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .pb-pickup-assign-hint i {
        color: #b9a98f;
    }

/* Kontaktpool (oben, komplett + durchgehend bearbeitbar) */
.pb-pickup-pool {
    background: #fff;
    border: 1px solid var(--pb-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 1.75rem;
}

.pb-pickup-pool-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 13px 1.125rem;
    background: var(--pb-cream-strong);
    border-bottom: 1px solid var(--pb-border-soft);
}

.pb-pickup-pool-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    font-weight: 700;
    color: var(--pb-primary);
    font-size: var(--font-size-lead);
}

.pb-pickup-pool-list {
    display: flex;
    flex-direction: column;
}

.pb-pickup-pool-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.125rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

    .pb-pickup-pool-item:first-child {
        border-top: none;
    }

    /* Im Bearbeiten-Modus: die Zeile ist eine eigenständige Karte über volle Breite (kein Flex-Row). */
    .pb-pickup-pool-item.is-editing {
        display: block;
    }

.pb-pickup-pool-item-body {
    flex: 1;
    min-width: 0;
}

/* Aufgeklappte Bearbeiten-Karte einer Pool-Person (Kopf mit Badge/Name/Zuklappen, Felder, Fuß mit Aktionen). */
.pb-pickup-pool-edit {
    background: #fff;
}

.pb-pickup-pool-edit-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}

.pb-pickup-pool-edit-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--pb-cream-strong);
    color: var(--pb-primary);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--font-size-smaller);
    font-weight: 600;
    white-space: nowrap;
}

.pb-pickup-pool-edit-name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    color: var(--pb-value);
}

.pb-pickup-pool-edit-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 1rem;
}

/* Kompakte Lese-Ansicht eines Kontakts. */
.pb-pickup-pool-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pb-pickup-pool-summary-name {
    font-weight: 600;
    color: var(--pb-value);
}

.pb-pickup-pool-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 1.125rem;
    color: var(--pb-label);
    font-size: var(--font-size-small);
}

    .pb-pickup-pool-summary-meta span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .pb-pickup-pool-summary-meta i {
        color: #b9a98f;
        font-size: var(--font-size-smaller);
    }

/* Feldraster einer aufgeklappten Pool-Zeile (wie das Anlege-Formular, etwas kompakter). */
.pb-pickup-pool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1rem;
}

.pb-pickup-pool-item-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Einheitliche Icon-Aktionsbuttons (Kontaktpool + Zuweisungszeilen) — Design-Handoff 2026-07-17. */
.pb-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: #faf6ef;
    border: 1px solid #eee2d0;
    color: #7a6a6a;
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.8125rem;
    flex: 0 0 auto;
}

    .pb-icon-btn:hover {
        border-color: var(--pb-primary);
        color: var(--pb-primary);
    }

/* Löschen / Entfernen. */
.pb-icon-btn-danger {
    background: #fff;
    border-color: #f2dcd8;
    color: #c0392b;
}

    .pb-icon-btn-danger:hover {
        background: rgba(192, 57, 43, .08);
        border-color: #c0392b;
        color: #c0392b;
    }

/* Gesperrt (zugewiesene Person / Elternteil): dezent, nicht klickbar. */
.pb-icon-btn-lock {
    background: transparent;
    border: none;
    color: #cbb8a4;
    cursor: default;
}

    .pb-icon-btn-lock:hover {
        background: transparent;
        color: #cbb8a4;
    }

/* Readonly-Beziehungs-Dropdown bei Elternteilen: gedämpft statt aktiv. */
.pb-pickup-person-rel-readonly .e-input-group.e-control-wrapper.e-ddl,
.pb-pickup-person-rel-readonly .e-float-input.e-control-wrapper.e-ddl {
    background-color: #f7f4ee;
}

    .pb-pickup-person-rel-readonly .e-input-group.e-control-wrapper.e-ddl input.e-dropdownlist,
    .pb-pickup-person-rel-readonly .e-float-input.e-control-wrapper.e-ddl input.e-dropdownlist {
        background-color: #f7f4ee;
        color: var(--pb-label);
        cursor: not-allowed;
    }

/* Abschnitts-Bruch zwischen Kontaktpool und Kind-Zuweisungen. */
.pb-pickup-assign-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 1rem 0;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--pb-border-soft);
    font-weight: 700;
    font-size: var(--font-size-lead);
    color: var(--pb-primary);
}

    .pb-pickup-assign-heading i {
        font-size: 1.35rem;
    }

/* Beziehungs-Dropdown in einer zugewiesenen Person-Zeile. */
.pb-pickup-person-rel {
    flex: 0 0 auto;
    min-width: 12rem;
}

    .pb-pickup-person-rel .e-input-group.e-control-wrapper.e-ddl input.e-dropdownlist,
    .pb-pickup-person-rel .e-float-input.e-control-wrapper.e-ddl input.e-dropdownlist {
        background-color: white;
    }
/* Responsive/Mobile-Regeln gesammelt am Dateiende (siehe Abschnitt "Mobile-Optimierung"). */
/* ============ Readonly Detailansicht einzelner An-/Verträge (ProfileDocumentDetail) ============
   Inline anstelle der Liste; Kopf mit Zurück-Link, Titel + Status-Badge, dann Abschnitts-Panels. */
.pb-detail-back {
    margin: -1rem 0 0.75rem 0;
}

.pb-detail-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pb-detail-icon {
    font-size: 1.5rem;
    color: var(--pb-primary);
    flex: 0 0 auto;
}

.pb-detail-panels {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.pb-detail-actions {
    margin-top: 1.125rem;
    border-top: none;
    padding: 0;
}
/* Untergruppen innerhalb eines Detail-Panels (z. B. je Abholberechtigte:r): Kopf (Name + Beziehung)
   plus normale Label/Wert-Zeilen wie in den übrigen Abschnitten. */
.pb-detail-subitem {
    padding: 0.25rem 0;
}

    .pb-detail-subitem + .pb-detail-subitem {
        border-top: 1px solid var(--pb-border-soft);
        margin-top: 0.25rem;
        padding-top: 0.75rem;
    }

.pb-detail-subitem-head {
    margin-top: 0.5rem;
    margin-bottom: 0.35rem;
}

.pb-detail-subitem > .pb-row:first-of-type {
    border-top: none;
}
/* Neuer-Antrag-Auswahl (Kita/TMD) im Reiter Anträge */
.pb-new-app {
    background: #fff;
    border: 1px solid var(--pb-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 1.125rem;
}

.pb-new-app-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Wie bei .pb-pickup-form-head: Freiraum für den absolut liegenden Schließen-Button. */
    padding: 1rem calc(var(--pb-close-inset) + var(--pb-close-size)) 1rem 1.125rem;
    background: var(--pb-cream-strong);
    border-bottom: 1px solid var(--pb-border);
}

.pb-new-app-title {
    font-weight: 700;
    color: var(--pb-primary);
}

.pb-new-app-sub {
    color: var(--pb-label);
    font-size: var(--font-size-small);
    margin-top: 2px;
}

.pb-new-app-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.125rem;
}

.pb-new-app-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    border: 1px solid var(--pb-border);
    border-radius: var(--border-radius);
    padding: 0 1rem 0 0;
    height: 4rem;
    background: #fff;
}

    .pb-new-app-card:hover {
        border-color: var(--pb-primary);
        background: var(--pb-cream);
    }

.pb-new-app-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
}

.pb-new-app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    width: 4rem;
    height: 100%;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    background: var(--pb-cream-strong);
    color: var(--pb-primary);
    font-size: 1.375rem;
    flex: 0 0 auto;
}

.pb-new-app-card-title {
    font-weight: 700;
    color: var(--pb-value);
    font-size: var(--font-size-lead);
}

.pb-new-app-card-desc {
    color: var(--pb-label);
    font-size: var(--font-size-small);
    line-height: 1.5;
}

.pb-new-app-card-cta {
    color: var(--pb-primary);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pb-action-button {
    position: relative;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    width: fit-content;
    min-width: 0;
    color: var(--pb-primary);
    padding: 0;
    gap: 10px;
}

/* =====================================================================
   Mobile-Optimierung (Claude-Design-Handoff „Persönlicher Bereich Mobile")
   Bewusst am Dateiende gesammelt, damit die Overrides in der Quell-
   reihenfolge nach allen Basis-Regeln stehen und zuverlässig greifen.
   Breakpoints: Tablet ≤62rem, Smartphone ≤45rem, sehr schmal ≤26rem.
   ===================================================================== */

/* --- Tablet & darunter (≤ 62rem / ~992px) --- */
@media (max-width: 62rem) {
    /* Anlege-Formular + Pool-Zeilen Abholberechtigte: 3 Spalten auf Desktop -> 2 auf Tablet. */
    .pb-pickup-form-body,
    .pb-pickup-pool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Kontrakt-/Antragszeilen: 4 Spalten sind auf schmalen Screens unlesbar -> 2 Spalten. */
    .pb-panel-body-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Zahlungskarten: feste 21rem-Mindestbreite lief über den Rand -> flexibler. */
    .pb-cards-payments {
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    }

    /* Antragsart-Kacheln (Kita/TMD): auf Desktop eine Zeile [Icon | Titel | CTA].
       Sobald die Kachel schmaler wird (2-Spalten-Tablet bis Smartphone), passen
       langer Titel ("Tagesmutterdienst") + CTA nicht mehr nebeneinander -> die CTA
       würde abgeschnitten. Deshalb hier Grid: Icon als volle Höhe links, Titel oben,
       CTA darunter. Gilt für den gesamten Bereich <= 62rem (inkl. Smartphone). */
    .pb-new-app-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: "icon title" "icon cta";
        height: auto;
        min-height: 4rem;
        padding: 0;
    }

    .pb-new-app-icon {
        grid-area: icon;
        height: auto;
        align-self: stretch;
    }

    .pb-new-app-card-head {
        grid-area: title;
        align-self: end;
        padding-top: 0.6rem;
    }

    .pb-new-app-card-cta {
        grid-area: cta;
        align-self: start;
        padding: 0.15rem 1rem 0.6rem 0;
    }

    /* Zuweisen-Zeile: die beiden Dropdowns (Kontakt + Beziehung) passen neben Label und
       Zuweisen-Button erst ab Desktop-Breite nebeneinander. Bis 62rem deshalb jeweils über die
       volle Breite, der Button daran angeglichen. Überschrieben wird die flex-BASIS (Basis der
       Grundregel: flex: 1 1 10rem) — ein width: 100% bliebe am Flex-Item wirkungslos. */
    .pb-pickup-assign-select {
        flex: 1 1 100%;
        min-width: 0;
    }

    .pb-pickup-assign .pb-btn-primary {
        width: 100%;
    }

    .pb-tabs {
        padding: 0 1.25rem;
    }

    .pb-main {
        padding: 1.5rem;
    }
}

/* --- Smartphone (≤ 45rem / ~720px) --- */
@media (max-width: 45rem) {
    /* Alle mehrspaltigen Raster einspaltig. */
    .pb-grid-2,
    .pb-panel-body-2,
    .pb-panel-body-3,
    .pb-panel-body-4,
    .pb-cards-children,
    .pb-cards-payments,
    .pb-new-app-grid,
    .pb-pickup-form-body,
    .pb-pickup-pool-grid {
        grid-template-columns: 1fr;
    }

    /* Beziehungs-Dropdown der zugewiesenen Person über volle Breite. */
    .pb-pickup-person-rel {
        min-width: 0;
        width: 100%;
    }

    /* Pool-Zeile umbrechen: Aktionen rutschen unter die Felder/Zusammenfassung. */
    .pb-pickup-pool-item {
        flex-wrap: wrap;
    }

    .pb-pickup-pool-item-actions {
        padding-top: 0;
    }

    /* Einspaltig fehlt bei den 4-Spalten-Zeilen sonst ab der 2. Zeile der obere Trenner. */
    .pb-panel-body-4 > .pb-row:nth-child(-n + 4) {
        border-top: 1px dashed var(--pb-dash);
    }

    .pb-panel-body-4 > .pb-row:nth-child(1) {
        border-top: none;
    }

    /* Kleinere Display-Überschriften. */
    .pb-hero-title {
        font-size: 2rem;
    }

    .pb-h2 {
        font-size: 1.7rem;
    }

    /* Weniger vertikaler Leerraum, damit der Inhalt nicht erst weit unten beginnt. */
    .pb-shell {
        padding: 4rem 0;
    }

    .pb-card {
        min-height: 0;
    }

    .pb-hero {
        padding: 1.25rem;
    }

    .pb-main {
        padding: 1.125rem;
    }

    /* Reiter-Leiste als Tabelle: zwei Spalten zu je 50%, die Reiter füllen sie zeilenweise.
       Vorher lief die Leiste waagrecht scrollbar — die hinteren Reiter waren dabei nicht zu
       sehen und der Wisch-Hinweis blieb subtil. Im Raster liegt jeder Reiter sichtbar da,
       die Zellen sind gleich breit (unabhängig von der Länge der Beschriftung) und die
       Beschriftung darf umbrechen statt abgeschnitten zu werden. Bei ungerader Reiter-Anzahl
       bleibt die letzte Zelle bewusst halbbreit — volle Breite würde den letzten Reiter
       gegenüber den anderen hervorheben. */
    .pb-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding-inline: 0;
        overflow: visible;
    }

    .pb-tab {
        justify-content: flex-start;
        text-align: left;
        gap: 0.5rem;
        padding: 0.75rem var(--pb-tab-inline);
        font-size: var(--font-size-small);
        white-space: normal;
        /* Ohne das schiebt eine lange Beschriftung die Zelle über ihre 50% hinaus. */
        min-width: 0;
        /* Zellenraster: Trenner nach rechts und nach oben. Die Grundregel setzt border-left/right
           auf none, deshalb hier die volle Kurzschreibweise statt nur -color/-width. */
        border-right: 1px solid var(--pb-dash);
        border-top: 1px solid var(--pb-dash);
        border-bottom: 3px solid transparent;
    }

        /* Rechte Spalte: kein Trenner zum Rand hin. */
        .pb-tab:nth-child(2n) {
            border-right: 0;
        }

        /* Erste Zeile: den oberen Trenner zieht bereits die Unterkante des Hero-Bands. */
        .pb-tab:nth-child(-n + 2) {
            border-top: 0;
        }

        /* Das Symbol hat feste Maße und darf nicht schrumpfen, wenn der Text umbricht. */
        .pb-tab i {
            flex: 0 0 auto;
        }

        /* Die Beschriftung ist das einzige Element, das nachgeben darf. min-width: 0 hebt die
           Mindestbreite auf, die ein Flex-Kind sonst aus seinem Inhalt zieht; overflow-wrap
           fängt den Fall ab, dass ein einzelnes Wort (deutsche Komposita) auch dann noch breiter
           ist als die Zelle — sonst liefe es wieder über den Trenner hinaus. Zum Tragen kommt das
           erst unterhalb von rund 330px Gerätebreite; die Zelle wird dann zweizeilig. */
        .pb-tab > span:not(.pb-pill) {
            min-width: 0;
            overflow-wrap: anywhere;
        }

        /* Kein Zähler in der Tabellen-Ansicht: die Pille kostet mitsamt Abstand rund 40px, und
           die fehlen der Beschriftung. Mit ihr ragte "Zahlungsmethoden 4" bei 375px 18px über
           seine Zelle hinaus und lief über den Trenner in die Nachbarzelle. Die Anzahl steht
           im Reiter selbst ohnehin noch einmal über der Liste. */
        .pb-tab .pb-pill {
            display: none;
        }

        /* Im Raster trägt die 3px-Unterkante allein zu wenig — die gefüllte Zelle zeigt,
           welcher Reiter offen ist. */
        .pb-tab.pb-tab-active {
            background: var(--pb-cream);
        }

    /* Status-Badges und Filter-Chips halten ihren Text auf dem Desktop bewusst in einer Zeile
       (white-space: nowrap), damit die Pillenform erhalten bleibt. Auf dem Telefon reicht die
       Breite dafür nicht: gemessen bei 375px ragte ein Status wie "Warten auf Unterschrift des
       2. Erziehungsberechtigten" als Badge 391px und als Chip 381px über den Rand und schob die
       ganze Seite in den Querlauf. Ab etwa 40 Zeichen passiert das. Hier darf der Text deshalb
       umbrechen — die Pille wird dann zwei- statt einzeilig, bleibt aber im Bild. */
    .pb-badge,
    .pb-filter-item {
        white-space: normal;
    }

    /* Kopfzeilen mit Aktion: Titel oben, Button darunter über volle Breite statt gequetscht. */
    .pb-section-head {
        align-items: flex-start;
    }

        .pb-section-head .pb-btn,
        .pb-section-head .pb-btn-primary {
            align-self: stretch;
            justify-content: center;
        }

    .pb-detail-back {
        margin: -0.5rem 0 0.75rem 0;
    }

    .pb-detail-icon {
        display: none;
    }

    .pb-subtabs {
        margin-top: 0;
    }

    /* Panel-Kopf mit Status-Badge sauber umbrechen. */
    .pb-panel-head-split {
        align-items: flex-start;
        gap: 8px;
    }

    /* Aktionsleiste am Kartenfuß: auf schmalen Screens passen mehrere Buttons
       (oder ein langer wie "Warten auf 2. Unterschrift") nicht nebeneinander.
       Statt sie umbrechen zu lassen (dann hängt der senkrechte Trenner ins Leere)
       werden sie als vollbreite Liste gestapelt, getrennt durch waagrechte Linien. */
    .pb-panel-actions {
        height: auto;
        flex-direction: column;
        align-items: stretch;
    }

        .pb-panel-actions .pb-action-button {
            width: 100%;
            justify-content: flex-start;
            padding-block: 0.75rem;
            border-right: 0;
            border-top: 1px solid var(--pb-border-soft);
        }

            .pb-panel-actions .pb-action-button:first-child {
                border-top: 0;
            }

    /* Abholberechtigte: Name/Telefon + Aktions-Icon bleiben in Zeile 1, das
       Beziehungs-Dropdown rutscht darunter über die volle Breite. Ohne die
       order-Umsortierung landet der Aktionsbutton (Quellreihenfolge:
       Haupt -> Dropdown -> Button) sonst allein unter dem Dropdown. */
    .pb-pickup-person {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px 10px;
    }

    .pb-pickup-person-main {
        order: 0;
    }

    .pb-pickup-person > .pb-icon-btn {
        order: 1;
    }

    .pb-pickup-person-rel {
        order: 2;
    }
}

/* --- Randlos statt Karte: unterhalb von Bootstraps sm-Breakpoint (< 576px) ---
   Die Karte kostet 19px pro Seite, die dem Inhalt fehlen: 12px .container + 12px .col-12
   + 1px Rahmen + 18px .pb-main lassen den Text erst bei 43px beginnen, während die Navbar
   bei 24px einrückt. Auf schmalen Screens verschwindet die Karte deshalb — Hero, Reiter und
   Inhalt laufen randlos durch, die verschachtelten Bootstrap-Abstände der Wrapper entfallen,
   und den gesamten Seitenabstand stellt ein einziger Innenabstand (--pb-gutter) auf dem
   Raster der Navbar. Die Trennlinien von .pb-hero und .pb-tabs bleiben und gliedern weiter.

   Die Grenze liegt bewusst hier und nicht bei den 45rem der übrigen Mobile-Regeln: nur
   unter 576px ist .container tatsächlich bildschirmbreit. Ab 576px deckelt Bootstrap ihn
   auf max-width: 540px — randlos würde dann bedeuten, dass Hero-Band und Reiter-Trennlinie
   mitten im Bildschirm abbrechen und die Karte aussieht wie eine mit vergessenem Rahmen.
   Zwischen 576px und 720px bleibt sie deshalb stehen. Es ist Bootstraps Zahl, nicht unsere,
   darum px statt der sonst in dieser Datei verwendeten rem. */
@media (max-width: 575.98px) {
    .pb-root .container,
    .pb-root .col-12 {
        padding-inline: 0;
    }

    .pb-card {
        border: 0;
        border-radius: 0;
    }

    .pb-hero {
        border-radius: 0;
        /* Ohne Kartenrahmen fehlt dem cremefarbenen Band die obere Kante — der Hero zieht sie
           hier selbst. Oberhalb dieses Breakpoints übernimmt das der Rahmen von .pb-card;
           beides zusammen ergäbe eine doppelte Linie am Kartenkopf. */
        border-top: 1px solid var(--pb-border-soft);
        padding: 1.25rem var(--pb-gutter);
    }

    .pb-main {
        padding: 1.125rem var(--pb-gutter);
    }

    /* Randlos läuft das Reiter-Raster bis an den Bildschirmrand, damit die Trennlinien der
       Zellen nicht in der Luft enden. Den Seitenabstand tragen daher die äußeren Zellen
       selbst — so sitzt die Beschriftung der linken Spalte auf derselben Gutter-Kante wie
       Hero und Inhalt, ohne dass die Zellen ihre 50% verlieren. */
    .pb-tab:nth-child(2n + 1) {
        padding-left: var(--pb-gutter);
    }

    .pb-tab:nth-child(2n) {
        padding-right: var(--pb-gutter);
    }
}

/* --- Sehr schmal (≤ 26rem / ~416px) --- */
@media (max-width: 26rem) {
    .pb-hero-title {
        font-size: 1.7rem;
    }

    .pb-identity {
        gap: 0.75rem;
    }
}