/* 03-pagetree.css
   ============================================================
   Der Weg durch den Seitenbaum: Brotkrümel oben, Seitenkarte
   unten. Beide zeigen genau das, was auch im Menü steht —
   die Daten kommen aus site-tree.php.
   ============================================================ */

/* ── Brotkrümel ──────────────────────────────────────────── */

.x-crumb {
    border-bottom: 1px solid var(--border-soft, #eceae5);
    background: var(--surface, #fff);
}

.x-crumb__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: var(--fs-meta, 1rem);
}

.x-crumb__link {
    color: var(--text-2, #3d4247);
    text-decoration: none;
}

.x-crumb__link:hover {
    color: var(--brand-strong, #15703a);
    text-decoration: underline;
}

/* Luft um den Schrägstrich. In der ersten Fassung standen die Teile als
   <li>-Elemente mit eigenem Abstand; hier macht das der Abstand selbst —
   ohne Luft kleben "Home/Politica/il Paese" zu einem Wort zusammen. */
.x-crumb__sep {
    color: var(--faint, #a4a8ac);
    padding-inline: 4px;
}

.x-crumb__here { color: var(--text, #14171a); }

/* ── Fuss: die Seitenkarte ───────────────────────────────────
   Der Fuss ist der einzige Ort, an dem der ganze Baum auf
   einmal sichtbar ist. Wer im Menü nichts findet, findet es
   hier — ohne eine eigene Sitemap-Seite dafür zu brauchen. */

.x-foot {
    margin-top: 64px;
    border-top: 1px solid var(--border, #dfdbd4);
    background: var(--surface-2, #f4f2ee);
}

.x-foot__inner {
    padding-top: 40px;
    padding-bottom: 32px;
}

.x-foot__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 28px 24px;
}

.x-foot__head {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-body-sm, 1rem);
    color: var(--text, #14171a);
    text-decoration: none;
}

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

.x-foot__list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.x-foot__list li { margin-top: 5px; }

/* Gleiche Groesse wie .x262-chip (--fs-meta, 14px) — die war nie das
   Problem. Zu blass war die Farbe: --text-muted auf grauem Grund liest sich
   kleiner, als es ist. Jetzt --text-2, genau der Ton, den der Chip im
   Ruhezustand hat. Kein neues Muster, nur derselbe Wert. */
.x-foot__list a {
    font-size: var(--fs-meta, 1rem);
    color: var(--text-2, #3d4247);
    text-decoration: none;
}

.x-foot__list a:hover {
    color: var(--brand-strong, #15703a);
    text-decoration: underline;
}

.x-foot__base {
    margin: 32px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border, #dfdbd4);
    font-size: var(--fs-meta, 1rem);
    color: var(--text-muted, #6d7278);
}

/* ── Hub-Seiten ──────────────────────────────────────────────
   Eine Hub-Seite führt nichts eigenes. Sie zeigt ihre Kinder
   und sonst nichts — deshalb braucht sie auch keine Regeln
   ausser etwas Luft um die Kachelreihe. */

.x-hub-intro {
    max-width: var(--measure-mid, 56ch);
    margin: 0 0 24px;
    font-size: var(--fs-lead, 1.1875rem);
    line-height: var(--lh-lead, 1.55);
    color: var(--text-2, #3d4247);
}

/* ── Sichtbarkeit von Gesichtern ─────────────────────────────
   REGEL: Gäste sehen keine Mitgliederfotos. Wer im Verein ist,
   sieht die anderen — wer nur vorbeischaut, nicht.

   AUSNAHME: Vorstand und Revision. Das sind Ämter, keine
   Privatpersonen; wer eine Sektion führt, steht öffentlich
   dafür ein. Solche Blöcke umschliesst das Template mit
   .x-public-faces.

   Das hier ist die DEMO-Umsetzung über data-auth aus
   demo-auth.js. Sie versteckt nur — die Adressen der Bilder
   stehen weiterhin im Quelltext. In ProcessWire darf ein Foto
   für Gäste gar nicht erst gerendert werden:

       if (!user()->isLoggedin() && !$member->is_public_office) {
           unset($item['image_01']);
       }
   ------------------------------------------------------------ */

/* Privatpersonen: für Gäste gar kein Foto. */
html[data-auth="guest"] .x262-member__media { display: none; }

/* Ohne Foto rückt die Karte zusammen statt eine Lücke zu lassen. */
html[data-auth="guest"] .x262-member { align-items: flex-start; }

/* ── Ämter: sichtbar, aber nicht als Privatfoto ──────────────
   Vorstand und Revision bleiben für Gäste sichtbar — wer eine
   Sektion führt, steht öffentlich dafür ein. Aber sie erscheinen
   im Vereinsgrün eingefärbt statt als privater Schnappschuss:
   man erkennt die Person, ohne dass ein Porträt in voller
   Auflösung frei im Netz steht.

   Angemeldete Mitglieder sehen das Foto normal — sie sind
   der Verein. Der Unterschied zwischen Gast und Mitglied ist
   damit auch hier sichtbar, wie auf den Anlasskarten. */
html[data-auth="guest"] .x-public-faces .x262-member__media {
    display: block;
    position: relative;
    isolation: isolate;
}

html[data-auth="guest"] .x-public-faces .x262-member__media > img {
    filter: grayscale(1) contrast(1.08) brightness(1.04);
}

html[data-auth="guest"] .x-public-faces .x262-member__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brand, #1e8a3b);
    mix-blend-mode: multiply;
    opacity: .82;
    pointer-events: none;
}

/* Ein zweiter, hellerer Auftrag hebt die Gesichtszüge wieder an —
   sonst sackt das Bild zu einer grünen Fläche zusammen. */
html[data-auth="guest"] .x-public-faces .x262-member__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--green-100, #e6f2dc);
    mix-blend-mode: screen;
    opacity: .22;
    pointer-events: none;
}

/* Wo mix-blend-mode fehlt, bleibt wenigstens das Graustufenbild
   mit einem grünen Schleier — nie ein unbehandeltes Porträt. */
@supports not (mix-blend-mode: multiply) {
    html[data-auth="guest"] .x-public-faces .x262-member__media::after {
        background: var(--brand, #1e8a3b);
        opacity: .55;
    }
}


/* ── Verweis auf eine fremde Organisation ────────────────────
   Traegt deren Logo. Der Zusatz steht hier und nicht in
   02-elements.css: .x-linkout ist ein gemeinsames Element, und
   nur dieser eine Verweis hat ein Logo. */

.x-linkout--logo {
    grid-template-columns: 94px 1fr;
    grid-template-areas:
        "logo title"
        "logo text"
        "logo url";
    column-gap: 14px;
    align-items: start;
}

.x-linkout__logo {
    grid-area: logo;
    width: 94px;
    height: auto;
    align-self: center;
}

.x-linkout--logo .x-linkout__title { grid-area: title; }
.x-linkout--logo .x-linkout__text  { grid-area: text; }
.x-linkout--logo .x-linkout__url   { grid-area: url; }

@media (max-width: 480px) {
    .x-linkout--logo {
        grid-template-columns: 1fr;
        grid-template-areas: "logo" "title" "text" "url";
        row-gap: 8px;
    }
}