/* 262-php-10-mainnav.css
   ============================================================
   Hauptnavigation mit Klappfeldern — Verhalten nach dem Vorbild
   des Notion-Menüs, Masse aus deren Stylesheet, Farben und
   Schrift aus 01-type-color.css.
   ============================================================ */

.x-nav,
.x-nav * { box-sizing: border-box; }

/* Der Header ist der Bezugsrahmen: die Klappfelder liegen absolut
   darin und laufen deshalb über die volle Breite — genau wie bei
   Notion (dort via position:inherit am Container). */
.x-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--border-soft, #eceae5);
    font-family: var(--font-body);
}

.x-nav__bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    height: 80px;          /* war 64px — das groessere Logo braucht Luft */
}

/* Dieselbe Breite und dieselbe Polsterleiter wie .cmp-container
   (_partials/cmp-container.css). Vorher war die Leiste 1180px breit mit
   24px Polster, der Inhalt darunter 1221px mit 15/30/40px — das Logo stand
   deshalb sichtbar weiter rechts als die Ueberschrift darunter. */
.x-nav__bar {
    /* content-box wie .cmp-container: dort begrenzt max-width den INHALT,
       nicht die Aussenkante. Mit border-box waere die Leiste 1221px breit
       und zentriert — der Inhalt darunter laeuft aber bis zum Rand. Genau
       diese 22px Unterschied liessen das Logo nach rechts rutschen. */
    box-sizing: content-box;
    max-width: 1221px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 640px) {
    .x-nav__bar { padding-left: 30px; padding-right: 30px; }
}

@media (min-width: 960px) {
    .x-nav__bar { padding-left: 40px; padding-right: 40px; }
}

@media (min-width: 1330px) {
    .x-nav__bar { padding-left: 0; padding-right: 0; }
}


/* ── Logo ────────────────────────────────────────────────── */

.x-nav__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text, #14171a);
    flex-shrink: 0;
}

/* Das offizielle Logo, unveraendert. Die Hoehe bestimmt die Groesse,
   die Breite folgt dem Seitenverhaeltnis (1991x1152). */
.x-nav__logoimg {
    display: block;
    height: 53px;
    width: auto;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .x-nav__logoimg { height: 38px; }
}

/* ── Obere Ebene ─────────────────────────────────────────── */

.x-nav__links {
    display: none;                      /* Notion blendet unter 1200px aus */
    gap: 4px;                           /* Notion: 4px */
    justify-content: center;
    align-items: center;
}

@media (min-width: 1080px) {
    .x-nav__links { display: flex; flex-direction: row; align-items: center; }
}

/* position:static, damit das Klappfeld sich am Header ausrichtet
   und nicht am einzelnen Eintrag. */
.x-nav__item { position: static; display: inline-block; }

.x-nav__link {
    display: flex;
    align-items: center;
    gap: 8px;                           /* Notion: 8px */
    padding: 5px 10px;                  /* Notion: 5px 10px */
    border-radius: 4px;                 /* Notion: 4px */
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--fs-btn, 1rem);
    color: var(--text, #14171a);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease;   /* Notion: .15s ease */
}

.x-nav__link > span,
.x-nav__trigger { flex-shrink: 0; }

