/*
 * Die Kopfzeile der Plattform — eine schwebende Glas-Kapsel. Markup:
 * templates/landing/_nav.html.twig; geladen von der Startseite und vom Rahmen
 * der Unterseiten (landing/_page.html.twig), damit die Regeln nur einmal stehen.
 *
 * Die Kopfzeile selbst ist durchsichtig und fängt keine Klicks: was unter ihr
 * liegt (der Hero mit seinen Ringen, das Papier einer Unterseite), läuft bis an
 * den oberen Rand durch. Sie bleibt beim Scrollen stehen und rückt dabei 12px
 * nach oben, damit die Kapsel dann nicht mehr so tief hängt wie über dem Hero.
 *
 * --site-head ist ihre Höhe im Seitenfluss (26px Abstand + 60px Kapsel). Wer
 * unter ihr anfangen will, zieht sich um diesen Wert hoch (der Hero der
 * Startseite); wer unter ihr kleben will, misst sie selbst (kosmetikstudio,
 * die Scroll-Story).
 */
:root { --site-head: 86px; }

header.site {
    position: sticky; top: -12px; z-index: 50;
    padding: 26px 16px 0;
    pointer-events: none;
}
header.site .nav {
    pointer-events: auto;
    max-width: 860px; margin: 0 auto;
    /* Drei Spalten: Marke | Einträge | Login und Anmeldung. Die Mitte sitzt
       dadurch wirklich mittig, und der Abstand zur Marke ergibt sich von selbst. */
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
    padding: 8px 8px 8px 22px; border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--pine) 7%, transparent),
        0 16px 36px -24px color-mix(in srgb, var(--pine) 50%, transparent);
}

.logo { display: flex; align-items: center; justify-self: start; gap: .6rem; min-height: 44px; font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; letter-spacing: -.02em; color: var(--pine); }
.logo .mark {
    width: 30px; height: 30px; border-radius: 9px; background: var(--pine);
    display: grid; place-items: center; position: relative; flex: none;
}
.logo .mark::before {
    content: ""; width: 14px; height: 14px;
    background:
        radial-gradient(circle 2.6px, var(--gold) 97%, transparent) 100% 100% / 7px 7px no-repeat,
        radial-gradient(circle 2.6px, var(--surface) 97%, transparent) 0 0 / 7px 7px no-repeat,
        radial-gradient(circle 2.6px, var(--surface) 97%, transparent) 100% 0 / 7px 7px no-repeat,
        radial-gradient(circle 2.6px, var(--surface) 97%, transparent) 0 100% / 7px 7px no-repeat;
}

.nav-links, .nav-end { display: flex; align-items: center; font-size: 15px; }
/* Die Kapsel hat links 22px, rechts 8px Innenabstand; die 7px gleichen das
   aus, damit die Einträge in der Kapsel mittig stehen, nicht nur im Raster. */
.nav-links { gap: 24px; position: relative; left: -7px; }
.nav-end { justify-self: end; gap: 16px; }
/* Touch-Ziele: Textlinks tragen ihre 44px als Höhe, nicht als Optik. */
.nav a.muted { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .4rem; margin: 0 -.4rem; color: var(--muted); white-space: nowrap; transition: color .2s; }
.nav a.muted:hover, .nav a.muted[aria-current="page"] { color: var(--pine); }
/* Beim Überfahren wächst hinter dem Eintrag eine Salbei-Pille auf; die
   aktuelle Seite trägt sie dauerhaft, etwas blasser. */
.nav a.muted { position: relative; z-index: 0; }
.nav a.muted::before {
    content: ""; position: absolute; inset: 6px -6px; z-index: -1; border-radius: 999px;
    background: color-mix(in srgb, var(--sage-deep) 75%, transparent);
    opacity: 0; transform: scale(.8);
    transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}
.nav a.muted:hover::before, .nav a.muted:focus-visible::before { opacity: 1; transform: none; }
.nav a.muted[aria-current="page"]::before { opacity: .6; transform: none; }
@media (prefers-reduced-motion: reduce) { .nav a.muted::before { transition: none; } }
/* Der Knopf in der Kapsel und der im Menü sind Pine, nicht Jade — wie der
   Hauptknopf im Hero. Ohne Schatten und ohne Anheben beim Überfahren. */
