/* 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);
    color: var(--pb-text);
    font-family: 'Ubuntu', 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);
    }

.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;
}

/* 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: 'LobsterTwo', 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);
        }

        /* 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: 'Ubuntu', 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;
}
/* ============ 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;
    padding: 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: .5rem;
    right: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    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: .5rem;
    right: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    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;
    padding: 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;
    }

    .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;
    }

    /* Nur der Container des Persönlichen Bereichs, nicht global. */
    .pb-root .container {
        padding: 0 12px;
    }

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

    .pb-hero {
        padding: 1.25rem;
    }

    .pb-main {
        padding: 1.125rem;
    }

    /* Reiter-Leiste horizontal scrollbar statt umbrechen (kompakter, kein Höhensprung). */
    .pb-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0;
        padding: 0 0.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .pb-tabs::-webkit-scrollbar {
            display: none;
        }

    .pb-tab {
        padding: 0.85rem 0.75rem;
        white-space: nowrap;
        flex: 0 0 auto;
        font-size: var(--font-size-small);
    }

    /* 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;
    }

    /* Zuweisen-Dropdown (Bearbeiten-Modus) über volle Breite. */
    .pb-pickup-assign-select {
        min-width: 0;
        width: 100%;
    }

    /* Zuweisen-Button an die vollbreiten Dropdowns angleichen. */
    .pb-pickup-assign .pb-btn-primary {
        width: 100%;
    }
}

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

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