.navbar {
    width: calc(100% - 64px);
    min-height: 82px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 38px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #18140d url('Bilder/Logo1.jpg') center / cover no-repeat; color: transparent; font-family: var(--body); font-size: 0; font-weight: 700; letter-spacing: .08em; overflow: hidden; }
.nav-links {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin: 0;
    padding: 0;
}
.nav-links a { position: relative; color: var(--muted); font-size: .77rem; font-weight: 600; letter-spacing: .04em; transition: color .2s ease; }
.nav-links a::after { position: absolute; right: 0; bottom: -9px; left: 0; height: 2px; background: var(--accent); content: ""; transform: scaleX(0); transition: transform .2s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-login { margin-left: auto; padding: 11px 15px; border: 1px solid var(--accent); border-radius: 8px; color: var(--ink); font-size: .72rem; font-weight: 700; letter-spacing: .06em; transition: background .2s ease, color .2s ease; }
.nav-login:hover { background: var(--accent); color: #18140d; }
@media (max-width: 680px) { .navbar { gap: 12px; } .nav-login { padding: 9px 11px; font-size: .65rem; } }