/* =====================================================================
   kopfzeile.css — die rote Leiste ganz oben, für ALLE Seiten
   =====================================================================
   Die Website besteht aus zwei Welten mit eigenem Markup und eigenem
   Stylesheet:

     MVC-Seiten (site.css)   <header class="bar header">  .titleWrap …
     SPA        (style.css)  <header class="kopf">        .kopf-links …

   Beide hatten ihre eigene Fassung der Kopfzeile - unterschiedlich hoch
   (76 px gegen 62 px), unterschiedlich rot (Verlauf gegen Fläche) und mit
   unterschiedlich großem Logo, Avatar und Titel. Diese Datei beschreibt
   die Leiste EINMAL für beide Markup-Varianten; maßgeblich ist die
   Startseite. Geändert wird nur noch hier.

   Wird NACH site.css bzw. style.css geladen und gewinnt dadurch bei
   gleicher Spezifität. Was seitenspezifisch bleiben MUSS, steht weiterhin
   dort: die SPA-Kopfzeile klebt beim Scrollen (position: sticky), die
   MVC-Kopfzeile sitzt in einem festen Gerüst.
   ===================================================================== */

/* ---------------- Die Leiste selbst ---------------- */

.bar.header,
.kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 76px;
    padding: 0 20px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #b10f0f 0%, #870c0c 100%);
    box-shadow: 0 6px 20px rgba(177, 15, 15, 0.22);
    color: #ffffff;
}

/* ---------------- Logo ---------------- */

.w6-logo {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    /* Schriftart fest vorgeben: site.css nutzt Inter, style.css Segoe UI -
       ohne diese Zeile stünde dasselbe "W6" je nach Seite anders da. */
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.2px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 180ms ease;
}

.w6-logo:hover { background: rgba(0, 0, 0, 0.1); }

.w6-logo:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.55);
    outline-offset: 2px;
}

/* Große Kachel auf hellem Grund (Anmeldekarte). Dort wäre die durchsichtige
   Fläche der Kopfzeile unsichtbar - deshalb rot gefüllt mit weißem Innenring,
   sonst dieselbe Formensprache. */
.w6-logo--gross {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: #c30b0c;
    border: none;
    font-size: 19px;
    box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, 0.85),
                0 6px 16px rgba(195, 11, 12, 0.28);
}

.w6-logo--gross:hover { background: #c30b0c; }

/* ---------------- Titel links ---------------- */

.titleWrap,
.kopf-links {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.titleText,
.kopf-titel {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.titleText__main,
.kopf-name {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.15;
}

.titleText__sub,
.kopf-unter {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    opacity: 1;
}

/* ---------------- Rechte Seite: Hilfe + Avatar ---------------- */

.header-right,
.kopf-rechts {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #870c0c;
    border: 1px solid rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
    cursor: pointer;
    transition: background 180ms ease;
}

.avatar:hover { background: #ffffff; transform: none; }

/* Hilfe-Knopf links neben dem Avatar (MVC: .help-link, SPA: .hilfe-knopf) */
.help-link,
.hilfe-knopf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px 0 10px;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    text-decoration: none;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 180ms ease;
}

.help-link:hover,
.hilfe-knopf:hover { background: rgba(255, 255, 255, 0.24); }

.help-link:focus-visible,
.hilfe-knopf:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.55);
    outline-offset: 2px;
}

.help-link__zeichen,
.hilfe-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #870c0c;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
}

/* ---------------- Schmale Bildschirme ---------------- */

@media (max-width: 600px) {
    .bar.header,
    .kopf {
        min-height: 64px;
        padding: 0 14px;
        gap: 10px;
    }

    .w6-logo {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 12px;
    }

    .w6-logo--gross {
        width: 52px;
        height: 52px;
        border-radius: 15px;
        font-size: 18px;
    }

    .titleText__main,
    .kopf-name { font-size: 16px; }

    .titleText__sub,
    .kopf-unter { font-size: 11px; }

    .avatar {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    /* Nur noch das Fragezeichen als runder Knopf. */
    .help-link,
    .hilfe-knopf {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        gap: 0;
    }

    .help-link__text,
    .hilfe-text { display: none; }
}