/* Globales Seiten-CSS von Empire Aleman.
 *
 * Stammt aus den frueheren Inline-<style>-Bloecken von tmp/header.php und
 * tmp/footer.php. Zusammen waren das rund 69 KB, die JEDE Seitenauslieferung
 * erneut mitgeschleppt hat — nicht zwischenspeicherbar, weil Teil des HTML.
 * Als eigene Datei laedt der Browser sie genau einmal (Cache-Control:
 * immutable, siehe .htaccess; Versionierung ueber ?v=filemtime).
 *
 * Reihenfolge: erst header, dann footer — exakt wie im Dokument zuvor.
 * Die Selektoren beider Bloecke ueberschneiden sich nicht (footer nutzt
 * durchgehend den .ft-*-Namensraum), die Kaskade bleibt also unveraendert.
 *
 * NICHT VON HAND BEARBEITEN, ohne zu wissen, woher es kommt — Aenderungen
 * gehoeren hierher, nicht zurueck ins Template.
 */

/* ===== aus tmp/header.php ===== */
[x-cloak] { display: none !important; }

        :root {
            --empire-gold:  #c9a84c;
            --empire-dark:  #0a0804;
            --empire-stone: #3d3020;
            /* Navigationshöhe als Variable: der Spacer unter der fixierten Leiste,
               die 100vh-Berechnungen in page_home/page_login/page_register/error
               und die Media-Queries unten hängen alle daran. Wer die Höhe ändert,
               ändert sie NUR hier — sonst driften Leiste und Spacer auseinander. */
            --nav-h: 4.25rem;
            --nav-safe-top: env(safe-area-inset-top, 0px);
            --nav-safe-left: env(safe-area-inset-left, 0px);
            --nav-safe-right: env(safe-area-inset-right, 0px);
            --nav-safe-bottom: env(safe-area-inset-bottom, 0px);
        }
        /* Verhindert Layout-Sprung durch Scrollleiste: reserviert
           permanent Platz für die Scrollleiste, damit zentrierter Inhalt
           (vl-page, nav-inner) nicht um Scrollbar-Breite springt und
           links/rechts ungleich wirkt. `both-edges` hält links/rechts
           symmetrisch, sonst steht die Seite bei `stable` einseitig. */
        html { scrollbar-gutter: stable both-edges; }
        /* Ab 1160px wird die Leiste zweizeilig (siehe Media-Query-Block
           bei den Ressourcen) — der Wert wird dort auf 6.6rem gehoben. */

        .nav-spacer {
            height: calc(var(--nav-h) + var(--nav-safe-top));
            flex-shrink: 0;
        }

        /* ── Legacy utilities (used by other pages) ───────────────── */
        .btn-gold {
            background: linear-gradient(135deg, #c9a84c 0%, #a07830 100%);
            color: #1a1108;
            font-weight: 700;
            letter-spacing: .04em;
            transition: filter .2s;
        }
        .btn-gold:hover { filter: brightness(1.12); }
        .res-bar { font-variant-numeric: tabular-nums; }

        /* ══════════════════════════════════════════════════════════
           Navbar
        ══════════════════════════════════════════════════════════ */

        /* Bar */
        .nav-bar {
            position: fixed; top: 0; left: 0; right: 0; z-index: 50;
            height: calc(var(--nav-h) + var(--nav-safe-top));
            box-sizing: border-box;
            padding-top: var(--nav-safe-top);
            background:
                linear-gradient(180deg,
                    rgba(19,15,8,.965) 0%,
                    rgba(11,9,5,.955) 52%,
                    rgba(7,5,2,.972) 100%);
            backdrop-filter: blur(18px) saturate(1.25);
            -webkit-backdrop-filter: blur(18px) saturate(1.25);
            border-bottom: 1px solid rgba(201,168,76,.13);
            box-shadow:
                0 12px 34px -14px rgba(0,0,0,.9),
                inset 0 -1px 0 rgba(201,168,76,.05);
            display: flex; align-items: stretch;
        }
        /* Subtle top gold line */
        .nav-bar::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                transparent 0%, rgba(201,168,76,.35) 30%,
                rgba(201,168,76,.35) 70%, transparent 100%);
        }
        /* Warmer Lichtsaum unter der Kante — trennt die Leiste vom Inhalt,
           ohne eine harte zweite Linie zu ziehen. */
        .nav-bar::after {
            content: '';
            position: absolute; left: 0; right: 0; bottom: -1px;
            height: 1px;
            background: linear-gradient(90deg,
                transparent 0%, rgba(201,168,76,.22) 22%,
                rgba(232,205,128,.3) 50%,
                rgba(201,168,76,.22) 78%, transparent 100%);
            pointer-events: none;
        }

        /* Inner wrapper */
        .nav-inner {
            /* Breiter als der Seiteninhalt: die Ressourcenleiste braucht
               den Platz (siehe Breitenbudget bei den Media-Queries). */
            max-width: 1400px; margin: 0 auto; width: 100%;
            padding: 0 max(1.5rem, var(--nav-safe-left, 0px)) 0
                     max(1.5rem, var(--nav-safe-right, 0px));
            display: flex; align-items: center; gap: 0;
        }

        /* Logo */
        .nav-logo {
            display: flex; align-items: center; gap: .7rem;
            text-decoration: none; flex-shrink: 0;
            padding-right: 1.25rem;
            border-right: 1px solid rgba(201,168,76,.1);
            transition: opacity .2s;
        }
        .nav-logo:hover { opacity: .85; }

        .nav-logo-icon {
            width: 30px; height: 30px; flex-shrink: 0;
            filter: drop-shadow(0 1px 5px rgba(201,168,76,.28));
        }

        .nav-logo-wordmark {
            display: flex; flex-direction: column; line-height: 1;
        }
        .nav-logo-em {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: .95rem; font-weight: 500;
            letter-spacing: .24em; text-transform: uppercase;
            color: #c9a84c;
        }
        .nav-logo-sub {
            font-family: system-ui, sans-serif;
            font-size: .5rem; font-weight: 400;
            letter-spacing: .32em; text-transform: uppercase;
            color: rgba(232,205,128,.6);
            margin-top: .22rem;
        }

        /* Vertical divider */
        .nav-divider {
            width: 1px; align-self: stretch;
            background: linear-gradient(to bottom,
                transparent, rgba(201,168,76,.16), transparent);
            margin: .85rem 0; flex-shrink: 0;
        }

        /* ══════════════════════════════════════════════════════════
           Ressourcenleiste (eingeloggt)

           Aufbau je Pod:  [Medaillon-Icon] LABEL      +Rate/h
                                            Bestand / Kapazität
                                            ▓▓▓▓▓░░░░ Füllstand
           Plus Detail-Tooltip beim Hovern/Fokussieren. Die Pod-Farbe
           steuert --rc; Orb, Balken und Glühen leiten sich daraus ab,
           damit eine neue Ressource nur eine Zeile Farbe braucht.
        ══════════════════════════════════════════════════════════ */
        .nav-resources {
            flex: 1; display: flex; align-items: center;
            gap: .1rem; padding: 0 1.1rem;
            min-width: 0;
            /* overflow sichtbar, sonst beschneidet der Scrollport die
               Tooltips. Auf schmalen Viewports (unten) wird daraus ein
               horizontaler Scroller — dort gibt es keine Hover-Tooltips. */
            overflow: visible;
        }

        .res-pod {
            position: relative;
            display: flex; align-items: center; gap: .62rem;
            padding: .36rem .6rem;
            border-radius: 10px;
            border: 1px solid transparent;
            flex: 0 1 auto; min-width: 0;
            transition: background .2s, border-color .2s, box-shadow .2s;
        }
        .res-pod:hover, .res-pod:focus-visible {
            background: linear-gradient(180deg, rgba(201,168,76,.08), rgba(201,168,76,.02));
            border-color: rgba(201,168,76,.17);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
            outline: none;
        }
        .res-pod:focus-visible { border-color: rgba(201,168,76,.4); }

        /* Trennstrich zwischen den Pods */
        .res-sep {
            width: 1px; height: 26px; flex-shrink: 0;
            background: linear-gradient(to bottom,
                transparent, rgba(201,168,76,.14), transparent);
        }

        /* ── Medaillon mit dem Ressourcen-Icon ──────────────────── */
        .res-orb {
            position: relative; flex-shrink: 0;
            width: 34px; height: 34px; border-radius: 10px;
            display: grid; place-items: center;
            background:
                radial-gradient(circle at 32% 24%, rgba(255,255,255,.11), transparent 58%),
                linear-gradient(155deg,
                    color-mix(in srgb, var(--rc) 24%, transparent),
                    rgba(10,8,4,.6) 74%);
            border: 1px solid color-mix(in srgb, var(--rc) 34%, transparent);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.08),
                0 2px 8px rgba(0,0,0,.45),
                0 0 15px -5px color-mix(in srgb, var(--rc) 55%, transparent);
            transition: border-color .25s, box-shadow .25s;
        }
        /* Diagonaler Glanz über dem Medaillon */
        .res-orb::after {
            content: ''; position: absolute; inset: 0; border-radius: inherit;
            background: linear-gradient(140deg,
                rgba(255,255,255,.13) 0%, transparent 42%);
            pointer-events: none;
        }
        .res-orb svg {
            width: 21px; height: 21px; display: block;
            filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.6));
        }
        .res-pod:hover .res-orb {
            border-color: color-mix(in srgb, var(--rc) 52%, transparent);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.1),
                0 2px 10px rgba(0,0,0,.5),
                0 0 20px -4px color-mix(in srgb, var(--rc) 65%, transparent);
        }

        /* ── Zahlenblock ────────────────────────────────────────── */
        .res-body {
            display: flex; flex-direction: column; gap: .2rem;
            min-width: 104px;
        }
        .res-line {
            display: flex; align-items: baseline; gap: .38rem;
            line-height: 1; white-space: nowrap;
        }
        .res-label {
            font-family: system-ui, sans-serif;
            font-size: .5rem; font-weight: 700;
            letter-spacing: .2em; text-transform: uppercase;
            color: rgba(232,205,128,.75);
        }
        .res-rate {
            margin-left: auto;
            font-family: system-ui, sans-serif;
            font-size: .58rem; font-weight: 600; letter-spacing: .02em;
            color: rgba(150,182,124,.85);
            font-variant-numeric: tabular-nums;
        }
        .res-val {
            font-family: system-ui, sans-serif;
            font-size: .92rem; font-weight: 600; letter-spacing: .005em;
            color: #f2e8d2;
            font-variant-numeric: tabular-nums;
            text-shadow: 0 1px 2px rgba(0,0,0,.55);
        }
        .res-cap {
            margin-left: auto;
            font-family: system-ui, sans-serif;
            font-size: .61rem; color: #8b8271;
            font-variant-numeric: tabular-nums;
        }
        .res-cap::before { content: '/'; margin-right: .24rem; color: #5d564a; }

        /* ── Ratenänderungs-Pfeil (kurz aufblitzend) ──────────── */
        .res-arrow {
            display: inline-block; width: 10px; text-align: center;
            font-size: .62rem; line-height: 1;
            animation: resArrowPop .45s ease-out both;
            flex-shrink: 0;
        }
        .res-arrow.up   { color: #4ade80; }
        .res-arrow.down { color: #f87171; }
        @keyframes resArrowPop {
            0%   { opacity: 0; transform: scale(.6) translateY(4px); }
            40%  { opacity: 1; transform: scale(1.3) translateY(0); }
            100% { opacity: 1; transform: scale(1) translateY(0); }
        }

        /* Füllstandsbalken */
        .res-track {
            height: 3px; border-radius: 2px;
            background: rgba(255,255,255,.06);
            box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
            overflow: hidden;
        }
        .res-fill {
            display: block; height: 100%; border-radius: 2px;
            background: linear-gradient(90deg,
                color-mix(in srgb, var(--rc) 42%, transparent), var(--rc));
            box-shadow: 0 0 7px -1px color-mix(in srgb, var(--rc) 75%, transparent);
            transition: width .7s cubic-bezier(.22,1,.36,1), background .3s;
        }

        /* Der Volk-Pod zeigt als „Rate" den Getreidebedarf — das ist keine
           Produktion, deshalb neutral-gold statt grün. */
        .res-pod.res-pop .res-rate { color: rgba(201,168,76,.75); }

        /* ── Zustände ───────────────────────────────────────────── */
        /* Lager fast voll: Produktion droht zu verpuffen */
        .res-pod.is-high .res-fill { background: linear-gradient(90deg, #c9a84c, #e8c76a); }
        .res-pod.is-high .res-cap  { color: #c9a84c; }
        /* Lager voll: Produktion verpufft bereits */
        .res-pod.is-full .res-fill {
            background: linear-gradient(90deg, #d98a3c, #f2b95e);
            animation: resPulse 2.4s ease-in-out infinite;
        }
        .res-pod.is-full .res-val { color: #f4cd94; }
        .res-pod.is-full .res-cap { color: #e0a24c; }
        /* Negative Rate (Getreide bei Hunger): Vorrat schrumpft */
        .res-pod.is-drain .res-rate { color: #e8897a; }
        .res-pod.is-drain .res-fill { background: linear-gradient(90deg, #8f3226, #d6644e); }
        .res-pod.is-drain .res-val  { color: #f0b8ac; }
        .res-pod.is-drain .res-orb {
            border-color: rgba(224,120,102,.5);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.08),
                0 0 18px -4px rgba(224,120,102,.7);
            animation: resPulse 1.9s ease-in-out infinite;
        }
        @keyframes resPulse {
            0%, 100% { filter: brightness(1); }
            50%      { filter: brightness(1.35); }
        }

        /* ── Detail-Tooltip ─────────────────────────────────────── */
        .res-tip {
            position: absolute; top: calc(100% + .55rem); left: -.15rem;
            width: 236px;
            background: linear-gradient(180deg, rgba(19,15,9,.985), rgba(10,8,4,.985));
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(201,168,76,.16);
            border-radius: 11px;
            box-shadow: 0 24px 58px rgba(0,0,0,.66), 0 3px 14px rgba(0,0,0,.5);
            padding: .7rem .75rem .62rem;
            opacity: 0; visibility: hidden;
            transform: translateY(-5px) scale(.98);
            transform-origin: top left;
            transition: opacity .18s, transform .22s cubic-bezier(.22,1,.36,1), visibility .18s;
            pointer-events: none; z-index: 80;
        }
        .res-tip::before {
            content: ''; position: absolute; top: -5.5px; left: 22px;
            width: 9px; height: 9px;
            background: rgb(19,15,9);
            border-left: 1px solid rgba(201,168,76,.16);
            border-top: 1px solid rgba(201,168,76,.16);
            transform: rotate(45deg);
        }
        .res-pod:hover .res-tip,
        .res-pod:focus-visible .res-tip,
        .res-pod:focus-within .res-tip {
            opacity: 1; visibility: visible;
            transform: translateY(0) scale(1);
        }

        .rt-head {
            display: flex; align-items: center; gap: .5rem;
            padding-bottom: .5rem; margin-bottom: .5rem;
            border-bottom: 1px solid rgba(201,168,76,.1);
        }
        .rt-head .res-orb { width: 26px; height: 26px; border-radius: 8px; }
        .rt-head .res-orb svg { width: 16px; height: 16px; }
        .rt-name {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: .95rem; letter-spacing: .06em; color: #f0e6d0;
            line-height: 1.1;
        }
        .rt-sub {
            display: block;
            font-family: system-ui, sans-serif;
            font-size: .46rem; letter-spacing: .18em; text-transform: uppercase;
            color: rgba(232,205,128,.75); margin-top: .16rem;
        }
        .rt-pct {
            margin-left: auto;
            font-family: system-ui, sans-serif;
            font-size: .56rem; font-weight: 700; letter-spacing: .06em;
            color: color-mix(in srgb, var(--rc) 82%, #f0e6d0);
            font-variant-numeric: tabular-nums;
            padding: .16rem .4rem; border-radius: 4px;
            border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent);
            background: color-mix(in srgb, var(--rc) 9%, transparent);
            white-space: nowrap;
        }

        .rt-rows { display: flex; flex-direction: column; gap: .3rem; }
        .rt-row {
            display: flex; align-items: baseline; gap: .6rem;
            font-family: system-ui, sans-serif; font-size: .6rem;
        }
        .rt-row dt { color: #8b8271; letter-spacing: .04em; }
        .rt-row dd {
            margin-left: auto; color: #e8dcc8; font-weight: 600;
            font-variant-numeric: tabular-nums;
        }
        .rt-row dd.pos { color: #96b67c; }
        .rt-row dd.neg { color: #e8897a; }

        .rt-foot {
            margin-top: .55rem; padding-top: .5rem;
            border-top: 1px solid rgba(201,168,76,.09);
            display: flex; align-items: center; gap: .4rem;
            font-family: system-ui, sans-serif;
            font-size: .55rem; letter-spacing: .05em; color: #a39c8e;
        }
        .rt-foot svg { width: 11px; height: 11px; flex-shrink: 0; color: rgba(201,168,76,.7); }
        .rt-foot.warn { color: #e0a24c; }
        .rt-foot.warn svg { color: #e0a24c; }
        .rt-foot.crit { color: #e8897a; }
        .rt-foot.crit svg { color: #e8897a; }

        /* ══════════════════════════════════════════════════════════
           Reaktion auf schmalere Viewports

           Die Leiste teilt sich die Zeile mit Logo (139px), Nav-Links
           (284px), Glocke (50px) und Benutzer-Button (bis 172px) plus
           48px Innenabstand — zusammen bis zu 764px. Was übrig bleibt,
           muss den Pods reichen; deshalb fällt in dieser Reihenfolge
           weg: Volk → Kapazität → Rate → Icon- und Schriftgröße.

           Unterhalb von 1160px reicht keine Verdichtung mehr aus. Statt
           die Pods dann in einen Scroller zu sperren (der die Tooltips
           beschneiden würde), rutscht die Leiste in eine ZWEITE Zeile
           und bekommt die volle Breite — dort greift dieselbe Reihen-
           folge erneut, nur mit deutlich mehr Platz.
        ══════════════════════════════════════════════════════════ */

        /* Stufe 1 — Volk weicht (voll inkl. Volk bräuchte 1577px) */
        @media (max-width: 1600px) {
            .res-pod.res-pop, .res-sep-pop { display: none; }
        }
        /* Stufe 2 — Kapazität weicht, der Balken zeigt das Verhältnis weiter */
        @media (max-width: 1440px) {
            .res-cap  { display: none; }
            .res-body { min-width: 86px; }
        }
        /* Stufe 3 — Rate weicht, Medaillon schrumpft */
        @media (max-width: 1380px) {
            .res-rate { display: none; }
            .res-body { min-width: 64px; }
            .res-pod  { gap: .5rem; padding: .34rem .45rem; }
            .res-orb  { width: 30px; height: 30px; }
            .res-orb svg { width: 19px; height: 19px; }
        }
        /* Stufe 4 — ultrakompakt */
        @media (max-width: 1240px) {
            .res-body { min-width: 50px; }
            .res-pod  { gap: .4rem; padding: .3rem .35rem; }
            .res-orb  { width: 26px; height: 26px; border-radius: 8px; }
            .res-orb svg { width: 16px; height: 16px; }
            .res-val  { font-size: .82rem; }
        }

        /* ── Zweizeilig: die Ressourcen bekommen eine eigene Reihe ──
           Höhe = obere Reihe (Touch-Ziele bis 44px) + Trennabstand +
           Ressourcenreihe (Pods bis 47,6px). Mit den früheren 6.1rem war
           der Inhalt ~6px höher als die Leiste: weil .nav-inner die
           Reihen zentriert (align-content:center), lief die obere Reihe
           oben aus dem Viewport und die untere unten aus der Leiste. */
        @media (max-width: 1160px) {
            :root { --nav-h: 6.6rem; }

            .nav-inner {
                flex-wrap: wrap; align-content: center;
                padding-left: max(1rem, var(--nav-safe-left));
                padding-right: max(1rem, var(--nav-safe-right));
            }
            .nav-logo  { order: 1; border-right: none; padding-right: .9rem; }
            .nav-links { order: 2; margin-left: auto; padding-left: 0; }
            /* Die beiden Trenner der oberen Zeile ergeben ohne die
               Ressourcen dazwischen keinen Sinn mehr. */
            .nav-inner > .nav-divider { display: none; }

            .nav-resources {
                order: 3; flex: 0 0 100%; width: 100%;
                justify-content: space-between;
                padding: .26rem .1rem 0; margin-top: .2rem;
                border-top: 1px solid rgba(201,168,76,.07);
            }

            /* Volle Breite → die Stufen 1–4 werden zurückgenommen */
            .res-pod.res-pop { display: flex; }
            .res-sep-pop { display: block; }
            .res-cap  { display: block; }
            .res-rate { display: block; }
            /* 72px statt 104px: Die Bestände laufen ab hier in Kurzform
               (fmtC, höchstens 5 Zeichen) — die alte Mindestbreite war auf
               die volle Zahl ausgelegt und hielt die Pods künstlich breit.
               Bei 781–881px passten fünf Pods dadurch nicht mehr in die Reihe. */
            .res-body { min-width: 72px; }
            .res-pod  { gap: .62rem; padding: .36rem .6rem; }
            .res-orb  { width: 34px; height: 34px; border-radius: 10px; }
            .res-orb svg { width: 21px; height: 21px; }
            .res-val  { font-size: .92rem; }
        }
        /* In der eigenen Reihe stehen ~(Viewport − 32px) bereit; dieselbe
           Reihenfolge greift erneut, nur bei kleineren Breiten. */
        @media (max-width: 780px) {
            .res-pod.res-pop, .res-sep-pop { display: none; }
        }
        @media (max-width: 640px) {
            .res-cap  { display: none; }
            /* Ohne Kapazitätsangabe trägt der Zahlenblock nur noch den
               Bestand in Kurzform — 78px waren dafür rund 28px zu viel
               und ergaben das Überlaufband bei 521–607px. */
            .res-body { min-width: 50px; }
        }
        @media (max-width: 520px) {
            :root { --nav-h: 6.4rem; }
            .res-rate { display: none; }
            .res-body { min-width: 44px; }
            .res-pod  { gap: .42rem; padding: .3rem; }
            .res-orb  { width: 28px; height: 28px; border-radius: 8px; }
            .res-orb svg { width: 17px; height: 17px; }
            .res-val  { font-size: .82rem; }
            .res-sep  { display: none; }
        }
        @media (max-width: 400px) {
            .res-body  { min-width: 42px; }
            .res-orb   { width: 24px; height: 24px; }
            .res-orb svg { width: 15px; height: 15px; }
            .res-label { display: none; }
        }

        /* ── Telefone: die Leiter endete bei 400px ──────────────────
           Bei 360px (verbreitetste Android-Breite) und 320px (iPhone SE,
           iOS-Zoomstufe „grösser") reichte die letzte Stufe nicht mehr:
           vier Pods à ~82px plus Abstände brauchen 334px, verfügbar sind
           bei 360px aber nur 325px. Die Pods liefen aus der Leiste heraus
           — sichtbar als abgeschnittenes Getreide und als horizontal
           scrollende Seite.

           Zwei Massnahmen greifen ineinander: die Kurzschreibweise der
           Bestände (fmtC in components.js) deckelt die Zeichenzahl, hier
           schrumpfen Medaillon und Zahlenblock ein letztes Mal. Statt
           `justify-content: space-between` verteilt `space-evenly` den
           Rest gleichmässig, damit der letzte Pod nicht an der Kante klebt. */
        @media (max-width: 380px) {
            .nav-inner {
                padding-left: max(.6rem, var(--nav-safe-left));
                padding-right: max(.6rem, var(--nav-safe-right));
            }
            .nav-resources { justify-content: space-evenly; gap: 0; padding-inline: 0; }
            .res-pod   { gap: .34rem; padding: .28rem .18rem; }
            .res-body  { min-width: 0; }
            .res-orb   { width: 22px; height: 22px; border-radius: 7px; }
            .res-orb svg { width: 14px; height: 14px; }
            .res-val   { font-size: .78rem; }
        }
        @media (max-width: 330px) {
            .res-orb   { width: 20px; height: 20px; }
            .res-orb svg { width: 13px; height: 13px; }
            .res-val   { font-size: .72rem; }
            .res-pod   { gap: .26rem; }
        }

        /* ── Telefon im Querformat ──────────────────────────────────
           Die zweizeilige Leiste steht dort auf 6.4rem (102px) — bei 375px
           Viewporthöhe ein Viertel des Bildschirms, nur für die Kopfzeile.
           Im Querformat ist Breite reichlich und Höhe knapp: eine Zeile
           genügt wieder, die Ressourcen rücken zurück nach oben. */
        @media (max-height: 460px) and (orientation: landscape) {
            :root { --nav-h: 3.4rem; }
            .nav-inner     { flex-wrap: nowrap; padding: 0 .75rem; }
            .nav-resources {
                order: 0; flex: 1 1 auto; width: auto;
                margin-top: 0; padding: 0 .5rem;
                border-top: none;
            }
            .nav-logo-wordmark { display: none; }
            .res-track     { display: none; }
            .res-body      { gap: .12rem; }
        }

        @media (prefers-reduced-motion: reduce) {
            .res-fill { transition: none; }
            .res-pod.is-full .res-fill,
            .res-pod.is-drain .res-orb { animation: none; }
        }

        /* ── Nav links ──────────────────────────────────────────── */
        .nav-links {
            display: flex; align-items: center; gap: .12rem;
            padding: 0 0 0 1.1rem; flex-shrink: 0;
        }

        .nav-link {
            position: relative;
            display: inline-flex; align-items: center; gap: .42rem;
            padding: .48rem .78rem; border-radius: 7px;
            font-family: system-ui, sans-serif;
            font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
            color: #a39c8e; text-decoration: none;
            transition: color .18s, background .18s;
        }
        .nav-link svg { width: 15px; height: 15px; flex-shrink: 0; }
        .nav-link:hover { color: rgba(201,168,76,.85); background: rgba(201,168,76,.06); }
        .nav-link.active { color: #c9a84c; background: rgba(201,168,76,.08); }

        /* Gold underline on active */
        .nav-link.active::after {
            content: '';
            position: absolute; bottom: -.05rem; left: .7rem; right: .7rem;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(201,168,76,.65), transparent);
        }

        /* Auf schmalen Viewports nur noch die Icons — die Labels sprengen
           sonst die Zeile und schieben Glocke/Benutzer aus dem Bild. */
        @media (max-width: 620px) {
            .nav-link { padding: .48rem .5rem; gap: 0; }
            .nav-link .nl-txt { display: none; }
            .nav-btn-register .nl-txt { display: none; }
            .nav-links { padding-left: .4rem; }
            /* Logo links rechts stellen */
            .nav-logo { order: 1; }
            .nav-pub-links { order: 2; }
        }

        /* ── Fingerbediente Geräte: Trefferflächen ──────────────────
           Ohne Labels schrumpfte der Dorf-Link auf rund 30 × 30 px und die
           Glocke stand auf 36 px — beides deutlich unter den ~44 px, die
           für sicheres Treffen mit dem Daumen nötig sind. Die Regel hängt
           an `pointer: coarse` statt an einer Breite: ein Tablet mit 900 px
           wird per Finger bedient, ein schmales Desktop-Fenster nicht.
           Vergrössert wird nur die Trefferfläche, nicht das Icon — das
           Schriftbild der Leiste bleibt unverändert. */
        @media (pointer: coarse) {
            .nav-link {
                min-width: 44px; min-height: 44px;
                justify-content: center;
            }
            .nav-bell-btn { width: 44px; height: 44px; }
            .nav-user-btn { min-height: 44px; }
            .nav-user-item { min-height: 44px; }
            .nav-bell-mark { min-height: 44px; padding-inline: .5rem; }
            .nav-logout   { min-height: 44px; padding-inline: .85rem; }
            /* Die Pods sind per tabindex fokussierbar und zeigen den Tooltip —
               als Tippziel brauchen sie dieselbe Mindesthöhe. */
            .res-pod      { min-height: 44px; }
        }

        /* Logout button */
        .nav-logout {
            display: inline-flex; align-items: center; gap: .35rem;
            padding: .4rem .7rem; border-radius: 6px;
            font-family: system-ui, sans-serif;
            font-size: .7rem; letter-spacing: .06em;
            color: #8a8170; text-decoration: none;
            transition: color .18s, background .18s;
            margin-left: .15rem;
        }
        .nav-logout svg { width: 14px; height: 14px; }
        .nav-logout:hover { color: #f87171; background: rgba(248,113,113,.07); }

        /* ── Notification bell (logged-in) ──────────────────────── */
        .nav-bell { position: relative; flex-shrink: 0; margin-left: .1rem; }

        .nav-bell-btn {
            position: relative;
            display: inline-flex; align-items: center; justify-content: center;
            width: 36px; height: 36px; border-radius: 9px;
            background: none; border: none; cursor: pointer;
            color: #a39c8e;
            transition: color .18s, background .18s;
        }
        .nav-bell-btn:hover { color: rgba(201,168,76,.85); background: rgba(201,168,76,.07); }
        .nav-bell-btn.open { color: #c9a84c; background: rgba(201,168,76,.1); }
        .nav-bell-btn svg { width: 18px; height: 18px; display: block; }

        /* Badge with unread count */
        .nav-bell-badge {
            position: absolute; top: 3px; right: 3px;
            min-width: 15px; height: 15px; padding: 0 3.5px;
            border-radius: 8px;
            display: inline-flex; align-items: center; justify-content: center;
            font-family: system-ui, sans-serif;
            font-size: .56rem; font-weight: 700; line-height: 1;
            color: #1a1108;
            background: linear-gradient(135deg, #e0b557 0%, #c9a84c 100%);
            border: 1px solid rgba(10,8,4,.6);
            box-shadow: 0 1px 4px rgba(0,0,0,.5);
            font-variant-numeric: tabular-nums;
        }
        /* Puls when unread present */
        .nav-bell-btn.has-unread .nav-bell-badge { animation: bellPulse 2.4s ease-in-out infinite; }
        @keyframes bellPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,.45); }
            50%      { box-shadow: 0 0 0 4px rgba(201,168,76,0); }
        }

        /* ── Katalog-Links & -Modal (global) ───────────────────────
           unit_link()/building_link() erzeugen .cat-link — überall
           im Projekt gleiche Optik: dezente Gold-Unterstreichung,
           Glow bei Hover, kein Layout-Bruch im Fließtext. */
        .cat-link {
            color: inherit;
            text-decoration: none;
            border-bottom: 1px dashed rgba(201,168,76,.45);
            padding-bottom: 1px;
            cursor: pointer;
            transition: color .16s, border-color .16s, text-shadow .16s;
        }
        .cat-link:hover {
            color: #e8cd80;
            border-bottom-color: rgba(232,205,128,.85);
            text-shadow: 0 0 14px rgba(201,168,76,.35);
        }
        .cat-link:focus-visible {
            outline: none;
            border-bottom-color: rgba(232,205,128,.9);
            box-shadow: 0 1px 0 rgba(232,205,128,.5), 0 0 0 3px rgba(201,168,76,.12);
            border-radius: 2px;
        }

        /* ── Katalog-Reliefs (img/units/, img/buildings/) ──────────
           EIN Regelsatz fuer beide Einbauorte: Wiki-Karte (.cat-art, 1:1) und
           Katalog-Modal (.cat-hero, 2:1 Band mit zentrierter Scheibe).

           Die 27 Motive sind RUNDE Reliefmedaillons, keine freistehenden
           Figuren auf Grund — und der Rand traegt die Fraktion: Maeander und
           Lorbeer bei den Roemern, Flechtwerk bei den Galliern, Eisenbeschlaege
           bei den Teutonen (docs/bildstil.md, „Fraktion ueber das Material").
           Deshalb wird hier NICHT auf Bannerformat beschnitten. Nachgemessen
           belegt die Scheibe ~86 % der Kachel (engster freier Rand 6,2 %,
           clubswinger); jeder Zuschnitt breiter als 1,16:1 saebelt genau den
           Rand ab, der die Fraktion traegt. Das Bildelement ist an beiden
           Einbauorten quadratisch, die Scheibe also immer vollstaendig zu
           sehen — das Modal legt sie dafuer in ein breiteres Band.

           Drei Ebenen, in Zeichenreihenfolge:
             .cat-art        dunkle Nische + Schimmer im Fraktionston
             .cat-art-img    das Relief, elliptisch maskiert
             .cat-art::after Auslauf in die Flaeche darunter

           Die Maske ist nicht Zierrat: ohne sie sitzt die Scheibe als harter
           Kasten auf der Karte. Sie ist bewusst asymmetrisch (76 % / 88 %) —
           oben und unten bleibt die Scheibe stehen, links und rechts loest sie
           sich auf. Das haelt die Praesenz und nimmt trotzdem die Kante. */
        .cat-art {
            position: relative;
            margin: 0;
            overflow: hidden;
            display: grid; place-items: center;
            /* --cat-art-disc: Breite der SCHEIBE, in Prozent der Rahmenbreite.
               Auf der Wiki-Karte fast die volle Breite, im 2:1-Band des Modals
               knapp die Haelfte. An diesem EINEN Wert haengen drei Dinge: die
               Groesse des Bildes, der Schimmer und die Nische — sie folgen
               damit immer der Scheibe und nie dem Rahmen.

               Der Wert liegt UEBER dem Rahmen (108 % statt 100 %), und das ist
               der Kern der Sache. Zweimal steckte hier ein leerer Streifen ueber
               der Grafik: erst als padding am Rahmen, dann — nachdem das padding
               weg war — als Luft, die beim Zentrieren einer zu kleinen Scheibe
               oben uebrig blieb. Beides derselbe Streifen, nur anders erzeugt.
               Ist die Scheibe groesser als ihr Rahmen, kann keine Luft
               entstehen: sie laeuft ueber und overflow:hidden schneidet vom
               dunklen Eigenrand der Grafik ab, nicht vom Medaillon. */
            --cat-art-disc: 108%;
            /* Beide Ebenen sind Ellipsen, die nach aussen auf 0 laufen — auch
               die Nische. Ein linearer Verlauf ueber die volle Flaeche waere
               billiger, wuerde im Modal aber links und rechts neben der
               Scheibe als Rechteck sichtbar (dort steht das Band 430 px breit
               um eine 215-px-Scheibe herum). Weiche Kante = kein Kasten. */
            background:
                radial-gradient(ellipse calc(var(--cat-art-disc) * .66) 72% at 50% 42%,
                    rgba(201,168,76,.10), transparent 72%),
                radial-gradient(ellipse calc(var(--cat-art-disc) * .97) 92% at 50% 46%,
                    rgba(6,5,3,.85), transparent 100%);
            /* Zweite Fassung derselben Deklaration: faerbt den Schimmer im
               Fraktionston — es ist dasselbe --cc, das nebenan schon das
               Emblem-Medaillon faerbt. Browser ohne color-mix ignorieren die
               Zeile und behalten das Gold darueber. */
            background:
                radial-gradient(ellipse calc(var(--cat-art-disc) * .66) 72% at 50% 42%,
                    color-mix(in srgb, var(--cc, #c9a84c) 13%, transparent), transparent 72%),
                radial-gradient(ellipse calc(var(--cat-art-disc) * .97) 92% at 50% 46%,
                    rgba(6,5,3,.85), transparent 100%);
        }
        /* Das Bildelement ist an BEIDEN Einbauorten quadratisch — nur so trifft
           die Maske die Scheibe und nicht den Rahmen: bei width:100% laege sie
           im 2:1-Band des Modals doppelt so breit wie die Scheibe und liesse
           deren Rand hart stehen.

           Quadratisch wird es ueber BREITE + aspect-ratio, nicht ueber
           height:100%. Das ist der Fix vom 28.08.2026: die Prozenthoehe bezog
           sich auf eine Hoehe, die selbst erst aus dem aspect-ratio des
           Rahmens entsteht. Loest ein Browser diese Kette nicht auf, faellt
           height auf auto zurueck — das Bild nahm dann seine Eigengroesse an
           (bis 430 px), lief aus dem 215-px-Band heraus und war nur noch zur
           Haelfte zu sehen. Breite in Prozent hat dieses Problem nicht: die
           Rahmenbreite ist immer bestimmt. */
        .cat-art-img {
            display: block;
            width: var(--cat-art-disc);
            height: auto;
            aspect-ratio: 1 / 1;
            object-fit: contain;
            -webkit-mask-image: radial-gradient(ellipse 76% 88% at 50% 46%, #000 44%, rgba(0,0,0,.5) 74%, transparent 100%);
                    mask-image: radial-gradient(ellipse 76% 88% at 50% 46%, #000 44%, rgba(0,0,0,.5) 74%, transparent 100%);
            transition: filter .45s ease;
        }
        /* Auslauf in die Flaeche darunter. --cat-art-fade setzt der Einbauort
           auf SEINEN Untergrund (Wiki-Karte bzw. Modal), damit die Bildkante
           verschwindet, statt als Kante aufzusetzen. Die Hoehe ist zweimal
           zurueckgenommen worden: 62 % lagen dem Legionaer bis an die Knie,
           38 % verdeckten immer noch das untere Drittel der Scheibe. Bei 26 %
           bleibt das Medaillon ganz lesbar und die Kante trotzdem weg. */
        .cat-art::after {
            content: '';
            position: absolute; inset: auto 0 -1px 0; height: 26%;
            background: linear-gradient(180deg, transparent, var(--cat-art-fade, rgba(16,14,11,.97)));
            pointer-events: none;
        }
        /* Der Hover sitzt beim Einbauort (page-wiki.css: .wk-unit-card-art) und
           hebt das Licht, statt zu zoomen — ein scale() wuerde bei voll
           sichtbarer Scheibe genau den Fraktionsrand aus dem Bild schieben.
           Deshalb steht hier nur der Uebergang, nicht der Effekt. */
        @media (prefers-reduced-motion: reduce) {
            .cat-art-img { transition: none; }
        }

        /* Modal-Overlay + Panel */
        .cat-overlay {
            position: fixed; inset: 0; z-index: 90;
            background: rgba(4,3,1,.72);
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        }
        .cat-modal {
            position: fixed; z-index: 91;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: min(430px, calc(100vw - 2rem));
            max-height: calc(100vh - 4rem);
            overflow-y: auto;
            background: linear-gradient(175deg, rgba(22,17,8,.98), rgba(11,8,4,.99));
            border: 1px solid rgba(201,168,76,.22);
            border-radius: 14px;
            box-shadow:
                0 0 0 1px rgba(201,168,76,.05),
                0 30px 90px rgba(0,0,0,.65),
                0 6px 24px rgba(0,0,0,.45),
                0 0 60px rgba(201,168,76,.06);
            animation: catGlow 5s ease-in-out infinite;
        }
        @keyframes catGlow {
            0%, 100% { box-shadow: 0 0 0 1px rgba(201,168,76,.05), 0 30px 90px rgba(0,0,0,.65), 0 6px 24px rgba(0,0,0,.45), 0 0 40px rgba(201,168,76,.04); }
            50%      { box-shadow: 0 0 0 1px rgba(201,168,76,.07), 0 30px 90px rgba(0,0,0,.65), 0 6px 24px rgba(0,0,0,.45), 0 0 70px rgba(201,168,76,.09); }
        }
        /* Alpine-Enter-Transition (Klassen via x-transition:enter="...") */
        .cat-enter { transition: opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1); }
        .cat-enter-start { opacity: 0; transform: translate(-50%, -46%) scale(.94); }
        .cat-enter-end   { opacity: 1; transform: translate(-50%, -50%) scale(1); }

        .cat-close {
            position: absolute; top: .7rem; right: .7rem; z-index: 2;
            width: 30px; height: 30px;
            display: grid; place-items: center;
            background: rgba(201,168,76,.05);
            border: 1px solid rgba(201,168,76,.15);
            border-radius: 8px;
            color: #a39c8e;
            cursor: pointer;
            transition: color .18s, border-color .18s, background .18s;
        }
        .cat-close:hover { color: #f0e6d0; border-color: rgba(201,168,76,.4); background: rgba(201,168,76,.09); }
        /* Mit Kopfbild liegt der Knopf auf dem Relief statt auf der dunklen
           Modalflaeche — dort reicht die 5-%-Fuellung nicht mehr, sobald eine
           Lichtkante darunter durchlaeuft. :has() ist Absicht: der Knopf ist
           ein Geschwister von .cat-body, kein Kind. Ohne :has()-Unterstuetzung
           bleibt der Knopf so, wie er heute ohnehin aussieht. */
        .cat-modal:has(.cat-body-art) .cat-close {
            background: rgba(8,6,3,.6);
            border-color: rgba(201,168,76,.3);
            color: #cdc4b2;
            backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
        }
        .cat-modal:has(.cat-body-art) .cat-close:hover {
            background: rgba(8,6,3,.78);
            border-color: rgba(232,205,128,.75);
            color: #f0e6d0;
        }
        .cat-close svg { width: 13px; height: 13px; }

        .cat-state {
            display: flex; flex-direction: column; align-items: center; gap: .8rem;
            padding: 3.2rem 1.5rem;
            color: #8a8170;
            font-family: system-ui, sans-serif;
            font-size: .74rem; letter-spacing: .06em;
        }
        .cat-state svg { width: 28px; height: 28px; opacity: .7; }
        .cat-state-err p { color: #ff9a85; }
        .cat-spinner {
            width: 26px; height: 26px; border-radius: 50%;
            border: 2px solid rgba(201,168,76,.15);
            border-top-color: rgba(201,168,76,.7);
            animation: catSpin .8s linear infinite;
        }
        @keyframes catSpin { to { transform: rotate(360deg); } }

        .cat-body { padding: 1.4rem 1.4rem 1.1rem; position: relative; }
        .cat-body::before {
            content: ''; position: absolute; top: 0; left: 1.4rem; right: 1.4rem; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(201,168,76,.4), transparent);
        }
        /* Relief-Kopfbild im Modal. Basis in .cat-art oben; hier nur der
           Zuschnitt (2:1 Banner, docs/bildstil.md) und die randlose
           Einpassung: die Figur hebt die 1.4rem-Polsterung von .cat-body auf
           und uebernimmt oben den Modalradius abzueglich der Kontur.
           430 px Modalbreite / 2 = 215 px Bildhoehe. */
        .cat-hero {
            aspect-ratio: 2 / 1;
            /* Oben KEINE Negativ-Marge mehr, stattdessen nimmt .cat-body-art
               seine Polsterung weg. Vorher musste -1.4rem die 1.4rem
               Polsterung auf den Pixel genau aufheben — geht einer der beiden
               Werte irgendwann auseinander, entsteht genau hier wieder ein
               Spalt. Seitlich bleibt die Negativ-Marge; dort gibt es keine
               entsprechende Stellschraube. */
            margin: 0 -1.4rem 0;
            border-radius: 13px 13px 0 0;
            --cat-art-fade: rgb(21 16 8);
            /* Das Band ist 2:1, die Scheibe soll seine Hoehe ueberfuellen: die
               Bandhoehe sind 50 % der Bandbreite, 54 % also gut 8 % mehr —
               232 px Bild in einem 215-px-Band. */
            --cat-art-disc: 54%;
        }
        /* Mit Kopfbild traegt das Bild selbst die obere Kante — die goldene
           Haarlinie von .cat-body::before wuerde quer ueber das Relief laufen. */
        .cat-body-art::before { display: none; }
        /* Das Kopfbild sitzt buendig an der Modalkante — die Polsterung von
           .cat-body faengt erst darunter wieder an. */
        .cat-body-art { padding-top: 0; }
        /* Emblem-Medaillon rueckt in den ausgelaufenen Fuss des Bildes.
           Gleiche Geste wie auf der Wiki-Karte (.wk-unit-card-art). */
        .cat-body-art .cat-head { position: relative; z-index: 1; margin-top: -1.45rem; }

        .cat-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .95rem; }
        .cat-head-txt { flex: 1; min-width: 0; }
        /* Emblem im Modalkopf: gefasstes Medaillon statt freistehendem SVG.
           --cc setzt footer.php aus der Fraktionsfarbe der Einheit; sie faerbt
           hier nur den Rahmenschimmer und (ueber .ic-a) den Akzent IM Emblem —
           die Silhouette bleibt gold, sonst kippt der Kontrast bei den hellen
           Fraktionstoenen. Gebaeude bekommen kein --cc, greifen also auf den
           Goldwert im Fallback zurueck. */
        .cat-icon {
            width: 58px; height: 58px; flex-shrink: 0;
            display: grid; place-items: center;
            padding: 8px;
            border-radius: 13px;
            color: #e8cd80;
            background:
                radial-gradient(circle at 30% 22%, rgba(232,205,128,.17), rgba(201,168,76,.03) 62%),
                linear-gradient(158deg, rgba(26,20,10,.9), rgba(12,9,4,.96));
            border: 1px solid rgba(201,168,76,.24);
            box-shadow:
                inset 0 1px 0 rgba(232,205,128,.12),
                0 6px 20px rgba(0,0,0,.5),
                0 0 26px -8px var(--cc, rgba(201,168,76,.6));
        }
        .cat-icon svg { width: 100%; height: 100%; }

        /* ── Einheiten-Embleme (inc/UnitIcons.php) ─────────────────
           EIN Regelsatz fuer beide Einbauorte: Katalog-Modal (42 px
           Zeichenflaeche) und Wiki-Karte (26 px). Die Zeichnung hat
           drei Ebenen, und genau daran haengt die Lesbarkeit klein:
             Silhouette — currentColor, volle Strichstaerke
             .ic-d      — Binnenzeichnung, halber Strich, halbe Deckkraft
             .ic-a      — Fraktionsakzent, --cc (Fallback Gold)
           Beim Verkleinern verschwinden die Details in der Deckkraft
           und die Silhouette traegt allein. Wer .ic-d hier auf volle
           Staerke zieht, bekommt auf der Wiki-Karte wieder Matsch.
           Die Werte gelten fuer das 48er-Raster von UnitIcons — die
           Gebaeude-Icons zeichnen auf 24 und haben eigene Regeln. */
        .ei-unit-ico .ic-d { stroke-width: 1.15; opacity: .45; }
        .ei-unit-ico .ic-a { stroke: var(--cc, #e8cd80); }

        /* ── Gebaeude-Embleme (inc/BuildingIcons.php) ──────────────
           Dasselbe Prinzip, anderes Raster: die Gebaeude zeichnen auf 24,
           die Einheiten auf 48 — deshalb ein eigener, duennerer Wert fuer
           die Binnenzeichnung. Gilt fuer alle vier Einbauorte (Dorfliste,
           Baumenue, Wiki-Kompendium, Katalog-Modal).

           Diese Regel hat bis 28.08.2026 dreimal existiert: als
           `.vl-page svg .ic-d`, als `.wk-bld-emblem svg .ic-d` und gar nicht
           im Modal. Die erste war dabei aktiv schaedlich — sie griff ueber
           JEDES svg der Dorfseite und haette mit ihrer hoeheren Spezifitaet
           (0,2,1 gegen 0,2,0) die Einheiten-Embleme mit 0.9 statt 1.15
           gezeichnet, sobald diese dort einziehen. */
        .ei-bld-ico .ic-d { stroke-width: .9; opacity: .48; }

        /* ── Weltkarten-Embleme (inc/MapIcons.php) ─────────────────
           Drittes Raster derselben Familie: die Kartenmotive zeichnen wie
           die Gebaeude auf 24, tragen aber zusaetzlich eine Akzentebene
           (.ic-a) — die Legende faerbt sie ueber --cc auf genau den Ton,
           den MapScene fuer dieses Motiv auf die Karte malt.

           Die Groesse macht der Einbauort (.mp-* in page-map.css), nicht
           diese Regel: dasselbe Emblem sitzt im 11px-Kartenkopf, im
           13px-Chip und als 22px-Legendenschild. Das 1em hier ist nur die
           Rueckfallebene, damit ein vergessener Einbauort nicht als
           300x150-SVG aufreisst — jede .mp-*-Regel ueberstimmt sie. */
        .ei-map-ico { width: 1em; height: 1em; flex: none; }
        .ei-map-ico .ic-d { stroke-width: .9; opacity: .48; }
        .ei-map-ico .ic-a { stroke: var(--cc, #e8cd80); }
        .cat-name {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.55rem; font-weight: 400; letter-spacing: .04em;
            color: #f0e6d0; line-height: 1.1; margin: 0 0 .4rem;
        }
        .cat-badges { display: flex; flex-wrap: wrap; gap: .32rem; }
        .cat-badge {
            font-family: system-ui, sans-serif;
            font-size: .52rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
            color: rgba(232,205,128,.78);
            background: rgba(201,168,76,.06);
            border: 1px solid rgba(201,168,76,.18);
            border-radius: 20px;
            padding: .18rem .55rem; line-height: 1.4;
        }
        .cat-badge b { color: #f0e6d0; }
        .cat-desc {
            font-family: system-ui, sans-serif;
            font-size: .76rem; line-height: 1.75; color: #b3aa97;
            margin: 0 0 1.05rem;
        }
        .cat-stats {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
            gap: .55rem; margin-bottom: 1.05rem;
        }
        .cat-stat {
            background: rgba(10,8,4,.55);
            border: 1px solid rgba(201,168,76,.1);
            border-radius: 9px;
            padding: .6rem .4rem;
            text-align: center;
        }
        .cat-stat-val {
            display: block;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.25rem; color: #f0e6d0; line-height: 1.1;
            font-variant-numeric: tabular-nums;
        }
        .cat-stat-label {
            display: block;
            font-family: system-ui, sans-serif;
            font-size: .46rem; letter-spacing: .18em; text-transform: uppercase;
            color: #8a8170; margin-top: .22rem;
        }
        .cat-costs { display: block; }
        .cat-costs-label {
            display: block;
            font-family: system-ui, sans-serif;
            font-size: .48rem; letter-spacing: .24em; text-transform: uppercase;
            color: rgba(232,205,128,.75); margin-bottom: .45rem;
        }
        .cat-cost-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.05rem; }
        .cat-cost {
            display: inline-flex; align-items: center; gap: .35rem;
            font-family: system-ui, sans-serif;
            font-size: .68rem; font-weight: 600;
            font-variant-numeric: tabular-nums;
            color: #cdc4b2;
            background: rgba(10,8,4,.5);
            border: 1px solid rgba(201,168,76,.1);
            border-radius: 20px;
            padding: .26rem .62rem;
        }
        .cat-cost svg { width: 13px; height: 13px; }
        .cat-cost.res-wood  svg { color: #d9a45c; }
        .cat-cost.res-clay  svg { color: #d16f4d; }
        .cat-cost.res-iron  svg { color: #9db4d0; }
        .cat-cost.res-grain svg { color: #b7c364; }
        .cat-effects { margin-top: .85rem; padding-top: .7rem; border-top: 1px solid rgba(200,170,90,.18); }
.cat-effects-list { margin: .35rem 0 0; padding-left: 1.1rem; color: rgba(220,210,190,.8); font-size: .8rem; line-height: 1.5; }
.cat-effects-list li::marker { color: #c9a84c; }

.cat-foot {
            border-top: 1px solid rgba(201,168,76,.08);
            padding-top: .75rem;
            display: flex; justify-content: flex-end;
        }
        .cat-foot-link {
            display: inline-flex; align-items: center; gap: .3rem;
            font-family: system-ui, sans-serif;
            font-size: .56rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
            color: rgba(201,168,76,.7); text-decoration: none;
            transition: color .18s, gap .18s;
        }
        .cat-foot-link:hover { color: #e8cd80; gap: .48rem; }
        .cat-foot-link svg { width: 10px; height: 10px; }

        /* ── Incoming attack alarm banner ──────────────────────────
           Roter Vollbreit-Banner direkt unter dem fixierten Header.
           Bewusst außerhalb <main>: übersteht View-Transitions ohne Flackern. */
        .atk-alarm {
            position: sticky; top: var(--nav-h, 3rem); z-index: 55;
            background: linear-gradient(180deg, rgba(48,10,6,.97), rgba(32,7,4,.97));
            border-bottom: 1px solid rgba(220,80,60,.35);
            box-shadow: 0 8px 28px rgba(160,30,15,.25);
        }
        .atk-alarm-inner {
            max-width: 1200px; margin: 0 auto;
            display: flex; align-items: center; gap: .8rem;
            padding: .55rem clamp(.9rem, 3vw, 1.5rem);
            font-family: system-ui, sans-serif;
        }
        .atk-alarm-icon {
            flex-shrink: 0; width: 30px; height: 30px;
            display: grid; place-items: center;
            color: #ff9a85;
            background: rgba(220,70,45,.14);
            border: 1px solid rgba(255,110,85,.3);
            border-radius: 8px;
            animation: atkPulse 1.6s ease-in-out infinite;
        }
        .atk-alarm-icon svg { width: 16px; height: 16px; }
        @keyframes atkPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(230,75,50,.35); }
            50%      { box-shadow: 0 0 0 6px rgba(230,75,50,0); }
        }
        .atk-alarm-list {
            flex: 1; min-width: 0;
            display: flex; flex-direction: column; gap: .18rem;
        }
        .atk-alarm-row {
            display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
            font-size: .78rem; line-height: 1.35;
            color: #f2c4b8;
        }
        .atk-alarm-target { color: #ffd9cf; letter-spacing: .02em; white-space: nowrap; }
        .atk-alarm-target strong { color: #ffece6; font-weight: 700; }
        .atk-alarm-from { font-size: .68rem; color: rgba(242,196,184,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .atk-alarm-count {
            margin-left: auto;
            font-size: .74rem; font-weight: 700; letter-spacing: .05em;
            font-variant-numeric: tabular-nums;
            color: #ffb09e;
            background: rgba(220,70,45,.16);
            border: 1px solid rgba(255,110,85,.28);
            border-radius: 6px;
            padding: .12rem .5rem;
            white-space: nowrap;
        }
        .atk-alarm-count.crit {
            color: #fff1ed;
            background: #b3270f;
            border-color: #ff6a4d;
            animation: atkCrit 1s steps(2, jump-none) infinite;
        }
        @keyframes atkCrit { 50% { opacity: .55; } }
        .atk-alarm-link {
            flex-shrink: 0;
            font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
            color: #ffcdbf; text-decoration: none;
            border: 1px solid rgba(255,110,85,.3);
            border-radius: 6px;
            padding: .34rem .7rem;
            transition: background .18s, border-color .18s;
            white-space: nowrap;
        }
        .atk-alarm-link:hover { background: rgba(220,70,45,.18); border-color: rgba(255,110,85,.55); }
        .atk-alarm-dismiss {
            flex-shrink: 0;
            width: 26px; height: 26px;
            display: grid; place-items: center;
            font-size: .72rem; line-height: 1;
            color: rgba(242,196,184,.55);
            background: none;
            border: 1px solid transparent;
            border-radius: 6px;
            cursor: pointer;
            transition: color .18s, border-color .18s;
        }
        .atk-alarm-dismiss:hover { color: #ffd9cf; border-color: rgba(255,110,85,.3); }
        @media (max-width: 560px) {
            .atk-alarm-link { display: none; }
            .atk-alarm-from { display: none; }
        }

        /* Dropdown panel */
        .nav-bell-menu {
            position: absolute; top: calc(100% + .7rem); right: -6px;
            width: 368px; max-width: calc(100vw - 2rem);
            background: rgba(13,10,5,.97);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(201,168,76,.14);
            border-radius: 10px;
            box-shadow: 0 22px 55px rgba(0,0,0,.6), 0 3px 14px rgba(0,0,0,.45);
            overflow: hidden;
            z-index: 70;
        }
        /* Top accent line */
        .nav-bell-menu::after {
            content: ''; position: absolute; top: 0; left: .9rem; right: .9rem;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(201,168,76,.4), transparent);
        }
        /* Arrow pointing at the button */
        .nav-bell-menu::before {
            content: ''; position: absolute; top: -5.5px; right: 24px;
            width: 9px; height: 9px;
            background: rgba(13,10,5,.97);
            border-left: 1px solid rgba(201,168,76,.14);
            border-top: 1px solid rgba(201,168,76,.14);
            transform: rotate(45deg);
        }

        /* Header row: title + mark-all */
        .nav-bell-head {
            display: flex; align-items: center; justify-content: space-between; gap: .5rem;
            padding: .65rem .8rem .55rem;
            border-bottom: 1px solid rgba(201,168,76,.08);
        }
        .nav-bell-head-title {
            display: inline-flex; align-items: center; gap: .45rem;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: .98rem; letter-spacing: .06em; color: #f0e6d0;
        }
        .nav-bell-head-title svg { width: 15px; height: 15px; color: rgba(201,168,76,.8); }
        .nav-bell-mark {
            background: none; border: none; cursor: pointer;
            font-family: system-ui, sans-serif;
            font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
            color: rgba(201,168,76,.75);
            transition: color .15s;
        }
        .nav-bell-mark:hover { color: #c9a84c; }

        /* Scrollable list */
        .nav-bell-list {
            max-height: 320px; overflow-y: auto;
            scrollbar-width: thin; scrollbar-color: rgba(201,168,76,.25) transparent;
        }

        .nav-bell-item {
            position: relative;
            display: flex; gap: .6rem; align-items: flex-start;
            padding: .6rem .8rem;
            text-decoration: none;
            border-bottom: 1px solid rgba(201,168,76,.05);
            transition: background .15s;
        }
        .nav-bell-item:last-child { border-bottom: none; }
        .nav-bell-item:hover { background: rgba(201,168,76,.06); }

        .nav-bell-item .nb-icon {
            width: 30px; height: 30px; flex-shrink: 0;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 6px;
            background: rgba(201,168,76,.08);
            color: rgba(201,168,76,.75);
            border: 1px solid rgba(201,168,76,.12);
            margin-top: 1px;
        }
        .nav-bell-item .nb-icon svg { width: 15px; height: 15px; }

        .nav-bell-item .nb-content { min-width: 0; flex: 1; }
        .nav-bell-item .nb-title {
            display: block;
            font-family: system-ui, sans-serif;
            font-size: .7rem; font-weight: 600; letter-spacing: .03em;
            color: #e8dcc8;
            margin-bottom: .14rem;
        }
        .nav-bell-item .nb-body {
            display: block;
            font-family: system-ui, sans-serif;
            font-size: .66rem; line-height: 1.45;
            color: #a39c8e;
            margin-bottom: .22rem;
        }

        /* Reward chips (Quest/Erfolg: strukturierte Belohnung mit Icons) */
        .nav-bell-item .nb-rewards {
            display: flex; flex-wrap: wrap; gap: .3rem;
            margin: .08rem 0 .3rem;
        }
        .nav-bell-item .nb-reward {
            display: inline-flex; align-items: center; gap: .3rem;
            padding: .16rem .44rem;
            border-radius: 5px;
            background: linear-gradient(135deg, rgba(201,168,76,.11), rgba(201,168,76,.03));
            border: 1px solid rgba(201,168,76,.16);
            font-family: system-ui, sans-serif;
            font-size: .63rem; font-weight: 600;
            color: #e8dcc8;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .nav-bell-item .nb-reward svg { width: 14px; height: 14px; flex-shrink: 0; }
        .nav-bell-item .nb-reward-amt { color: #f0e6d0; }

        .nav-bell-item .nb-time {
            display: block;
            font-family: system-ui, sans-serif;
            font-size: .53rem; letter-spacing: .08em; text-transform: uppercase;
            color: #8a8170;
        }

        /* Unread accent bar */
        .nav-bell-item.unread .nb-title { color: #f0e6d0; }
        .nav-bell-item.unread::before {
            content: '';
            position: absolute; left: 0; top: 20%; bottom: 20%;
            width: 2px; border-radius: 2px;
            background: linear-gradient(to bottom, #c9a84c, transparent);
        }
        .nav-bell-item.unread .nb-body { color: #c8bfa8; }

        /* Empty state */
        .nav-bell-empty {
            padding: 1.8rem .8rem;
            text-align: center;
            font-family: system-ui, sans-serif;
            font-size: .66rem; letter-spacing: .1em;
            color: #8a8170;
        }

        /* Footer: browser-notification toggle */
        .nav-bell-foot {
            padding: .55rem .8rem;
            border-top: 1px solid rgba(201,168,76,.08);
        }
        .nav-bell-toggle {
            display: flex; align-items: center; gap: .5rem;
            width: 100%;
            background: none; border: none; cursor: pointer;
            text-align: left;
            padding: .15rem 0;
        }
        .nav-bell-toggle svg { width: 14px; height: 14px; flex-shrink: 0; color: rgba(201,168,76,.6); }
        .nav-bell-toggle-text {
            flex: 1;
            font-family: system-ui, sans-serif;
            font-size: .62rem; letter-spacing: .08em;
            color: #a39c8e;
            transition: color .15s;
        }
        .nav-bell-toggle:hover .nav-bell-toggle-text { color: #e8dcc8; }
        .nav-bell-toggle-state {
            font-family: system-ui, sans-serif;
            font-size: .5rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
            padding: .12rem .42rem; border-radius: 3px;
            color: rgba(201,168,76,.85);
            border: 1px solid rgba(201,168,76,.25);
            white-space: nowrap;
        }
        .nav-bell-toggle-state.on { color: #6da268; border-color: rgba(109,162,104,.35); }
        .nav-bell-toggle-state.off { color: #8a8170; border-color: rgba(138,129,112,.25); }
        /* Ergebnis-/Hinweistext nach dem Aktivieren oder Abmelden von Push. */
        .nav-bell-note {
            margin: .4rem 0 0;
            font-family: system-ui, sans-serif;
            font-size: .58rem; line-height: 1.45; letter-spacing: .03em;
            color: #8a8170;
        }

        /* Auf Smartphones darf ein Dropdown nicht an seiner Desktop-Ankerkante
           aus dem Viewport laufen. Ein fast vollbreites Panel ist zudem mit dem
           Daumen besser erreichbar; die Liste bleibt innerhalb der dynamischen
           Browserhöhe scrollbar. */
        @media (max-width: 640px) {
            .nav-bell-menu {
                position: fixed;
                top: calc(var(--nav-h) + var(--nav-safe-top) + .55rem);
                left: max(.75rem, var(--nav-safe-left));
                right: max(.75rem, var(--nav-safe-right));
                width: auto;
                max-width: none;
            }
            .nav-bell-list {
                max-height: calc(100vh - var(--nav-h) - var(--nav-safe-top) - 4rem);
                max-height: calc(100dvh - var(--nav-h) - var(--nav-safe-top) - 4rem);
            }
        }

        /* ── User dropdown (logged-in) ────────────────────────── */
        .nav-user { position: relative; flex-shrink: 0; margin-left: .15rem; }

        .nav-user-btn {
            display: inline-flex; align-items: center; gap: .58rem;
            padding: .26rem .58rem .26rem .36rem; border-radius: 9px;
            background: none; border: none; cursor: pointer;
            transition: background .18s;
        }
        .nav-user-btn:hover { background: rgba(201,168,76,.07); }
        .nav-user-btn.open { background: rgba(201,168,76,.1); }

        /* Avatar medallion */
        .nav-user-avatar {
            width: 34px; height: 34px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1rem; font-weight: 500; letter-spacing: .05em;
            color: #f0e6d0;
            background:
                radial-gradient(circle at 32% 26%, rgba(255,255,255,.14), transparent 52%),
                linear-gradient(135deg, color-mix(in srgb, var(--fac) 30%, transparent), rgba(201,168,76,.05));
            border: 1px solid color-mix(in srgb, var(--fac) 55%, transparent);
            box-shadow: inset 0 0 0 1px rgba(10,8,4,.55), 0 0 12px color-mix(in srgb, var(--fac) 22%, transparent);
            position: relative; overflow: hidden;
            text-shadow: 0 1px 2px rgba(0,0,0,.6);
        }
        .nav-user-avatar::after {
            content: ''; position: absolute; inset: -40%;
            background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%);
            transform: translateX(-80%);
            animation: navShine 5.5s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes navShine {
            0%, 55% { transform: translateX(-80%); }
            80%, 100% { transform: translateX(70%); }
        }
        .nav-user-avatar img {
            width: 100%; height: 100%; object-fit: cover;
            display: block; border-radius: 50%;
        }

        .nav-user-meta {
            display: flex; flex-direction: column; align-items: flex-start;
            line-height: 1; gap: .22rem; text-align: left;
        }
        .nav-user-name {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: .92rem; letter-spacing: .04em; color: #e8dcc8;
            max-width: 140px; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap;
        }
        .nav-user-sub {
            font-family: system-ui, sans-serif;
            font-size: .48rem; letter-spacing: .24em; text-transform: uppercase;
            color: var(--fac);
        }
        /* Auf schmalen Viewports bleibt nur das Medaillon stehen. */
        @media (max-width: 760px) {
            .nav-user-meta { display: none; }
            .nav-user-btn { padding: .26rem .3rem; gap: .3rem; }
        }
        .nav-user-caret {
            width: 14px; height: 14px; flex-shrink: 0;
            color: rgba(201,168,76,.7);
            transition: transform .25s cubic-bezier(.34,1.56,.64,1), color .2s;
        }
        .nav-user-btn.open .nav-user-caret { transform: rotate(180deg); color: rgba(201,168,76,.75); }

        /* Dropdown panel. Seit die Navi bis zu 10 Einträge führt (Zentrale,
           Markt, Held, Erfolge, Chat, Profil, Hall of Fame, Allianz, Admin,
           Abmelden), begrenzt max-height den Ausschlag auf kleinen Viewports
           und macht die Liste scrollbar, statt unter den Fold zu laufen. Die
           max-height/overflow liegen auf einem INNEREN Wrapper, damit der
           Pfeil (::before, top: -5.5px außerhalb des Panels) nicht vom
           Scrollport abgeschnitten wird. */
        .nav-user-menu {
            position: absolute; top: calc(100% + .7rem); right: 0;
            width: 282px; max-width: calc(100vw - 2rem);
            background: rgba(13,10,5,.97);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(201,168,76,.14);
            border-radius: 10px;
            box-shadow: 0 22px 55px rgba(0,0,0,.6), 0 3px 14px rgba(0,0,0,.45);
            padding: .4rem;
            z-index: 70;
        }
        .nav-user-menu-scroll {
            max-height: calc(100vh - 12rem);
            overflow-y: auto;
            scrollbar-width: thin; scrollbar-color: rgba(201,168,76,.25) transparent;
        }
        /* Top accent line */
        .nav-user-menu::after {
            content: ''; position: absolute; top: 0; left: .9rem; right: .9rem;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(201,168,76,.4), transparent);
        }
        /* Arrow pointing at the button */
        .nav-user-menu::before {
            content: ''; position: absolute; top: -5.5px; right: 26px;
            width: 9px; height: 9px;
            background: rgba(13,10,5,.97);
            border-left: 1px solid rgba(201,168,76,.14);
            border-top: 1px solid rgba(201,168,76,.14);
            transform: rotate(45deg);
        }

        @media (max-width: 640px) {
            .nav-user-menu {
                position: fixed;
                top: calc(var(--nav-h) + var(--nav-safe-top) + .55rem);
                left: max(.75rem, var(--nav-safe-left));
                right: max(.75rem, var(--nav-safe-right));
                width: auto;
                max-width: none;
            }
            .nav-user-menu-scroll {
                max-height: calc(100vh - var(--nav-h) - var(--nav-safe-top) - 1.5rem);
                max-height: calc(100dvh - var(--nav-h) - var(--nav-safe-top) - var(--nav-safe-bottom) - 1.5rem);
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }
        }

        /* Menu header (avatar + identity) */
        .nav-user-head {
            display: flex; align-items: center; gap: .65rem;
            padding: .5rem .55rem .65rem;
            border-bottom: 1px solid rgba(201,168,76,.08);
            margin-bottom: .35rem;
        }
        .nav-user-head .nav-user-avatar { width: 42px; height: 42px; font-size: 1.2rem; }
        .nav-user-head-name {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.14rem; letter-spacing: .05em; color: #f0e6d0;
            line-height: 1.1;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            max-width: 178px;
        }
        .nav-user-head-sub {
            font-family: system-ui, sans-serif;
            font-size: .5rem; letter-spacing: .2em; text-transform: uppercase;
            color: rgba(232,205,128,.65); margin-top: .22rem;
        }
        .nav-user-head-role {
            display: inline-block; margin-left: .35rem;
            font-size: .45rem; font-weight: 700; letter-spacing: .14em;
            color: rgba(10,8,4,.9);
            background: linear-gradient(135deg, #c9a84c, #a07830);
            border-radius: 3px; padding: .1rem .3rem; line-height: 1.2;
            vertical-align: middle;
        }

        /* Menu items */
        .nav-user-item {
            display: flex; align-items: center; gap: .66rem;
            padding: .58rem .68rem; border-radius: 7px;
            font-family: system-ui, sans-serif;
            font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
            color: #a39c8e; text-decoration: none; position: relative;
            transition: color .15s, background .15s;
            animation: navItemIn .32s cubic-bezier(.22,1,.36,1) both;
        }
        /* Versetzte Einblendung bis zu 10 Einträgen (Zentrale, Markt, Held,
           Erfolge, Chat, Allianz, Profil, Hall of Fame, [Admin], Abmelden).
           Die Gruppen-Labels sind <div>s und zählen nicht bei a:nth-of-type.
           Die Einträge liegen seit dem Scroll-Wrapper in .nav-user-menu-scroll —
           der Selektor muss deshalb auf den Wrapper zeigen (> auf den alten
           .nav-user-menu-Pfad würde ins Leere greifen). */
        .nav-user-menu-scroll > a:nth-of-type(1) { animation-delay: .03s; }
        .nav-user-menu-scroll > a:nth-of-type(2) { animation-delay: .07s; }
        .nav-user-menu-scroll > a:nth-of-type(3) { animation-delay: .11s; }
        .nav-user-menu-scroll > a:nth-of-type(4) { animation-delay: .15s; }
        .nav-user-menu-scroll > a:nth-of-type(5) { animation-delay: .19s; }
        .nav-user-menu-scroll > a:nth-of-type(6) { animation-delay: .23s; }
        .nav-user-menu-scroll > a:nth-of-type(7) { animation-delay: .27s; }
        .nav-user-menu-scroll > a:nth-of-type(8) { animation-delay: .31s; }
        .nav-user-menu-scroll > a:nth-of-type(9) { animation-delay: .35s; }
        .nav-user-menu-scroll > a:nth-of-type(10) { animation-delay: .39s; }
        /* Abmelden ist seit der CSRF-Härtung ein <button> in einem <form>.
           display:contents nimmt das Formular aus dem Layout, sodass der Button
           direktes Flex-Kind der Liste bleibt; der Rest setzt die Browser-
           Vorgaben eines Buttons zurück. Die Einblende-Verzögerung steht
           explizit hier — a:nth-of-type oben greift auf ein <button> nicht. */
        .nav-user-menu-scroll > form.nav-user-logout { display: contents; }
        .nav-user-logout > button.nav-user-item {
            width: 100%; background: none; border: 0; cursor: pointer;
            text-align: left; animation-delay: .43s;
        }
        @keyframes navItemIn {
            from { opacity: 0; transform: translateY(7px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .nav-user-item svg { width: 16px; height: 16px; flex-shrink: 0; color: rgba(201,168,76,.7); transition: color .15s, transform .2s; }
        .nav-user-item:hover { color: #e8dcc8; background: rgba(201,168,76,.06); }
        .nav-user-item:hover svg { color: #c9a84c; transform: translateX(2px); }
        .nav-user-item.active { color: #c9a84c; background: rgba(201,168,76,.08); }
        .nav-user-item.active svg { color: #c9a84c; }
        .nav-user-item.active::before {
            content: ''; position: absolute; left: 0; top: 25%; bottom: 25%;
            width: 2px; border-radius: 2px;
            background: linear-gradient(to bottom, #c9a84c, transparent);
        }
        .nav-user-item.danger { color: #c07070; }
        .nav-user-item.danger:hover { color: #f87171; background: rgba(248,113,113,.06); }
        .nav-user-item.danger:hover svg { color: #f87171; }

        /* Ungelesen-Badge am Chat-Eintrag (analog zur Glocke) */
        .nav-village-coord {
            margin-left: auto; font-family: system-ui, sans-serif;
            font-size: .52rem; letter-spacing: .04em;
            color: #6f6758; text-transform: none;
        }
        .nav-user-item .nu-badge.nu-badge-cap {
            margin-left: .25rem; position: static; transform: none;
            min-width: 16px; height: 16px; font-size: .6rem;
        }
        .nav-user-item .nu-badge {
            position: absolute; right: .6rem; top: 50%;
            transform: translateY(-50%);
            min-width: 14px; height: 14px; padding: 0 3px;
            border-radius: 7px;
            display: inline-flex; align-items: center; justify-content: center;
            font-family: system-ui, sans-serif;
            font-size: .5rem; font-weight: 700; line-height: 1;
            color: #1a1108;
            background: linear-gradient(135deg, #e0b557 0%, #c9a84c 100%);
            border: 1px solid rgba(10,8,4,.6);
            box-shadow: 0 1px 4px rgba(0,0,0,.5);
            font-variant-numeric: tabular-nums;
        }
        /* Puls wie bei der Glocke, solange Ungelesenes vorliegt */
        .nav-user-item.has-unread .nu-badge { animation: bellPulse 2.4s ease-in-out infinite; }
        /* Group labels (Spiel / Profil / System) — bewusst <div>, damit die
           a:nth-of-type-Stagger-Animationen der Menüpunkte unberührt bleiben.
           (Das alte .nav-user-sep entfällt: Die Gruppen-Labels mit ihren
           ::after-Trennlinien ersetzen die separaten Sep-Divs.)
           Dezente Opacity-Fade-In, synchron zur Stagger-Animation der Menü-
           punkte: Jedes Label blendet mit dem ersten Eintrag seiner Gruppe
           ein (Spiel↔Zentrale, Profil↔Profil bearbeiten, System↔Admin). */
        .nav-user-group {
            display: flex; align-items: center; gap: .5rem;
            padding: .68rem .6rem .32rem;
            font-family: system-ui, sans-serif;
            font-size: .54rem; font-weight: 700; letter-spacing: .22em;
            text-transform: uppercase;
            color: rgba(232,205,128,.75);
            white-space: nowrap;
            animation: navGroupIn .3s cubic-bezier(.22,1,.36,1) both;
        }
        .nav-user-group svg { width: 12px; height: 12px; flex-shrink: 0; color: rgba(201,168,76,.78); }
        /* Auslaufende Linie rechts vom Label */
        .nav-user-group::after {
            content: '';
            flex: 1; height: 1px;
            background: linear-gradient(to right, rgba(201,168,76,.16), transparent);
        }
        @keyframes navGroupIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        /* Stagger: div 1 ist .nav-user-head, danach die 3 Labels — die Delays
           spiegeln die a:nth-of-type-Timeline der Menüpunkte wider. */
        .nav-user-menu-scroll > div.nav-user-group:nth-of-type(2) { animation-delay: .03s; }
        .nav-user-menu-scroll > div.nav-user-group:nth-of-type(3) { animation-delay: .27s; }
        .nav-user-menu-scroll > div.nav-user-group:nth-of-type(4) { animation-delay: .35s; }

        /* ── Public nav (logged-out) ────────────────────────────── */
        .nav-pub-links {
            display: flex; align-items: center; gap: .12rem;
            padding-left: 1.1rem; order: 2;
        }

        .nav-btn-register {
            display: inline-flex; align-items: center; gap: .45rem;
            margin-left: .6rem; padding: .48rem 1.05rem;
            border-radius: 7px;
            background: linear-gradient(135deg, #c9a84c 0%, #a07830 100%);
            color: #1a1108 !important;
            font-family: system-ui, sans-serif;
            font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
            text-decoration: none;
            position: relative; overflow: hidden;
            box-shadow: 0 2px 10px -2px rgba(201,168,76,.45);
            transition: filter .2s;
        }
        .nav-btn-register::before {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,.14) 0%, transparent 55%);
            pointer-events: none;
        }
        .nav-btn-register:hover { filter: brightness(1.1); }
        .nav-btn-register svg { width: 11px; height: 11px; }

        /* ══════════════════════════════════════════════════════════
           Responsive — öffentliche Navigation (ausgeloggt)

           Strategie: Labels verschwinden zuerst, dann wird der
           News-Link gekappt, das Logo-Wortmarke und zuletzt der
           Registrieren-Button die Beschriftung abgegeben.
           Auf „pointer: coarse" (Finger-Display) werden die
           Trefferflächen auf 44 px gebracht.
        ══════════════════════════════════════════════════════════ */

        /* Stufe 2 — News-Link einsparen, Registrieren schrumpfen */
        @media (max-width: 520px) {
            /* News ist Zusatzinhalt; Login bleibt auch auf dem kleinsten
               Smartphone direkt erreichbar. */
            .nav-pub-links .nav-link:first-child { display: none; }
            .nav-btn-register { margin-left: .4rem; padding: .48rem .85rem; }
        }

        /* Stufe 3 — Logo-Wordmark ausblenden, Logo-Padding kürzen */
        @media (max-width: 400px) {
            .nav-logo-wordmark { display: none; }
            .nav-logo { padding-right: .6rem; border-right: none; }
        }

        /* Stufe 4 — ultrakompakt (z. B. iPhone SE / alte Androids) */
        @media (max-width: 330px) {
            .nav-btn-register { padding: .42rem .65rem; font-size: .62rem; }
            .nav-logo-icon { width: 24px; height: 24px; }
        }

        /* Fingerbediente Geräte: Trefferflächen für .nav-btn-register
           und die öffentlichen .nav-links verlängern */
        @media (pointer: coarse) {
            .nav-btn-register { min-width: 44px; min-height: 44px; }
        }

        /* Höhe immer wie Desktop — die :root-Mediaqueries erhöhen
           --nav-h nur für die zweizeilige eingeloggte Version.
           Die öffentliche Nav bleibt konstant 4.25rem. */
        .nav-bar:has(.nav-pub-links) { height: calc(4.25rem + var(--nav-safe-top)); }
        .nav-bar:has(.nav-pub-links) + .nav-spacer { height: calc(4.25rem + var(--nav-safe-top)); }
        /* Fallback für Browser ohne :has() (ältere Android WebViews) */
        .nav-bar.nav-loggedout { height: calc(4.25rem + var(--nav-safe-top)); }
        .nav-bar.nav-loggedout + .nav-spacer { height: calc(4.25rem + var(--nav-safe-top)); }

/* ===== aus tmp/footer.php ===== */
/* ── Footer — Dark Luxury (.ft-*) ──────────────────────────────
   Aufbau unveraendert: Dekoschichten, vierspaltiges Raster, Bottom-Bar.
   Neu ist die Tiefe — ein animierter Goldbogen unter der Oberkante, ein
   Siegel mit gegenlaeufig drehenden Ringen, ein eigenes Icon je Link und
   eine Spielinfo-Karte. Alle Bewegung laeuft ueber transform/opacity
   (Compositor); die globale prefers-reduced-motion-Regel am Dateiende
   legt sie still. */

/* Gold top-edge shimmer (mirrors navbar bottom) */
.ft-footer-top-line {
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    overflow: hidden;
    background: linear-gradient(90deg,
        transparent 0%, rgba(201,168,76,.35) 25%,
        rgba(201,168,76,.35) 75%, transparent 100%);
    pointer-events: none;
}
/* Wanderndes Licht auf der Oberkante */
.ft-footer-top-line::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%;
    background: linear-gradient(90deg, transparent, rgba(255,244,208,.8), transparent);
    animation: ft-sheen 11s cubic-bezier(.45,0,.55,1) infinite;
}

/* ── Deko-Bogen ──────────────────────────────────────────────────
   Zwei flache Goldboegen unter der Oberkante. Auf dem oberen liegt eine
   gestrichelte Kopie (.ft-arc-trace), deren dashoffset wandert — dadurch
   ziehen in grossen Abstaenden feine Lichtpunkte ueber den Bogen. */
.ft-arc {
    position: absolute; top: -1px; left: 0; width: 100%; height: 200px;
    pointer-events: none;
}
.ft-arc-trace { animation: ft-trace 13s linear infinite; }
.ft-arc-node { animation: ft-twinkle 7s ease-in-out infinite; }
.ft-arc-node:nth-child(2) { animation-delay: -2.6s; }
.ft-arc-node:nth-child(3) { animation-delay: -5.1s; }

/* Grain texture */
.ft-grain {
    position: absolute; inset: 0; pointer-events: none; opacity: .016;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Subtle radial glow at centre-bottom */
.ft-glow {
    position: absolute; bottom: -40%; left: 50%; transform: translateX(-50%);
    width: 700px; height: 300px;
    background: radial-gradient(ellipse, rgba(201,168,76,.055) 0%, transparent 65%);
    pointer-events: none;
    animation: ft-breathe 13s ease-in-out infinite;
}

/* Roman numeral watermark */
.ft-watermark {
    position: absolute; bottom: -1rem; right: 2rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 9rem; font-weight: 300; line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(201,168,76,.04);
    user-select: none; pointer-events: none;
    animation: ft-fade 19s ease-in-out infinite;
}

/* Main grid */
.ft-inner {
    position: relative; z-index: 1;
    max-width: 1280px; margin: 0 auto;
    padding: 3.75rem 1.5rem 2.75rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.75rem;
}
@media (min-width: 640px) {
    .ft-inner { grid-template-columns: 1.8fr 1fr 1fr; gap: 3rem; }
}
@media (min-width: 860px) {
    .ft-inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; }
}

/* ── Brand column ─────────────────────────────────────────── */
.ft-brand { display: flex; flex-direction: column; gap: 0; }

.ft-logo {
    display: inline-flex; align-items: center; gap: .8rem;
    text-decoration: none; margin-bottom: 1.05rem;
    width: fit-content;
    transition: opacity .25s ease;
}
.ft-logo:hover { opacity: .86; }

.ft-logo-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    overflow: visible;   /* der umlaufende Lichtpunkt ragt minimal hinaus */
}

/* Siegel — vier Bewegungen auf getrennten Gruppen, damit sie sich nicht
   gegenseitig ueberschreiben. Drehpunkt ist jeweils die viewBox-Mitte. */
.ft-seal-ring,
.ft-seal-meridian,
.ft-seal-orbit,
.ft-seal-halo,
.ft-seal-core { transform-box: view-box; transform-origin: 50% 50%; }
.ft-seal-ring     { animation: ft-spin 78s  linear infinite; }
.ft-seal-meridian { animation: ft-spin 104s linear infinite reverse; }
.ft-seal-orbit    { animation: ft-spin 34s  linear infinite; }
.ft-seal-core     { animation: ft-scale 7.5s ease-in-out infinite; }
.ft-seal-halo     { animation: ft-halo 9s ease-in-out infinite; }

.ft-logo-wordmark { display: flex; flex-direction: column; line-height: 1; }
.ft-logo-em {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: .95rem; font-weight: 500;
    letter-spacing: .2em; text-transform: uppercase;
    color: #c9a84c;
}
/* Langsam wandernder Goldschimmer ueber dem Wortzeichen */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ft-logo-em {
        background-image: linear-gradient(100deg,
            #8d6f2c 0%, #c9a84c 16%, #f6e7b0 30%, #fff8de 39%,
            #f6e7b0 48%, #c9a84c 62%, #8d6f2c 100%);
        background-size: 240% 100%;
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: transparent;
        animation: ft-shimmer 9.5s ease-in-out infinite;
    }
}
.ft-logo-sub {
    font-family: system-ui, sans-serif;
    font-size: .5rem; letter-spacing: .3em; text-transform: uppercase;
    color: rgba(232,205,128,.6); margin-top: .3rem;
}

.ft-tagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: .95rem; font-weight: 300; font-style: italic;
    color: rgba(200,185,160,.8); line-height: 1.65;
    max-width: 240px; margin-bottom: 1.5rem;
}

.ft-ornament {
    display: flex; align-items: center; gap: .6rem;
}
.ft-ornament-line {
    height: 1px; width: 32px;
    background: linear-gradient(to right, rgba(201,168,76,.3), transparent);
}
.ft-ornament-line--rev {
    background: linear-gradient(to left, rgba(201,168,76,.3), transparent);
}
.ft-ornament-mark {
    width: 15px; height: 15px; flex-shrink: 0; overflow: visible;
    color: rgba(214,180,90,.55);
}
.ft-ornament-mark .ft-ornament-star,
.ft-ornament-mark .ft-ornament-halo { transform-box: view-box; transform-origin: 50% 50%; }
.ft-ornament-star { animation: ft-spin 46s linear infinite; }
.ft-ornament-halo { animation: ft-spin 68s linear infinite reverse; }
.ft-ornament-core { animation: ft-twinkle 6s ease-in-out infinite; }

/* ── Link columns ─────────────────────────────────────────── */
.ft-col { display: flex; flex-direction: column; }

.ft-col-label {
    position: relative;
    display: flex; align-items: center; gap: .55rem;
    font-family: system-ui, sans-serif;
    font-size: .55rem; letter-spacing: .24em; text-transform: uppercase;
    color: rgba(232,205,128,.75);
    margin-bottom: 1.15rem; padding-bottom: .75rem;
}
/* Verlaufslinie statt harter Kante, mit Diamant am linken Ende */
.ft-col-label::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg,
        rgba(201,168,76,.32), rgba(201,168,76,.07) 58%, transparent);
}
.ft-col-label::before {
    content: ''; position: absolute; left: 0; bottom: -1.5px;
    width: 4px; height: 4px; transform: rotate(45deg);
    background: rgba(232,205,128,.55);
    box-shadow: 0 0 6px rgba(232,205,128,.3);
}
.ft-col-ico {
    display: inline-flex; width: 15px; height: 15px; flex-shrink: 0;
    color: rgba(224,189,98,.8);
}
.ft-col-ico svg { width: 100%; height: 100%; overflow: visible; }
.ft-col-ico svg g { transform-box: view-box; transform-origin: 50% 50%; }
/* Kompassnadel pendelt, Waage kippt minimal */
.ft-needle { animation: ft-swing 21s cubic-bezier(.45,0,.55,1) infinite; }
.ft-tilt   { animation: ft-tilt 15s ease-in-out infinite; }

.ft-links { display: flex; flex-direction: column; gap: .3rem; }

.ft-link {
    position: relative;
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: system-ui, sans-serif;
    font-size: .71rem; letter-spacing: .035em; line-height: 1.5;
    color: #9a9080; text-decoration: none;
    padding: .14rem 0;
    transition: color .22s ease;
    width: fit-content; max-width: 100%;
}
/* Sanfter Goldschein hinter der Zeile */
.ft-link::before {
    content: ''; position: absolute; inset: 0 -.7rem 0 -.8rem; border-radius: 7px;
    background: linear-gradient(90deg, rgba(201,168,76,.1), rgba(201,168,76,.03) 55%, transparent);
    opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
/* Goldene Kante links, waechst beim Hovern */
.ft-link::after {
    content: ''; position: absolute; left: -.8rem; top: 50%; width: 1px; height: 0;
    transform: translateY(-50%);
    background: linear-gradient(180deg, transparent, rgba(232,205,128,.85), transparent);
    transition: height .28s cubic-bezier(.3,.9,.3,1); pointer-events: none;
}
.ft-link-ico {
    display: inline-flex; width: 15px; height: 15px; flex-shrink: 0;
    color: rgba(201,168,76,.58);
    transition: color .22s ease, transform .3s cubic-bezier(.3,.9,.3,1);
}
.ft-link-ico svg { width: 100%; height: 100%; overflow: visible; }
.ft-link:hover, .ft-link:focus-visible { color: rgba(240,222,168,.95); }
.ft-link:hover::before, .ft-link:focus-visible::before { opacity: 1; }
.ft-link:hover::after, .ft-link:focus-visible::after { height: 72%; }
.ft-link:hover .ft-link-ico, .ft-link:focus-visible .ft-link-ico {
    color: #e9cf85; transform: translateX(1.5px) scale(1.07);
}
.ft-link:focus-visible { outline: 1px solid rgba(238,215,140,.55); outline-offset: .3rem; }
/* Der Cookie-Knopf erbt sonst nur die Browser-Schrift, weil
   cookie-consent.css `font: inherit` setzt; hier auf Link-Mass gebracht. */
.ft-link.ft-cookie-settings {
    padding: .14rem 0; background: transparent; border: 0; cursor: pointer;
    font-family: system-ui, sans-serif;
    font-size: .71rem; letter-spacing: .035em; line-height: 1.5;
    color: #9a9080;
}

/* ── Spielinfo-Karte ──────────────────────────────────────── */
.ft-info {
    position: relative; margin-top: 1.6rem;
    padding: .85rem 1rem .9rem 1.05rem;
    border: 1px solid rgba(201,168,76,.09); border-radius: 9px;
    background: linear-gradient(180deg, rgba(201,168,76,.045), rgba(201,168,76,.012));
    overflow: hidden;
}
/* Atmender Goldsaum links */
.ft-info::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(180deg, transparent, rgba(232,205,128,.55), transparent);
    animation: ft-breathe 8s ease-in-out infinite;
}
.ft-info-head {
    display: flex; align-items: center; gap: .45rem;
    font-family: system-ui, sans-serif;
    font-size: .54rem; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(232,205,128,.72); margin-bottom: .6rem;
}
.ft-info-dot {
    width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
    background: #d8b45f;
    animation: ft-beacon 3.6s ease-in-out infinite;
}
.ft-info-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: .34rem;
}
.ft-info-item {
    display: flex; align-items: center; gap: .5rem;
    font-family: system-ui, sans-serif;
    font-size: .625rem; line-height: 1.55; color: #9a9080;
}
.ft-info-ico {
    display: inline-flex; width: 13px; height: 13px; flex-shrink: 0;
    color: rgba(201,168,76,.55);
}
.ft-info-ico svg { width: 100%; height: 100%; overflow: visible; }

/* ── Bottom bar ───────────────────────────────────────────── */
.ft-bottom {
    position: relative; z-index: 1;
    border-top: 1px solid rgba(201,168,76,.07);
    max-width: 1280px; margin: 0 auto;
    padding: 1.2rem 1.5rem;
    display: flex; flex-direction: column; align-items: center; gap: .8rem;
    overflow: hidden;   /* begrenzt den Lichtlauf auf die Trennlinie */
}
/* Wanderndes Licht auf der Trennlinie */
.ft-bottom::after {
    content: ''; position: absolute; top: 0; left: -28%; width: 28%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,244,208,.75), transparent);
    animation: ft-sheen 15s cubic-bezier(.45,0,.55,1) infinite;
    pointer-events: none;
}
@media (min-width: 640px) {
    .ft-bottom {
        flex-direction: row; justify-content: space-between; gap: 1rem;
    }
}

.ft-bottom-copy {
    font-family: system-ui, sans-serif;
    font-size: .58rem; letter-spacing: .1em;
    color: #928778;
    display: flex; align-items: center; gap: .6rem;
}
.ft-bottom-crest {
    width: 13px; height: 13px; flex-shrink: 0;
    color: rgba(201,168,76,.55); overflow: visible;
}
.ft-bottom-crest-ring {
    transform-box: view-box; transform-origin: 50% 50%;
    animation: ft-spin 52s linear infinite;
}

.ft-bottom-mid {
    font-family: system-ui, sans-serif;
    font-size: .58rem; letter-spacing: .1em;
    color: #928778;
    display: flex; align-items: center; gap: .4rem;
}
.ft-heart {
    width: 12px; height: 12px; flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(220,183,94,.4));
}
.ft-heart-beat {
    transform-box: view-box; transform-origin: 50% 50%;
    animation: ft-beat 3.6s ease-in-out infinite;
}

.ft-bottom-powered {
    display: flex; align-items: center; gap: .5rem;
}
.ft-bottom-powered span {
    font-family: system-ui, sans-serif;
    font-size: .57rem; letter-spacing: .08em;
    color: #928778;
}
.ft-bottom-powered a {
    position: relative;
    font-family: system-ui, sans-serif;
    font-size: .57rem; letter-spacing: .08em;
    color: #928778; text-decoration: none;
    transition: color .22s;
}
.ft-bottom-powered a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
    background: linear-gradient(90deg, rgba(201,168,76,.65), rgba(232,205,128,.12));
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s cubic-bezier(.3,.9,.3,1);
}
.ft-bottom-powered a:hover { color: rgba(232,205,128,.66); }
.ft-bottom-powered a:hover::after { transform: scaleX(1); }

/* ── Footer-Animationen ───────────────────────────────────────
   Ausschliesslich transform/opacity, damit nichts im Layout rechnet.
   Die globale prefers-reduced-motion-Regel weiter unten legt alles still. */
@keyframes ft-sheen   { 0%, 6% { transform: translateX(0); } 58%, 100% { transform: translateX(460%); } }
@keyframes ft-trace   { to { stroke-dashoffset: -38; } }
@keyframes ft-spin    { to { transform: rotate(360deg); } }
@keyframes ft-scale   { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes ft-halo    { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes ft-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }
@keyframes ft-breathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes ft-swing   { 0%, 100% { transform: rotate(-13deg); } 50% { transform: rotate(13deg); } }
@keyframes ft-tilt    { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.4deg); } }
@keyframes ft-beacon  { 0%, 100% { opacity: .5; box-shadow: 0 0 0 2px rgba(216,180,95,.1); }
                        50%      { opacity: 1;  box-shadow: 0 0 0 4px rgba(216,180,95,.18); } }
@keyframes ft-beat    { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.14); } 87% { transform: scale(.98); } }
@keyframes ft-shimmer { 0%, 100% { background-position: 128% 0; } 55% { background-position: -28% 0; } }
@keyframes ft-fade    { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }

/* ── Autofill im Empire-Farbsystem ─────────────────────────────
   Browser legen bei gespeicherten Zugangsdaten oft eine helle Fläche über
   das Feld. Die Innenfläche wird bewusst per inset-shadow gesetzt, weil
   Chromium background-color bei :-webkit-autofill sonst ignoriert. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #e8dece !important;
    caret-color: #f0d784 !important;
    background-color: #100e0a !important;
    -webkit-box-shadow: 0 0 0 1000px #100e0a inset !important;
    box-shadow: 0 0 0 1000px #100e0a inset !important;
    transition: background-color 9999s ease-out 0s;
}

input:autofill,
textarea:autofill,
select:autofill {
    color: #e8dece !important;
    caret-color: #f0d784 !important;
    background-color: #100e0a !important;
    box-shadow: 0 0 0 1000px #100e0a inset !important;
    transition: background-color 9999s ease-out 0s;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
    border-color: rgba(226, 193, 104, .58) !important;
    outline: none;
}

input:autofill:focus,
textarea:autofill:focus,
select:autofill:focus {
    border-color: rgba(226, 193, 104, .58) !important;
    outline: none;
}

/* ── Sichtbare Brotkrümel (BreadcrumbList-Schema als Navigation) ─
   header.php rendert dieselbe Liste, die als JSON-LD ausgeliefert wird.
   Dezent gehalten: die Seitenmodule darunter bringen ihre eigene Optik mit. */
.crumbs { padding: .9rem 1.25rem 0; }
.crumbs-list {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .45rem;
    max-width: 1180px; margin: 0 auto; padding: 0;
    list-style: none;
    font-family: system-ui, sans-serif;
    font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
}
.crumbs-item { display: inline-flex; align-items: center; gap: .45rem; }
.crumbs-item + .crumbs-item::before {
    content: '›'; color: rgba(201,168,76,.4); font-size: .8rem; line-height: 1;
}
.crumbs-link {
    color: rgba(232,205,128,.72); text-decoration: none;
    transition: color .15s ease;
}
.crumbs-link:hover { color: #e8d9a8; }
.crumbs-here { color: #8a8170; }

/* ── Globale Bewegungsreduktion ────────────────────────────────
   Sicherheitsnetz für alle Seitenmodule: Seitenspezifische Regeln dürfen
   weiterhin eine präzisere statische Darstellung definieren. */
@media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
}