/* ===== OO PageHeader =====
   Kopf einer Seite: links Titel, Untertitel und Stand untereinander, rechts oben die Aktionen.
   Der Text nimmt den freien Platz und bricht um; die Aktionen behalten ihre volle Breite.
   Wird der Text schmaler als --oo-page-header-text-min (Handy), rutschen die Aktionen in eine eigene Zeile darunter,
   statt Titel und Stand Wort für Wort untereinander zu quetschen; dort brechen auch die Aktionen selbst um.
   ========================= */

.oo-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--oo-space-2) var(--oo-space-4);
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

.oo-page-header__text {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-1);
    flex: 1 1 0;
    min-width: min(var(--oo-page-header-text-min, 14rem), 100%);
}

.oo-page-header__title {
    font-size: calc(var(--oo-font-size-xl) * 1.4);
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.oo-page-header__subtitle,
.oo-page-header__status {
    color: var(--oo-color-text-subtle);
    overflow-wrap: anywhere;
}

.oo-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oo-space-2);
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
}