/*
 * Gemeinsamer Seitenkopf aller NBBV-Webservices (Meldeportal, SR-Abrechnung, Kalender-Abo,
 * Spielplan-API-Doku und Spielebörse, dort als Kopie in srbasar-frontend src/styles/nbbv-header.css).
 *
 * Aufbau: [Logo → nbbv.de] [Name (fett) Zusatz (grau, kleiner)] … [Aktionen]
 *
 * Eigene Seite:  Logo links, Kopf läuft beim Scrollen mit und wird schmaler;
 *                vom Logo bleibt dann nur die Bildmarke „NBBV“ (wie auf nbbv.de).
 * Eingebettet:   (html.embedded, per shared/header.js) schlicht: gleicher Titel, aber ohne
 *                Logo, ohne Leiste und ohne Mitlaufen – nbbv.de zeigt Logo und Navigation.
 *
 * Der Kopf ist so breit wie der Inhalt des Dienstes darunter und hat dieselben Seitenränder,
 * damit Logo und Titel bündig mit Feldern und orangen Trennlinien stehen.
 * Breite je Dienst über --nbbv-header-max (Standard 1600px wie .full-width-container im
 * Meldeportal; SR-Abrechnung 900px wie .wrap, Spielebörse 1180px wie .mvp-main).
 */

.nbbv-header {
    --logo-img: 52px;              /* Höhe des ganzen Logos */
    --logo-box: 52px;              /* sichtbarer Ausschnitt */
    --logo-mark: 0.63;             /* Anteil der Bildmarke ohne Schriftzug */
    position: sticky;
    top: 0;
    z-index: 40;
    margin-bottom: 12px;
    background: #fff;
    border-bottom: 1px solid var(--nbbv-line);
    box-shadow: 0 2px 12px rgba(0, 46, 72, 0);
    transition: box-shadow 0.3s ease;
}

.nbbv-header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: var(--nbbv-header-max, 1600px);
    margin: 0 auto;
    padding: 10px 12px;
    text-align: left;
    transition: padding 0.4s cubic-bezier(0.55, 0, 0.1, 1);
}

.nbbv-header-logo {
    flex: none;
    height: var(--logo-box);
    overflow: hidden;
    line-height: 0;
    transition: height 0.4s cubic-bezier(0.55, 0, 0.1, 1);
}

.nbbv-header-logo img {
    display: block;
    width: auto;
    height: var(--logo-img);
    transition: height 0.4s cubic-bezier(0.55, 0, 0.1, 1);
}

.nbbv-header-title {
    min-width: 0;
    margin: 0;
    color: var(--nbbv-navy);
    font-size: 1em;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
}

.nbbv-header-name {
    /* Schriftstufen aus nbbv.css: Name „Titel“ (Handy und eingeklappt „groß“), Zusatz „klein“ */
    font-size: var(--nbbv-fs-title);
    font-weight: 700;
    transition: font-size 0.4s cubic-bezier(0.55, 0, 0.1, 1);
}

.nbbv-header-sub {
    color: var(--nbbv-muted);
    font-size: var(--nbbv-fs-small);
}

.nbbv-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* ── Eingeklappt (beim Scrollen) ──────────────────────────────────────────── */
.nbbv-header.is-condensed {
    --logo-img: 44px;
    --logo-box: calc(44px * var(--logo-mark));
    box-shadow: var(--nbbv-shadow);
}

.nbbv-header.is-condensed .nbbv-header-inner {
    padding-top: 6px;
    padding-bottom: 6px;
}

.nbbv-header.is-condensed .nbbv-header-name {
    font-size: var(--nbbv-fs-lg);
}

/* ── Eingebettet (iFrame auf nbbv.de) ─────────────────────────────────────── */
html.embedded .nbbv-header {
    position: static;
    background: none;
    border-bottom: 0;
    box-shadow: none;
}

html.embedded .nbbv-header-logo {
    display: none;
}

html.embedded .nbbv-header-inner {
    padding-top: 0;
}

/* ── Breakpoints wie in den Diensten: ≤ 900px Tablet, ≤ 600px Smartphone ──── */
@media (max-width: 900px) {
    .nbbv-header {
        --logo-img: 44px;
        --logo-box: 44px;
    }
}

@media (max-width: 600px) {
    .nbbv-header {
        --logo-img: 40px;
        --logo-box: 40px;
    }
    .nbbv-header.is-condensed {
        --logo-img: 36px;
        --logo-box: calc(36px * var(--logo-mark));
    }
    .nbbv-header-inner {
        flex-wrap: wrap;
        gap: 8px 12px;
        padding: 8px;
    }
    .nbbv-header-title {
        /* neben dem Logo bleiben und dort umbrechen statt in eine eigene Zeile zu rutschen */
        flex: 1 1 0;
    }
    .nbbv-header-name {
        font-size: var(--nbbv-fs-lg);
    }
    .nbbv-header-actions {
        margin-left: 0;
        width: 100%;
    }
    /* Eingeklappt am Handy nur Bildmarke und Name */
    .nbbv-header.is-condensed .nbbv-header-sub,
    .nbbv-header.is-condensed .nbbv-header-actions {
        display: none;
    }
}