/* Kopf- und Fußzeile, gemeinsam für zehn Seiten.
 *
 * Bis zum 18.09.2026 hatten die Konten-Seiten diese Leiste (als `kg-kopf` in
 * `konto.css`), während Landung, Kunden-Start und Vorbereitungsseite je eine
 * eigene mitbrachten. Ein Kunde, der vom Einladungslink über die Startseite zur
 * Anmeldung ging, sah dabei dreimal einen anderen Kopf.
 *
 * ⛔ **Die beiden Dashboards bleiben bewusst außen vor.** Dort ist der Kopf keine
 * Marke, sondern Arbeitsfläche: Verbindungszustand, Plattform-Anzeige, Steuerung —
 * und jede Zeile über dem Kamerabild fehlt beim Begutachten.
 *
 * ⚠️ Das Markup steht in jeder Seite gleich. `tests/pages-kopfzeile.test.js`
 * vergleicht es Zeichen für Zeichen; läuft eine Seite weg, fällt es dort auf.
 */

/* ---------- Kopf ---------- */

.kg-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    padding: 1.25rem 1rem;
}

.kg-marke {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-stark);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    text-decoration: none;
}

/* Die Catinity-Bildmarke vor dem Namen: der einzige Farbtupfer der Leiste —
   „Die einzige Farbe im Bild ist der Akzent."
 *
 * ⚠️ `width`/`height` stehen zusätzlich am Bild selbst, damit die Zeile beim Laden
 * nicht springt. Das Zeichen ist freigestellt und trägt seine Farbe mit; es braucht
 * hier keinen Grund, weil die Leiste ohnehin auf dem dunklen Grund sitzt. */
.kg-marke-bild {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    display: block;
}

/* Der frühere Punkt. Bleibt als Regel stehen, solange irgendwo noch eine Seite
   ohne Bildmarke auftaucht — sie fällt dann nicht auf einen leeren Fleck zurück. */
.kg-marke-punkt {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--akzent);
}

.kg-marke span.kg-marke-tld {
    color: var(--akzent);
}

.kg-kopf-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.kg-kopf-nav a,
.kg-fuss a {
    color: var(--akzent);
    text-underline-offset: 0.2em;
}

.kg-kopf-nav a:focus-visible,
.kg-fuss a:focus-visible,
.kg-marke:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
    border-radius: var(--radius-eingabe);
}

/* ---------- Fuß ---------- */

.kg-fuss {
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 2rem;
    color: var(--text-schwach);
    font-size: 0.875rem;
    text-align: center;
}

/* ---------- Sprungmarke ---------- */

/* Die erste Tabulatorstelle jeder Seite: springt an den Inhalt vorbei an der
   Navigation. Sichtbar nur, wenn sie den Fokus hat. */
.kg-skip {
    position: absolute;
    top: -3rem;
    left: 1rem;
    z-index: 100;
    padding: 0.5rem 0.75rem;
    background: var(--akzent);
    color: var(--grund);
    border-radius: var(--radius-knopf);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s;
}

.kg-skip:focus {
    top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .kg-skip {
        transition: none;
    }
}

/* ---------- Druck ---------- */

@media print {
    .kg-kopf,
    .kg-fuss,
    .kg-skip {
        display: none;
    }
}