/* Dynamischer, websiteübergreifender Header. */
header {
    width: 100%;
}

.header-balken {
    position: fixed;
    top: var(--abstand-header-vertikal);
    left: 50%;
    z-index: 1000;

    width: min(500px, calc(100vw - (2 * var(--abstand-header-seitlich))));
    height: var(--mass-header-vertikal);
    max-height: calc(100dvh - (2 * var(--abstand-header-vertikal)));
    padding: .3125rem 1rem;

    display: flex;
    flex-direction: column;
    overflow: hidden;

    transform: translateX(-50%);
    transition: height .48s ease;
    will-change: height;
}

.header-balken.erweitert {
    height: var(--header-hoehe-erweitert, var(--mass-header-vertikal));
}

.header-anfang {
    width: 100%;
    min-height: 2rem;
    flex: 0 0 2rem;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--abstand-inhaltlich);
}

.header-statusmeldung {
    --header-statusfarbe: var(--farbe-bestaetigt);

    min-width: 0;
    justify-self: start;

    display: inline-flex;
    align-items: center;
    gap: .375rem;

    color: var(--header-statusfarbe);
    white-space: nowrap;
}

.header-statusmeldung > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: currentColor;
    font-weight: 400;
}

.header-statuszeichen {
    position: relative;
    width: .625rem;
    height: .625rem;
    flex: 0 0 .625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--header-statusfarbe);
    overflow: visible;
}

.header-statuszeichen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transform: scale(1);
    animation: header-statuspuls 5s ease-out infinite;
}

.header-statuszeichen svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    fill: var(--header-statusfarbe);
}

@keyframes header-statuspuls {
    0% {
        opacity: .3;
        transform: scale(1);
    }
    12% {
        opacity: 0;
        transform: scale(2.1);
    }
    100% {
        opacity: 0;
        transform: scale(2.1);
    }
}

.header-erkennungszeichen {
    grid-column: 2;
    width: 2rem;
    height: 2rem;
    border: .1875rem solid #266FEA2E;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.header-erkennungszeichen svg {
    width: 100%;
    height: 100%;
    display: block;
}

.header-umschalter {
    grid-column: 3;
    justify-self: end;

    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--farbe-link);
    cursor: pointer;
}

.header-winkel {
    width: var(--mass-svg);
    height: var(--mass-svg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--farbe-link);
    fill: var(--farbe-link);
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform .48s ease, scale .4s ease;
}

.header-balken.erweitert .header-winkel {
    transform: rotate(180deg);
}

.header-winkel svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: var(--farbe-link);
}

.header-umschalter:hover .header-winkel {
    scale: 1.1;
}

.header-umschalter:active .header-winkel {
    scale: .85;
}

.header-trennlinie {
    flex: 0 0 .0625rem;
    margin: .3125rem 0 .75rem;
    background: var(--farbe-schrift);
    opacity: 0;
    transition: opacity .24s ease;
}

.header-balken.erweitert .header-trennlinie {
    opacity: 1;
}

.header-inhalt {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 .25rem .5rem;

    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    opacity: 0;
    transform: translateY(-.25rem);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
}

.header-balken.erweitert .header-inhalt {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: .08s;
}

.header-gruppe {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .625rem;
}

.header-seitenspezifisch {
    width: 100%;
    margin-top: 1.5rem;
}

.header-seitenspezifisch[hidden] {
    display: none;
}

.header-dienste {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1875rem;
    padding-left: 1rem;
    list-style: disc;
}

.header-dienste > li {
    padding-left: .125rem;
}

.header-dienste > li::marker {
    color: var(--farbe-schrift);
}

.header-dienst {
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
}

.header-dienst-aktiv {
    color: var(--farbe-schrift-blass);
    cursor: default;
}

/* Einzeilige Bedienleiste für seitenspezifische Aktionen. */
.header-bedienungsleiste {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .625rem;

    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .375rem .5rem;

    -webkit-mask-image: linear-gradient(to right, #000, #000);
    mask-image: linear-gradient(to right, #000, #000);
}

.header-bedienungsleiste::-webkit-scrollbar {
    display: none;
}

.header-bedienungsleiste.kann-rechts-bewegen:not(.kann-links-bewegen) {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.5rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.5rem), transparent 100%);
}

.header-bedienungsleiste.kann-links-bewegen:not(.kann-rechts-bewegen) {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 100%);
}

.header-bedienungsleiste.kann-links-bewegen.kann-rechts-bewegen {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
}

.header-bedienungsleiste > .trennlinie {
    width: .0625rem;
    height: 1.125rem;
    flex: 0 0 .0625rem;
}

.header-wahlraster {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .5rem 1rem;
    align-items: center;
}

@media (max-width: 574px) {
    .header-balken {
        padding-inline: .75rem;
    }

    .header-statusmeldung {
        gap: .3125rem;
    }
}