.x-nav__link:hover,
.x-nav__link:focus-visible { background: var(--surface-2, #f4f2ee); }

.x-nav__link.is-active {
    background: var(--brand-tint, #f3f8ed);
    color: var(--brand-strong, #15703a);
}

.x-nav__chevron {
    width: .65em;                       /* Notion: .65em */
    height: .65em;
    flex: 0 0 auto;                     /* sonst quetscht ihn die Leiste auf 0 */
    transition: transform .2s ease;
}

.x-nav__trigger[aria-expanded="true"] .x-nav__chevron { transform: rotate(180deg); }

/* ── Klappfeld ───────────────────────────────────────────── */

.x-nav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--surface, #fff);
    border-top: 1px solid var(--border-soft, #eceae5);
    box-shadow: 0 4px 4px -2px rgb(0 0 0 / 8%);   /* Notion */
    padding: 24px 0 32px;                          /* Notion: 24px … 32px */
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-16px);                  /* Notion: -16px */
    will-change: opacity, transform, visibility;
}

/* Die Brücke: ein unsichtbarer Streifen über dem Feld, damit die Maus
   vom Knopf hinüberwandern kann, ohne dass zwischendurch geschlossen
   wird. Notion macht dasselbe mit :before / :after. */
.x-nav__panel::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    height: 12px;
    background: transparent;
}

.x-nav__item.is-open .x-nav__panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .25s ease, transform .25s ease;   /* Notion: .25s */
}

@media (prefers-reduced-motion: reduce) {
    .x-nav__panel,
    .x-nav__item.is-open .x-nav__panel { transition: none; transform: none; }
}

/* Dieselbe Breite und dieselbe Polsterleiter wie .cmp-container
   (_partials/cmp-container.css). Vorher war die Leiste 1180px breit mit
   24px Polster, der Inhalt darunter 1221px mit 15/30/40px — das Logo stand
   deshalb sichtbar weiter rechts als die Ueberschrift darunter. */
.x-nav__panelinner {
    /* content-box wie .cmp-container: dort begrenzt max-width den INHALT,
       nicht die Aussenkante. Mit border-box waere die Leiste 1221px breit
       und zentriert — der Inhalt darunter laeuft aber bis zum Rand. Genau
       diese 22px Unterschied liessen das Logo nach rechts rutschen. */
    box-sizing: content-box;
    max-width: 1221px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 640px) {
    .x-nav__panelinner { padding-left: 30px; padding-right: 30px; }
}

@media (min-width: 960px) {
    .x-nav__panelinner { padding-left: 40px; padding-right: 40px; }
}

@media (min-width: 1330px) {
    .x-nav__panelinner { padding-left: 0; padding-right: 0; }
}


/* Die Eintraege haben 12px Innenabstand, damit die Hover-Flaeche groesser
   ist als der Text. Damit der TEXT trotzdem auf der Spalte der Seite sitzt,
   werden diese 12px hier wieder herausgezogen — die Flaeche darf ueberstehen,
   die Schrift nicht. */
.x-nav__panelhead,
.x-nav__grid,
.x-nav__panelfoot {
    margin-left: -12px;
    margin-right: -12px;
}

.x-nav__panelhead { margin-top: 0; margin-bottom: 16px; padding-left: 12px; }

.x-nav__panelkicker {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-label, 1rem);
    letter-spacing: var(--tr-label, .14em);
    text-transform: uppercase;
    color: var(--brand-strong, #15703a);
}
/* The section title as a link: same look, underline on hover. */
.x-nav__panelkicker a { color: inherit; text-decoration: none; }
.x-nav__panelkicker a:hover,
.x-nav__panelkicker a:focus-visible { text-decoration: underline; }

.x-nav__panellead {
    margin: 4px 0 0;
    font-size: var(--fs-body-sm, 1rem);
    color: var(--text-muted, #6d7278);
}

/* Die Zweige sind unterschiedlich gross (Politik 5, Anlässe 4,
   Mitgliedschaft 2). auto-fill haelt die Spaltenbreite konstant, statt
   zwei Kinder auf halbe Panelbreite zu ziehen — die Eintraege sehen in
   jedem Klappfeld gleich aus. Notion nutzt fuer die breite Variante
   repeat(4, 1fr); das waere hier bei 2 und 5 Kindern falsch. */
.x-nav__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 4px 24px;                      /* Notion: gap 0 24px / 32px */
}

/* Ein Eintrag = Titel plus EIN Satz. Dieselben zwei Angaben, die auch
   auf der Hub-Kachel stehen — beide lesen aus site-tree.php. */
.x-nav__drop {
    display: block;
    padding: 8px 12px;                  /* Notion: 8px 12px */
    border-radius: 8px;
    text-decoration: none;
    transition: background-color .15s ease;
}

.x-nav__drop:hover,
.x-nav__drop:focus-visible { background: var(--surface-2, #f4f2ee); }

.x-nav__drop.is-active { background: var(--brand-tint, #f3f8ed); }

.x-nav__droplabel {
    display: block;
    font-weight: var(--w-heading, 500);
    font-size: var(--fs-body-sm, 1rem);
    color: var(--text, #14171a);
}

.x-nav__dropdesc {
    display: block;
    margin-top: 4px;                    /* Notion: 4px */
    font-size: var(--fs-meta, 1rem);
    line-height: 1.45;
    color: var(--text-2, #3d4247);      /* wie .x262-chip, nicht blasser */
}

.x-nav__panelfoot {
    margin-top: 16px;
    padding: 12px 12px 0;
    border-top: 1px solid var(--border-soft, #eceae5);
}

.x-nav__panellink {
    font-size: var(--fs-meta, 1rem);
    color: var(--brand-strong, #15703a);
    text-decoration: none;
}

.x-nav__panellink:hover { text-decoration: underline; }

/* ── Rechte Seite: Sprache, Anmeldung, Konto ─────────────── */

.x-nav__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
}

.x-nav__auth { display: flex; align-items: center; gap: 8px; }

.x-nav__btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--border, #dfdbd4);
    font-size: var(--fs-btn, 1rem);
    color: var(--text, #14171a);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.x-nav__btn:hover { background: var(--surface-2, #f4f2ee); }

.x-nav__btn--primary {
    background: var(--brand, #1e8a3b);
    border-color: var(--brand, #1e8a3b);
    color: #fff;
}

.x-nav__btn--primary:hover { background: var(--brand-strong, #15703a); }

/* [B] Der Kreis. Kein Foto, sondern Initialen — Fotos von Mitgliedern
   sind laut Sichtbarkeitsregel nichts für die Kopfzeile. */
.x-nav__avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border, #dfdbd4);
    border-radius: 50%;
    background: var(--brand-tint, #f3f8ed);
    cursor: pointer;
    transition: box-shadow .15s ease;
}

.x-nav__avatar:hover,
.x-nav__avatar:focus-visible { box-shadow: 0 0 0 3px var(--brand-tint-2, #e6f2dc); }

.x-nav__initials {
    font-family: var(--font-display);
    font-size: var(--fs-body-sm);
    line-height: 1;
    color: var(--brand-strong, #15703a);
}

.x-nav__initials--lg {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-tint, #f3f8ed);
    font-size: 16px;
    flex-shrink: 0;
}

/* Ungelesenes. Ein Punkt, keine Zahl — die Zahl steht im Feld. */
.x-nav__dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--surface, #fff);
    border-radius: 50%;
    background: var(--alert, #c8102e);
}

.x-nav__panel--me {
    left: auto;
    right: 24px;
    width: min(320px, calc(100vw - 32px));
    border: 1px solid var(--border-soft, #eceae5);
    border-radius: 10px;
    padding: 12px 0;
    margin-top: 8px;
}

.x-nav__panel--me .x-nav__panelinner { padding: 0 12px; }

.x-nav__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 12px 12px;
    border-bottom: 1px solid var(--border-soft, #eceae5);
}

.x-nav__myname {
    display: block;
    font-weight: var(--w-heading, 500);
    color: var(--text, #14171a);
}

.x-nav__myrole {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-meta, 1rem);
    color: var(--text-muted, #6d7278);
}

.x-nav__melinks { padding-top: 8px; }

.x-nav__badge {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--brand-tint-2, #e6f2dc);
    font-size: var(--fs-date, 1rem);
    color: var(--brand-strong, #15703a);
}

/* ── Mobil ───────────────────────────────────────────────── */

.x-nav__burger {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border, #dfdbd4);
    border-radius: 6px;
    background: none;
    cursor: pointer;
}

@media (min-width: 1080px) { .x-nav__burger { display: none; } }

.x-nav__burgerbars { display: grid; gap: 3px; }
.x-nav__burgerbars i {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--text, #14171a);
}

.x-nav__mobile {
    display: none;
    border-top: 1px solid var(--border-soft, #eceae5);
    padding: 8px 15px 20px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.x-nav__mobile.is-open { display: block; }

@media (min-width: 1080px) { .x-nav__mobile { display: none !important; } }

.x-nav__mobilelink {
    display: block;
    padding: 10px 4px;
    font-family: var(--font-display);
    font-size: var(--fs-h4, 1.125rem);
    color: var(--text, #14171a);
    text-decoration: none;
    border-bottom: 1px solid var(--border-soft, #eceae5);
}

.x-nav__mobilelink.is-active { color: var(--brand-strong, #15703a); }

.x-nav__mobilekids { padding: 6px 0 10px 12px; }

.x-nav__mobilekids a {
    display: block;
    padding: 7px 4px;
    font-size: var(--fs-body-sm, 1rem);
    color: var(--text-2, #3d4247);
    text-decoration: none;
}

.x-nav__mobilekids a:hover { color: var(--brand-strong, #15703a); }

/* ── Hilfsklasse ─────────────────────────────────────────── */

.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Die alte Demo-Leiste weicht dieser Navigation. */
.x-nav ~ .demo-nav,
body.has-mainnav .demo-nav { display: none; }