/* ═══════════════════════════════════════════════════════════
   HEADER / NAV — Signal from Noise
   ═══════════════════════════════════════════════════════════ */

.header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 var(--space-8);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--line-soft);
    transition: background var(--dur-slow) ease, border-color var(--dur-slow) ease;
}

/* ── Brand ──────────────────────────────────────────────── */

.header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
}

/* Hex-Logo SVG (22px, teal fill, kein Hintergrundquadrat) */
.header__logo {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.header__logo svg path,
.header__logo svg polygon {
    fill: var(--teal);
}

.header__title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
}

.header__subtitle {
    display: none; /* In neuem Design nicht sichtbar */
}

/* ── Mono-Tag (z.B. "beta") ─────────────────────────────── */

.header__tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 5px;
    font-weight: var(--font-medium);
}

/* ── Navigation ─────────────────────────────────────────── */

.header__nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.header__link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: var(--font-medium);
    color: var(--text-muted);
    border-radius: var(--radius-lg);
    transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
    text-decoration: none;
}

.header__link:hover {
    color: var(--teal);
    background: var(--teal-soft);
}

.header__link--active {
    color: var(--teal);
    background: var(--teal-soft);
}

/* ── Actions (rechts) ───────────────────────────────────── */

.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ── User Avatar ────────────────────────────────────────── */

.header__user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.3rem var(--space-3);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--dur-fast) ease;
}

.header__user:hover { background: var(--surface-2); }

.header__user-avatar {
    width: 28px; height: 28px;
    border-radius: var(--radius-full);
    background: var(--teal-soft);
    color: var(--teal);
    display: grid;
    place-items: center;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

.header__user-name {
    font-size: var(--text-sm);
    color: var(--text-soft);
}

/* ── Theme-Toggle ───────────────────────────────────────── */

.theme-toggle {
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    transition: background var(--dur-fast) ease,
                color var(--dur-fast) ease,
                transform var(--dur-base) var(--ease-spring);
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--surface-2);
    color: var(--text);
}

.theme-toggle:active { transform: scale(0.9); }

/* Sonne = Dark Mode, Mond = Light Mode */
.theme-toggle__sun  { display: none; }
.theme-toggle__moon { display: block; }

[data-theme="dark"] .theme-toggle__sun  { display: block; }
[data-theme="dark"] .theme-toggle__moon { display: none; }

/* ── Mobile ─────────────────────────────────────────────── */

@media (max-width: 640px) {
    .header { padding: 0 var(--space-4); }
    .header__nav { display: none; }
    .header__subtitle { display: none; }
}