header.site .nav-end .btn, dialog.nav-menu .nav-menu-cta { background: var(--pine-soft); color: var(--paper); box-shadow: none; }
header.site .nav-end .btn:hover, dialog.nav-menu .nav-menu-cta:hover { background: var(--pine); transform: none; }
header.site .nav-end .btn { min-height: 44px; padding: 0 20px; font-size: 15px; white-space: nowrap; }
/* Ein Gimmick: beim Überfahren läuft ein goldener Lichtbogen um den Knopf, und
   er schimmert leicht. Der Bogen ist ein Kegelverlauf, von dem eine Maske nur
   den Rand stehen lässt; sein Winkel ist eine registrierte Eigenschaft, damit
   er sich animieren lässt (wo das fehlt, steht der Bogen still). Bei
   reduzierter Bewegung ist es ein ruhiger goldener Rand. */
@property --nav-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes nav-spin { to { --nav-spin: 360deg; } }
header.site .nav-end .btn { position: relative; transition: background .2s, box-shadow .3s; }
header.site .nav-end .btn::before {
    content: ""; position: absolute; inset: -3px; padding: 2px; border-radius: 999px; pointer-events: none;
    background: conic-gradient(from var(--nav-spin), transparent 0 58%, var(--gold) 80%, var(--gold-light) 92%, transparent 100%);
    -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
    -webkit-mask-composite: xor;
    mask: linear-gradient(black, black) content-box exclude, linear-gradient(black, black);
    opacity: 0; transition: opacity .2s;
}
header.site .nav-end .btn:hover, header.site .nav-end .btn:focus-visible { box-shadow: 0 0 22px -6px color-mix(in srgb, var(--gold) 85%, transparent); }
header.site .nav-end .btn:hover::before, header.site .nav-end .btn:focus-visible::before { opacity: 1; animation: nav-spin 1.6s linear infinite; }
@media (prefers-reduced-motion: reduce) {
    header.site .nav-end .btn::before { background: var(--gold); transition: none; }
    header.site .nav-end .btn:hover::before, header.site .nav-end .btn:focus-visible::before { animation: none; }
}

/* Unter 900px: mit Skript ein runder Menü-Knopf, der alle Einträge in einem
   Dialog öffnet (.has-menu setzt das Skript im Partial). Ohne Skript bleibt,
   was vorher galt: „Preise" und Login (nav-keep) und der Knopf zur Anmeldung. */
.nav-menu-open {
    display: none; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: var(--pine-soft); color: var(--paper);
    align-items: center; justify-content: center; cursor: pointer;
}
@media (max-width: 899px) {
    header.site .nav { display: flex; justify-content: space-between; padding-left: 16px; }
    .nav-links, .nav-end { gap: 16px; }
    .nav-links { left: 0; }
    .nav-links a.muted:not(.nav-keep) { display: none; }
    header.site.has-menu .nav-links, header.site.has-menu .nav-end { display: none; }
    header.site.has-menu .nav-menu-open { display: inline-flex; }
}
@media (max-width: 480px) {
    header.site:not(.has-menu) .logo .word { display: none; }
    header.site:not(.has-menu) .nav { padding-left: 12px; gap: 12px; }
    header.site:not(.has-menu) .nav-links, header.site:not(.has-menu) .nav-end { gap: 12px; }
    header.site:not(.has-menu) .nav-end .btn { padding: 0 14px; font-size: 14px; }
}

/* Das Menü: ein Blatt, das unter der Kapsel hängt. */
dialog.nav-menu {
    margin: 14px auto auto; width: calc(100% - 32px); max-width: 420px;
    border: 0; border-radius: 28px; padding: 8px 8px 16px;
    background: var(--surface); color: var(--ink);
    box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--pine) 60%, transparent);
}
dialog.nav-menu::backdrop { background: color-mix(in srgb, var(--pine) 50%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.nav-menu-head { display: flex; align-items: center; justify-content: space-between; padding-left: 12px; }
.nav-menu-close {
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: var(--sage); color: var(--pine);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.nav-menu-list { display: grid; padding: 8px 12px 16px; }
.nav-menu-list a { display: flex; align-items: center; min-height: 48px; font-size: 1.05rem; font-weight: 500; border-bottom: 1px solid var(--line); }
.nav-menu-list a:last-child { border-bottom: 0; }
.nav-menu-list a[aria-current="page"] { color: var(--jade-deep); }
dialog.nav-menu .nav-menu-cta { display: flex; justify-content: center; min-height: 48px; margin: 0 12px; }