/* CSS von tmp/page_home.php — ausgelagert aus dem Inline-<style>-Block.
 * Eingebunden ueber $pageCss in tmp/header.php. */

/* ═══════════════════════════════════════════════════════════════
   Home — Dark Luxury Landing Page
   ═══════════════════════════════════════════════════════════════ */

:root {
    --gold:     #c9a84c;
    --gold-dim: rgba(201,168,76,.55);
    --gold-glow: rgba(201,168,76,.08);
    --dark:     #0a0804;
    --dark-mid: #0e0b06;
}

/* ── Shared utilities ─────────────────────────────────────────── */
.hm-section {
    position: relative;
    overflow: hidden;
}

/* Grain overlay reused across sections */
.hm-grain {
    position: absolute; inset: 0; pointer-events: none;
    opacity: .022;
    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");
}

/* Scroll-triggered reveal */
.hm-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
}
.hm-reveal.hm-visible { opacity: 1; transform: none; }
.hm-reveal-d1 { transition-delay: .1s; }
.hm-reveal-d2 { transition-delay: .2s; }
.hm-reveal-d3 { transition-delay: .3s; }
.hm-reveal-d4 { transition-delay: .4s; }
.hm-reveal-d5 { transition-delay: .5s; }

/* Section header pattern */
.hm-sh {
    text-align: center;
    margin-bottom: 3rem;
}
.hm-sh-eyebrow {
    display: flex; align-items: center; justify-content: center; gap: .7rem;
    font-family: system-ui, sans-serif;
    font-size: .58rem; letter-spacing: .28em; text-transform: uppercase;
    color: rgba(232,205,128,.72); margin-bottom: 1rem;
}
.hm-sh-line { width: 30px; height: 1px; background: rgba(201,168,76,.3); }
.hm-sh-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 300; letter-spacing: .1em; color: #f0e6d0;
    margin: 0 0 .6rem; line-height: 1.1;
}
.hm-sh-subtitle {
    font-family: system-ui, sans-serif;
    font-size: .78rem; color: #8a8170; max-width: 480px; margin: 0 auto;
    line-height: 1.7; letter-spacing: .02em;
}

/* Gold ornament star */
.hm-star {
    display: inline-flex; color: var(--gold); opacity: .65;
    margin: 0 .1rem;
}

/* ═══════════════════════════════════════════════════════════════
   § 1  HERO — High-End Enterprise Heraldic Design
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ──────────────────────────────────── */
.hm-hero {
    --hm-mx: 50%;
    --hm-my: 50%;
    min-height: calc(100vh - var(--nav-h, 3rem));
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem 6rem;
    background: radial-gradient(ellipse at 50% 0%, #100c07 0%, #080502 55%, #040201 100%);
    position: relative; overflow: hidden;
}

/* ── Depth 1: Animated grid ─────────────────────────────────── */
.hm-hero-grid {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(201,168,76,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,76,.02) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: hmGridDrift 90s linear infinite;
}
@keyframes hmGridDrift {
    from { background-position: 0 0; }
    to   { background-position: 80px 80px; }
}

/* ── Depth 2: Floating orbs ─────────────────────────────────── */
.hm-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.hm-orb-1 {
    width: 650px; height: 650px;
    background: radial-gradient(circle at 40% 40%, rgba(201,168,76,.045) 0%, rgba(180,140,60,.015) 35%, transparent 68%);
    top: -18%; left: -18%;
    animation: hmOrbFloat 32s ease-in-out infinite alternate;
}
.hm-orb-2 {
    width: 480px; height: 480px;
    background: radial-gradient(circle at 55% 55%, rgba(201,168,76,.038) 0%, transparent 68%);
    bottom: -12%; right: -10%;
    animation: hmOrbFloat2 38s ease-in-out infinite alternate;
}
.hm-orb-3 {
    width: 320px; height: 320px;
    background: radial-gradient(circle at 50% 50%, rgba(201,168,76,.028) 0%, transparent 70%);
    top: 38%; right: 8%;
    animation: hmOrbFloat 22s ease-in-out 4s infinite alternate;
}
@keyframes hmOrbFloat  { from{transform:translateY(0) scale(1) rotate(0deg)}   to{transform:translateY(75px) scale(1.07) rotate(4deg)} }
@keyframes hmOrbFloat2 { from{transform:translateY(0) scale(1) rotate(0deg)}   to{transform:translateY(-55px) scale(1.05) rotate(-6deg)} }

/* ── Depth 3: Glow auras ────────────────────────────────────── */
.hm-hero-glow {
    position: absolute; z-index: 0; pointer-events: none;
    bottom: -28%; left: 50%; transform: translateX(-50%);
    width: 1100px; height: 650px;
    background: radial-gradient(ellipse at 50% 50%, rgba(201,168,76,.08) 0%, rgba(180,140,60,.02) 30%, transparent 65%);
}
.hm-hero-glow-2 {
    position: absolute; z-index: 0; pointer-events: none;
    top: -18%; right: -15%;
    width: 750px; height: 550px;
    background: radial-gradient(ellipse at 55% 40%, rgba(201,168,76,.04) 0%, transparent 65%);
}
/* Mouse-tracking glow — position updated by JS */
.hm-hero-glow-3 {
    position: absolute; z-index: 0; pointer-events: none;
    width: 550px; height: 550px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201,168,76,.065) 0%, transparent 68%);
    opacity: 0; transition: opacity .5s ease;
    left: calc(var(--hm-mx) - 275px);
    top:  calc(var(--hm-my) - 275px);
}

/* ── Watermark ──────────────────────────────────────────────── */
.hm-hero-watermark {
    position: absolute; z-index: 0; pointer-events: none; user-select: none;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(8rem, 26vw, 22rem);
    font-weight: 300; letter-spacing: .35em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(201,168,76,.035);
    text-transform: uppercase; white-space: nowrap; line-height: 1;
}

/* ── Hero content ───────────────────────────────────────────── */
/* Container-Query-Kontext für den Schriftzug: dessen Größe muss sich an der
   SPALTE orientieren, nicht am Viewport. Die Spalte ist auf 760px begrenzt,
   während 9.5vw bei 1600px weiterwächst — genau daraus entstand der Überlauf. */
.hm-hero-content { position: relative; z-index: 3; max-width: 760px; container-type: inline-size; }

.hm-hero-eyebrow {
    display: flex; align-items: center; justify-content: center; gap: .85rem;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: .6rem; letter-spacing: .34em; text-transform: uppercase;
    color: rgba(232,205,128,.75); margin-bottom: 2.2rem;
    animation: hmFadeUp 1s .1s cubic-bezier(.22,1,.36,1) both;
}
.hm-hero-eyebrow-line { width: 34px; height: 1px; background: linear-gradient(to right, transparent, rgba(201,168,76,.3), transparent); }

.hm-hero-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300; letter-spacing: .2em; text-transform: uppercase;
    color: #f3ead8; line-height: .9; margin: 0 0 .2rem;
    font-size: clamp(4.2rem, 12vw, 9.5rem);
    animation: hmFadeUp 1.1s .2s cubic-bezier(.22,1,.36,1) both;
}
/* Der Marken-Schriftzug trägt den Gold-Gradienten. Der Selektor ist auf
   .hm-hero-brand eingegrenzt (vorher: jeder span im <h1>), damit der
   Keyword-Claim darunter NICHT als Gradient-Text gerendert wird.
   Der Schriftzug bleibt innerhalb EINER Zeile je Wort (white-space: nowrap):
   „EMPIRE" und „ALEMAN" dürfen nicht mitten im Wort umbrechen. */
.hm-hero-title .hm-hero-brand {
    display: block;
    min-width: 0;
    max-width: 100%;
    /* Basis: 13cqi. Gemessen: das längste Wort („ALEMAN") belegt bei 16cqi rund
       100 % der Spaltenbreite — die Sperrung (.2em) frisst den Rest, das Wort
       lief rechts heraus. 13cqi lässt ~15 % Luft, sodass der Schriftzug in jeder
       Spaltenbreite vollständig sichtbar bleibt (nachgemessen 320–1920px).
       Der vw-Wert davor ist der Fallback für Browser ohne Container-Queries. */
    font-size: clamp(1.6rem, 8vw, 9rem);
    font-size: clamp(1.6rem, 13cqi, 9rem);
    color: transparent;
    background: linear-gradient(160deg, #f2e3b8 0%, #d4b65c 25%, #ba8a38 50%, #e8d5a3 70%, #c9a84c 85%, #8a5a20 100%);
    background-size: 150% 150%;
    -webkit-background-clip: text; background-clip: text;
    animation: hmGoldShimmer 5s ease infinite;
}
/* Kein Umbruch mitten im Wort: die beiden Schriftzug-Zeilen sind durch <br>
   getrennt, jedes Wort bleibt als Ganzes zusammen. */
.hm-hero-title .hm-hero-brand > span,
.hm-hero-title .hm-hero-brand {
    white-space: nowrap;
}
/* Im schmalen Desktop-Grid (1fr 580px — die Textspalte fällt dort auf ~330px)
   ist die Sperrung von .2em der ausschlaggebende Restposten. Sie wird dort auf
   .12em reduziert; dadurch passt „ALEMAN" auch im engsten Band (1024px) ohne
   Abschnitt. Die Anmutung bleibt erhalten, weil die Schrift zugleich kleiner ist. */
@container (max-width: 420px) {
    .hm-hero-title { letter-spacing: .12em; }
}
/* Der eigentliche H1-Text: dezent unter dem Schriftzug, erbt bewusst NICHT die
   Riesenschrift des Titels (deshalb eigene font-size/letter-spacing). */
.hm-hero-title .hm-hero-claim {
    display: block;
    margin-top: .55rem;
    font-size: clamp(.72rem, 1.5vw, .95rem);
    font-weight: 400;
    letter-spacing: .28em;
    line-height: 1.5;
    text-transform: uppercase;
    color: rgba(232, 213, 163, .72);
}
@keyframes hmGoldShimmer {
    0%,100% { background-position: 0% 50%; }
    50%     { background-position: 100% 50%; }
}

/* ── Title ornament line ────────────────────────────────────── */
.hm-hero-subtitle-line {
    display: flex; align-items: center; justify-content: center; gap: 1.1rem;
    margin: 1.8rem 0 1.6rem;
    animation: hmFadeUp 1s .32s cubic-bezier(.22,1,.36,1) both;
}
.hm-hero-subtitle-line-seg { height: 1px; width: 55px; }
.hm-hero-subtitle-line-seg.l {
    background: linear-gradient(to right, transparent, rgba(201,168,76,.52), rgba(201,168,76,.22));
}
.hm-hero-subtitle-line-seg.r {
    background: linear-gradient(to left, transparent, rgba(201,168,76,.52), rgba(201,168,76,.22));
}

/* ── Gold star ornament ─────────────────────────────────────── */
.hm-star {
    display: inline-flex; color: var(--gold); opacity: .7;
    margin: 0 .1rem;
    animation: hmStarPulse 3s ease-in-out infinite;
}
@keyframes hmStarPulse {
    0%,100% { opacity: .5; transform: scale(1); }
    50%     { opacity: .85; transform: scale(1.12); }
}

.hm-hero-tagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.2rem, 2.8vw, 1.55rem);
    font-weight: 300; font-style: italic;
    color: rgba(215,200,170,.78); letter-spacing: .06em; line-height: 1.65;
    margin-bottom: 3.2rem;
    animation: hmFadeUp 1s .38s cubic-bezier(.22,1,.36,1) both;
}

/* ── CTA buttons ────────────────────────────────────────────── */
.hm-hero-ctas {
    display: flex; align-items: center; justify-content: center;
    gap: 1.2rem; flex-wrap: wrap;
    animation: hmFadeUp 1s .5s cubic-bezier(.22,1,.36,1) both;
}

.hm-btn-primary {
    display: inline-flex; align-items: center; gap: .6rem;
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #d9bc68 0%, #b88938 30%, #c9a84c 55%, #a57825 80%, #e0c878 100%);
    background-size: 200% 200%;
    color: #1a0f06;
    font-family: system-ui, -apple-system, sans-serif; font-size: .75rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    padding: .92rem 2.4rem; border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 6px 28px rgba(201,168,76,.18), 0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .35s, filter .35s;
    animation: hmBtnShimmer 5s ease infinite;
}
@keyframes hmBtnShimmer {
    0%,100% { background-position: 0% 50%; }
    50%     { background-position: 100% 50%; }
}
.hm-btn-primary::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.13) 0%, transparent 45%);
    pointer-events: none; border-radius: 8px;
}
.hm-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 36px rgba(201,168,76,.28), 0 3px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
    filter: brightness(1.1);
}
.hm-btn-primary:active { transform: translateY(0); }
.hm-btn-primary svg { width: 17px; height: 17px; flex-shrink: 0; }

.hm-btn-ghost {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .9rem 1.9rem; border-radius: 8px;
    border: 1px solid rgba(201,168,76,.16);
    color: rgba(201,168,76,.68);
    font-family: system-ui, -apple-system, sans-serif; font-size: .73rem; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    text-decoration: none;
    transition: border-color .35s, color .35s, background .35s, transform .25s, box-shadow .35s;
    background: rgba(201,168,76,.022);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.hm-btn-ghost:hover {
    border-color: rgba(201,168,76,.48);
    color: #dbc070;
    background: rgba(201,168,76,.07);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(201,168,76,.12);
}
.hm-btn-ghost:active { transform: translateY(0); }
.hm-btn-ghost svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Badge strip ────────────────────────────────────────────── */
.hm-hero-badges {
    display: flex; gap: 1.5rem; justify-content: center; margin-top: 2.2rem;
    flex-wrap: wrap;
    animation: hmFadeUp 1s .58s cubic-bezier(.22,1,.36,1) both;
}
.hm-hero-badge {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem 1.1rem;
    border: 1px solid rgba(201,168,76,.09);
    border-radius: 50px;
    background: rgba(201,168,76,.018);
    transition: border-color .35s, background .35s, transform .3s, box-shadow .35s;
}
.hm-hero-badge:hover {
    border-color: rgba(201,168,76,.32);
    background: rgba(201,168,76,.055);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(201,168,76,.07);
}
.hm-hero-badge svg {
    width: 19px; height: 19px; flex-shrink: 0;
    color: rgba(201,168,76,.82);
    transition: color .35s;
}
.hm-hero-badge:hover svg { color: #d4b65c; }
.hm-hero-badge span {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: .7rem; color: rgba(232,205,128,.72); letter-spacing: .07em;
    transition: color .35s; white-space: nowrap;
}
.hm-hero-badge:hover span { color: rgba(232,205,128,.85); }

/* ── Scroll hint ────────────────────────────────────────────── */
.hm-scroll-hint {
    position: absolute; bottom: 2.8rem; left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: .55rem;
    color: rgba(232,205,128,.75);
    animation: hmFadeUp 1.1s .8s cubic-bezier(.22,1,.36,1) both;
    z-index: 4;
}
.hm-scroll-hint span {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: .56rem; letter-spacing: .28em; text-transform: uppercase;
}
.hm-scroll-arrow {
    width: 18px; height: 18px;
    animation: hmScrollBounce 2.4s ease-in-out infinite;
}
@keyframes hmScrollBounce {
    0%,100% { transform: translateY(0); opacity: .22; }
    50%     { transform: translateY(7px); opacity: .75; }
}

/* ── Hero visual (right column emblem) ──────────────────────── */
.hm-hero-visual {
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 2;
}
.hm-hero-visual svg {
    max-width: 540px; width: 100%; height: auto;
}
/* Mobile: Emblem deutlich kleiner, sonst >1 Viewport-Höhe mit Inhalt */
@media(max-width: 640px){
    .hm-hero-visual svg { max-width: 360px; }
    .hm-hero-visual { margin-top: .5rem; }
}
@media(max-width: 360px){
    .hm-hero-visual svg { max-width: 280px; }
}

/* ── Gold dust particle canvas ─────────────────────────────── */
.hm-hero-particles {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    width: 100%; height: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   § 2  STATS BAR
   ═══════════════════════════════════════════════════════════════ */
.hm-stats {
    background: #080604;
    border-top: 1px solid rgba(201,168,76,.07);
    border-bottom: 1px solid rgba(201,168,76,.07);
    padding: 0;
}

.hm-stats-inner {
    max-width: 900px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 0;
}
@media(min-width: 640px) {
    .hm-stats-inner { grid-template-columns: repeat(4, 1fr); }
}

.hm-stat-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem 1rem;
    border-right: 1px solid rgba(201,168,76,.06);
    text-align: center;
}
.hm-stat-item:last-child { border-right: none; }
@media(max-width: 639px) {
    .hm-stat-item:nth-child(2) { border-right: none; }
    .hm-stat-item:nth-child(3) { border-right: 1px solid rgba(201,168,76,.06); }
    .hm-stat-item:nth-child(1),
    .hm-stat-item:nth-child(2) {
        border-bottom: 1px solid rgba(201,168,76,.06);
    }
}

.hm-stat-num {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.6rem; font-weight: 300; line-height: 1;
    color: var(--gold); letter-spacing: .06em;
    margin-bottom: .35rem;
}
.hm-stat-label {
    font-family: system-ui, sans-serif;
    font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
    color: #8a8170;
}

/* ═══════════════════════════════════════════════════════════════
   § 3  FEATURES
   ═══════════════════════════════════════════════════════════════ */
.hm-features {
    background: var(--dark-mid);
    padding: 6rem 1.5rem;
}

.hm-feature-grid {
    max-width: 900px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr;
    gap: 1.2rem;
}
@media(min-width: 640px)  { .hm-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width: 1024px) { .hm-feature-grid { grid-template-columns: repeat(4, 1fr); } }

.hm-feature-card {
    padding: 1.6rem 1.4rem;
    border: 1px solid rgba(201,168,76,.08);
    border-top: 2px solid rgba(201,168,76,.2);
    border-radius: 0 0 8px 8px;
    background: rgba(201,168,76,.015);
    transition: border-color .25s, background .25s, transform .25s;
}
.hm-feature-card:hover {
    border-color: rgba(201,168,76,.2);
    border-top-color: rgba(201,168,76,.78);
    background: rgba(201,168,76,.04);
    transform: translateY(-3px);
}

.hm-feature-icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(201,168,76,.15);
    border-radius: 8px;
    background: rgba(201,168,76,.04);
    color: var(--gold);
    margin-bottom: 1.1rem;
    transition: background .25s, border-color .25s;
}
.hm-feature-card:hover .hm-feature-icon {
    background: rgba(201,168,76,.09);
    border-color: rgba(201,168,76,.35);
}
.hm-feature-icon svg { width: 20px; height: 20px; }

.hm-feature-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.15rem; font-weight: 500;
    color: #d4c9b0; letter-spacing: .04em;
    margin-bottom: .45rem;
}
.hm-feature-desc {
    font-family: system-ui, sans-serif;
    font-size: .7rem; color: #8a8170;
    line-height: 1.7; letter-spacing: .02em;
}

/* ═══════════════════════════════════════════════════════════════
   § 4  FACTIONS
   ═══════════════════════════════════════════════════════════════ */
.hm-factions {
    background: #090704;
    padding: 6rem 1.5rem;
    border-top: 1px solid rgba(201,168,76,.06);
    border-bottom: 1px solid rgba(201,168,76,.06);
}

.hm-faction-grid {
    max-width: 900px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media(min-width: 768px) { .hm-faction-grid { grid-template-columns: repeat(3, 1fr); } }

.hm-faction-card {
    position: relative;
    padding: 2rem 1.6rem 1.8rem;
    border: 1px solid rgba(201,168,76,.09);
    border-radius: 8px;
    background: rgba(201,168,76,.02);
    overflow: hidden;
    transition: border-color .3s, background .3s, transform .3s;
    display: flex; flex-direction: column;
}
.hm-faction-card:hover {
    border-color: rgba(201,168,76,.28);
    background: rgba(201,168,76,.05);
    transform: translateY(-4px);
}

/* Roman number watermark in faction card */
.hm-faction-num {
    position: absolute; top: -.5rem; right: .8rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 5rem; font-weight: 300;
    color: transparent;
    -webkit-text-stroke: 1px rgba(201,168,76,.05);
    user-select: none; pointer-events: none;
    line-height: 1;
}

.hm-faction-icon-wrap {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(201,168,76,.16);
    border-radius: 12px;
    background: rgba(201,168,76,.04);
    color: rgba(201,168,76,.7);
    margin-bottom: 1.2rem;
    transition: background .25s, border-color .25s, color .25s;
}
.hm-faction-card:hover .hm-faction-icon-wrap {
    background: rgba(201,168,76,.09);
    border-color: rgba(201,168,76,.4);
    color: var(--gold);
}
.hm-faction-icon-wrap svg { width: 26px; height: 26px; }

.hm-faction-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem; font-weight: 400; letter-spacing: .06em;
    color: #ede3ce; margin-bottom: .3rem;
}

.hm-faction-bonus {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: system-ui, sans-serif;
    font-size: .57rem; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(201,168,76,.7);
    background: rgba(201,168,76,.08);
    border: 1px solid rgba(201,168,76,.15);
    border-radius: 20px;
    padding: .2rem .6rem;
    margin-bottom: 1rem;
}
.hm-faction-bonus svg { width: 10px; height: 10px; }

.hm-faction-desc {
    font-family: system-ui, sans-serif;
    font-size: .7rem; color: #8a8170;
    line-height: 1.75; letter-spacing: .015em;
    flex: 1; margin-bottom: 1.4rem;
}

.hm-faction-tag {
    display: flex; align-items: center; gap: .4rem;
    font-family: system-ui, sans-serif;
    font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(232,205,128,.6);
    border-top: 1px solid rgba(201,168,76,.08);
    padding-top: 1rem;
}
.hm-faction-tag svg { width: 11px; height: 11px; }

/* Faction section CTA */
.hm-factions-cta {
    max-width: 900px; margin: 2.5rem auto 0;
    text-align: center;
}
.hm-factions-cta p {
    font-family: system-ui, sans-serif;
    font-size: .68rem; color: #8a8170; letter-spacing: .06em; margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   § 5  HOW TO PLAY
   ═══════════════════════════════════════════════════════════════ */
.hm-steps {
    background: var(--dark-mid);
    padding: 6rem 1.5rem;
}

.hm-steps-grid {
    max-width: 900px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr;
    gap: 1.2rem;
    position: relative;
}
@media(min-width: 768px) {
    .hm-steps-grid { grid-template-columns: repeat(4, 1fr); }
    /* Connecting line between steps */
    .hm-steps-grid::before {
        content: '';
        position: absolute;
        top: 2.5rem; left: calc(12.5% + 26px); right: calc(12.5% + 26px);
        height: 1px;
        background: linear-gradient(to right,
            transparent 0%,
            rgba(201,168,76,.15) 15%,
            rgba(201,168,76,.15) 85%,
            transparent 100%
        );
        z-index: 0;
    }
}

.hm-step {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 0 .5rem;
    position: relative; z-index: 1;
}

.hm-step-num-wrap {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(201,168,76,.2);
    border-radius: 50%;
    background: #090704;
    margin-bottom: 1.1rem;
    position: relative;
}
/* Roman numeral label inside step */
.hm-step-num {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem; font-weight: 500;
    color: var(--gold); letter-spacing: .04em;
}

.hm-step-icon {
    position: absolute;
    bottom: -1px; right: -1px;
    width: 18px; height: 18px;
    background: #090704;
    border: 1px solid rgba(201,168,76,.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(201,168,76,.6);
}
.hm-step-icon svg { width: 9px; height: 9px; }

.hm-step-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem; font-weight: 500; letter-spacing: .04em;
    color: #c8bfa8; margin-bottom: .4rem;
}
.hm-step-desc {
    font-family: system-ui, sans-serif;
    font-size: .67rem; color: #8a8170; line-height: 1.65; letter-spacing: .02em;
}

/* ═══════════════════════════════════════════════════════════════
   § 6  FINAL CTA
   ═══════════════════════════════════════════════════════════════ */
.hm-cta {
    background: #070504;
    padding: 7rem 1.5rem;
    text-align: center;
    border-top: 1px solid rgba(201,168,76,.06);
    position: relative; overflow: hidden;
}

.hm-cta-glow {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 700px; height: 400px;
    background: radial-gradient(ellipse, rgba(201,168,76,.06) 0%, transparent 65%);
    pointer-events: none;
}

.hm-cta-content { position: relative; z-index: 1; }

.hm-cta-kicker {
    display: flex; align-items: center; justify-content: center; gap: .7rem;
    font-family: system-ui, sans-serif;
    font-size: .57rem; letter-spacing: .28em; text-transform: uppercase;
    color: rgba(232,205,128,.66); margin-bottom: 1.4rem;
}
.hm-cta-kicker-line { width: 30px; height: 1px; background: rgba(201,168,76,.25); }

.hm-cta-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 300; letter-spacing: .1em;
    color: #f0e6d0; line-height: 1.1; margin: 0 0 .6rem;
}
.hm-cta-title em { font-style: italic; color: rgba(240,230,208,.78); }

.hm-cta-sub {
    font-family: system-ui, sans-serif;
    font-size: .72rem; color: #8a8170; letter-spacing: .04em;
    margin-bottom: 2.5rem; max-width: 380px; margin-left: auto; margin-right: auto;
}

.hm-cta-btns {
    display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
}

.hm-cta-note {
    margin-top: 1.4rem;
    font-family: system-ui, sans-serif;
    font-size: .62rem; color: #8a8170; letter-spacing: .06em;
}
.hm-cta-note a { color: #8a8170; text-decoration: none; transition: color .2s; }
.hm-cta-note a:hover { color: rgba(232,205,128,.72); }

/* ── Hero entrance animations ─────────────────────────────────── */
@keyframes hmFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   Enhanced Sections — Premium Enterprise Upgrade
   ═══════════════════════════════════════════════════════════════ */

/* ── Glass-morphism stat cards ──────────────────────────────── */
.hm-stats--enhanced {
    background: linear-gradient(180deg, #0a0804 0%, #0c0905 50%, #0a0804 100%);
    border-top: 1px solid rgba(201,168,76,.08);
    border-bottom: 1px solid rgba(201,168,76,.08);
    padding: 2.5rem 1.5rem;
}
.hm-stat-card {
    display: flex; align-items: center; gap: 1.2rem;
    padding: 1.5rem 1.8rem;
    background: rgba(201,168,76,.015);
    border: 1px solid rgba(201,168,76,.06);
    border-radius: 12px;
    transition: border-color .4s, background .4s, transform .4s, box-shadow .4s;
    position: relative; overflow: hidden;
}
.hm-stat-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 0% 0%, rgba(201,168,76,.04) 0%, transparent 60%);
    opacity: 0; transition: opacity .4s;
}
.hm-stat-card:hover {
    border-color: rgba(201,168,76,.25);
    background: rgba(201,168,76,.04);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(201,168,76,.08);
}
.hm-stat-card:hover::before { opacity: 1; }
/* ── Stats-Grid responsive (ersetzt Inline repeat(4,1fr)) ──────────── */
.hm-stats--enhanced .hm-stats-inner {
    display: grid; grid-template-columns: 1fr; gap: 1.2rem;
}
@media(min-width: 640px){
    .hm-stats--enhanced .hm-stats-inner { grid-template-columns: repeat(2, 1fr); }
}
@media(min-width: 1024px){
    .hm-stats--enhanced .hm-stats-inner { grid-template-columns: repeat(4, 1fr); }
}
.hm-stat-icon {
    width: 48px; height: 48px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(201,168,76,.06);
    border: 1px solid rgba(201,168,76,.12);
    color: rgba(201,168,76,.75);
    transition: all .4s;
}
.hm-stat-card:hover .hm-stat-icon {
    background: rgba(201,168,76,.12);
    border-color: rgba(201,168,76,.35);
    color: var(--gold);
    box-shadow: 0 0 24px rgba(201,168,76,.1);
}
.hm-stat-icon svg { width: 24px; height: 24px; }
.hm-stat-body { min-width: 0; }
.hm-stat-value {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.2rem; font-weight: 300; line-height: 1;
    color: #f0e6d0; letter-spacing: .04em;
}
.hm-stat-value-sm { font-size: 1.6rem; }
.hm-stat-label-sm {
    font-family: system-ui, sans-serif;
    font-size: .55rem; letter-spacing: .16em; text-transform: uppercase;
    color: #8a8170; margin-top: .2rem;
}

/* ── Animated feature cards ─────────────────────────────────── */
.hm-features--enhanced {
    background: linear-gradient(180deg, #090703 0%, #0b0905 100%);
    padding: 6rem 1.5rem;
}
.hm-feat-card {
    position: relative; overflow: hidden;
    padding: 2rem 1.6rem;
    background: rgba(15,12,6,.7);
    border: 1px solid rgba(201,168,76,.07);
    border-radius: 14px;
    transition: all .45s cubic-bezier(.22,1,.36,1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hm-feat-card::after {
    content: ''; position: absolute; top: -1px; left: 20%; right: 20%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,.2), transparent);
    transition: all .45s;
}
.hm-feat-card:hover {
    border-color: rgba(201,168,76,.22);
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(201,168,76,.08);
    background: rgba(20,16,8,.8);
}
.hm-feat-card:hover::after {
    left: 5%; right: 5%;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,.4), transparent);
}
.hm-feat-icon-wrap {
    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
    border-radius: 14px; margin-bottom: 1.4rem;
    background: rgba(201,168,76,.05);
    border: 1px solid rgba(201,168,76,.12);
    color: rgba(201,168,76,.7);
    transition: all .4s;
    position: relative; z-index: 1;
}
.hm-feat-card:hover .hm-feat-icon-wrap {
    background: rgba(201,168,76,.1);
    border-color: rgba(201,168,76,.35);
    color: var(--gold);
    box-shadow: 0 0 28px rgba(201,168,76,.1);
}
.hm-feat-icon-wrap svg { width: 28px; height: 28px; }
.hm-feat-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.25rem; font-weight: 500; letter-spacing: .05em;
    color: #e8dcc8; margin-bottom: .5rem;
}
.hm-feat-desc {
    font-family: system-ui, sans-serif;
    font-size: .7rem; color: #8a8170; line-height: 1.7; letter-spacing: .02em;
}

/* ── Faction emblem cards ───────────────────────────────────── */
.hm-factions--enhanced {
    background: #080603;
    padding: 6rem 1.5rem;
    border-top: 1px solid rgba(201,168,76,.05);
    border-bottom: 1px solid rgba(201,168,76,.05);
    position: relative;
}
.hm-faction-emblem {
    position: relative;
    padding: 2.5rem 2rem 2rem;
    background: rgba(12,9,5,.8);
    border: 1px solid rgba(201,168,76,.08);
    border-radius: 16px;
    transition: all .5s cubic-bezier(.22,1,.36,1);
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.hm-faction-emblem::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,.15) 50%, transparent 100%);
    opacity: 0; transition: opacity .5s;
}
.hm-faction-emblem:hover {
    border-color: rgba(201,168,76,.28);
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(201,168,76,.06);
    background: rgba(16,12,6,.9);
}
.hm-faction-emblem:hover::before { opacity: 1; }
.hm-faction-crest {
    width: 80px; height: 80px; margin: 0 auto 1.4rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,168,76,.08) 0%, transparent 70%);
    border: 1px solid rgba(201,168,76,.12);
    color: rgba(201,168,76,.78);
    transition: all .5s;
}
.hm-faction-emblem:hover .hm-faction-crest {
    color: var(--gold);
    border-color: rgba(201,168,76,.4);
    box-shadow: 0 0 36px rgba(201,168,76,.12), inset 0 0 24px rgba(201,168,76,.04);
    transform: scale(1.05);
}
.hm-faction-crest svg { width: 42px; height: 42px; }

/* ── Steps with animated connector ──────────────────────────── */
.hm-steps--enhanced {
    background: #0a0804;
    padding: 6rem 1.5rem;
}
.hm-step-node {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    position: relative; z-index: 2;
}
.hm-step-badge {
    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; margin-bottom: 1.2rem;
    background: radial-gradient(circle at 40% 40%, rgba(201,168,76,.12) 0%, rgba(10,8,4,.9) 70%);
    border: 1px solid rgba(201,168,76,.2);
    color: var(--gold);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem; font-weight: 500;
    transition: all .4s;
    position: relative;
}
.hm-step-node:hover .hm-step-badge {
    border-color: rgba(201,168,76,.5);
    box-shadow: 0 0 24px rgba(201,168,76,.14);
    transform: scale(1.08);
}
.hm-step-dot {
    position: absolute; bottom: -2px; right: -2px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #0a0804; border: 1px solid rgba(201,168,76,.3);
    display: flex; align-items: center; justify-content: center;
}
.hm-step-dot::after {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--gold); opacity: .7;
}

/* ── Animated CTA background ────────────────────────────────── */
.hm-cta--enhanced {
    background: #060402;
    padding: 7rem 1.5rem; text-align: center;
    border-top: 1px solid rgba(201,168,76,.06);
    position: relative; overflow: hidden;
}
@keyframes hmCtaPulse {
    0%,100% { opacity: .04; transform: scale(1); }
    50%     { opacity: .09; transform: scale(1.06); }
}

/* ── Section separator ornament ─────────────────────────────── */
.hm-sep {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: 2rem 0;
}
.hm-sep-line {
    width: 60px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,.18), transparent);
}
.hm-sep-symbol {
    color: rgba(201,168,76,.4); font-size: .7rem; letter-spacing: .3em;
    font-family: system-ui, sans-serif;
}

/* ── Subtle floating animation for icons ────────────────────── */
@keyframes hmIconFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-3px); }
}
.hm-float { animation: hmIconFloat 4s ease-in-out infinite; }

/* ── Interactive World Map Background ───────────────────────────
   Imperiale Kriegskarte. Die Ebenen tragen data-map-depth; hero-home.js
   verschiebt sie als Tiefenstaffelung zum Zeiger. Alle Dauerläufe sind
   reine CSS-Animationen (transform/opacity/stroke) — reduced-motion und
   Telefone frieren sie in einem ruhigen Standbild ein. */
.hm-map-bg {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
    opacity: 1;
    transition: opacity .5s ease;
}
.hm-map-bg svg {
    width: 120%; height: 120%;
    position: absolute;
    top: -10%; left: -10%;
    transition: transform .35s ease-out;
}

/* Handelsrouten: fließende Dashes auf den Grundlinien */
.hm-map-route-flow {
    stroke-dasharray: 5 16;
    animation: hmMapFlow 5.5s linear infinite;
}
@keyframes hmMapFlow { to { stroke-dashoffset: -42; } }

/* Flüsse: langsamer, feiner Lauf */
.hm-map-river {
    stroke-dasharray: 3 6;
    animation: hmMapRiver 10s linear infinite;
}
@keyframes hmMapRiver { to { stroke-dashoffset: -72; } }

/* Siedlungen: Wappenraute, Kern und Ping-Ringe */
.hm-map-node-halo { fill: url(#mapNodeGrad); opacity: .55; }
.hm-map-node-mark { fill: rgba(232,213,163,.34); stroke: rgba(201,168,76,.5); stroke-width: .5; }
.hm-map-node-mark-inner { fill: rgba(255,248,231,.8); }
.hm-map-node-core { fill: #fff8e7; opacity: .8; }
.hm-map-node--capital .hm-map-node-mark { fill: rgba(255,248,231,.55); }
.hm-map-ping {
    fill: none;
    stroke: rgba(201,168,76,.45);
    stroke-width: .5;
    transform-box: fill-box;
    transform-origin: center;
    opacity: .12;
    animation: hmMapPing 5s ease-out infinite;
    animation-delay: var(--d, 0s);
}
.hm-map-ping-d2 {
    stroke: rgba(232,213,163,.38);
    animation-delay: calc(var(--d, 0s) + 2.5s);
}
@keyframes hmMapPing {
    0%   { transform: scale(.35); opacity: 0; }
    14%  { opacity: .24; }
    70%  { transform: scale(1.5); opacity: .06; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* Radarstrahl: ein Lichtbogen wandert langsam über die Karte */
.hm-map-sweep {
    transform-box: view-box;
    transform-origin: 300px 225px;
    animation: hmMapSweep 30s linear infinite;
}
@keyframes hmMapSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Sternfeld: ruhiges Funkeln mit gestaffelten Verzögerungen */
.hm-map-star {
    opacity: .12;
    animation: hmMapTwinkle 6.5s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
@keyframes hmMapTwinkle { 0%,100% { opacity: .06; } 50% { opacity: .28; } }

/* Floating cloud overlay (subtle drift) */
@keyframes hmCloudDrift {
    0%   { transform: translateX(-5%); }
    100% { transform: translateX(5%); }
}

/* ═══════════════════════════════════════════════════════════════
   § 7  CHANGELOG — Featured Updates
   ═══════════════════════════════════════════════════════════════ */
.hm-changelog {
    background: #080603;
    padding: 6rem 1.5rem;
    border-top: 1px solid rgba(201,168,76,.05);
    position: relative;
}
.hm-cl-inner { max-width: 800px; margin: 0 auto; }

.hm-cl-timeline {
    position: relative;
    padding-left: 2.5rem;
}
/* Vertical gold line */
.hm-cl-timeline::before {
    content: '';
    position: absolute; left: 11px; top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(201,168,76,.25) 8%,
        rgba(201,168,76,.18) 50%,
        rgba(201,168,76,.25) 92%,
        transparent 100%
    );
}

.hm-cl-entry {
    position: relative;
    margin-bottom: 2.8rem;
    padding: 1.4rem 1.6rem;
    background: rgba(201,168,76,.012);
    border: 1px solid rgba(201,168,76,.06);
    border-radius: 10px;
    transition: border-color .35s, background .35s, transform .35s, box-shadow .35s;
}
.hm-cl-entry:last-child { margin-bottom: 0; }
.hm-cl-entry:hover {
    border-color: rgba(201,168,76,.18);
    background: rgba(201,168,76,.03);
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
}

/* Timeline dot on the vertical line */
.hm-cl-dot {
    position: absolute;
    left: -2.5rem; top: 1.6rem;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(201,168,76,.3);
    border: 2px solid rgba(201,168,76,.15);
    transition: all .35s;
    transform: translateX(-4.5px);
}
.hm-cl-entry:hover .hm-cl-dot {
    background: rgba(201,168,76,.55);
    border-color: rgba(201,168,76,.35);
    box-shadow: 0 0 12px rgba(201,168,76,.2);
}
/* Latest entry gets highlighted dot */
.hm-cl-entry:first-child .hm-cl-dot {
    background: rgba(201,168,76,.6);
    border-color: rgba(201,168,76,.4);
    box-shadow: 0 0 14px rgba(201,168,76,.18);
    animation: hmDotPulse 2.5s ease-in-out infinite;
}
@keyframes hmDotPulse {
    0%,100% { box-shadow: 0 0 8px rgba(201,168,76,.12); }
    50%     { box-shadow: 0 0 20px rgba(201,168,76,.28); }
}

.hm-cl-header {
    display: flex; align-items: center; gap: .8rem;
    flex-wrap: wrap;
    margin-bottom: .55rem;
}
.hm-cl-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .18rem .5rem;
    border-radius: 3px;
    font-family: system-ui, sans-serif;
    font-size: .52rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    line-height: 1.4;
}
.hm-cl-badge--new {
    background: rgba(80,180,120,.12);
    color: #6ac88a;
    border: 1px solid rgba(80,180,120,.18);
}
.hm-cl-badge--improved {
    background: rgba(201,168,76,.1);
    color: rgba(232,205,128,.8);
    border: 1px solid rgba(201,168,76,.16);
}
.hm-cl-badge--fixed {
    background: rgba(160,180,200,.1);
    color: #90a8c4;
    border: 1px solid rgba(160,180,200,.16);
}
.hm-cl-badge svg { width: 9px; height: 9px; }

.hm-cl-date {
    font-family: system-ui, sans-serif;
    font-size: .58rem; color: #8a8170;
    letter-spacing: .08em;
}

.hm-cl-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.15rem; font-weight: 500;
    color: #e0d6c0; letter-spacing: .04em;
    margin-bottom: .35rem;
}
.hm-cl-desc {
    font-family: system-ui, sans-serif;
    font-size: .7rem; color: #8a8170;
    line-height: 1.65; letter-spacing: .02em;
}

/* Version tag in the corner */
.hm-cl-version {
    position: absolute; top: .8rem; right: 1rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: .85rem; color: rgba(201,168,76,.3);
    letter-spacing: .06em;
}

/* Archive link */
.hm-cl-archive {
    text-align: center; margin-top: 2.4rem;
}
.hm-cl-archive a {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: system-ui, sans-serif;
    font-size: .68rem; color: rgba(232,205,128,.75);
    letter-spacing: .08em; text-decoration: none;
    transition: color .3s;
}
.hm-cl-archive a:hover { color: rgba(232,205,128,.85); }
.hm-cl-archive a svg { width: 13px; height: 13px; }

/* ═══════════════════════════════════════════════════════════════
   § 4b  FACTION COMPARISON TABLE
   ═══════════════════════════════════════════════════════════════ */
.hm-compare {
    background: #090704;
    padding: 6rem 1.5rem;
    border-top: 1px solid rgba(201,168,76,.04);
}
.hm-comp-inner { max-width: 900px; margin: 0 auto; }

.hm-comp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: system-ui, sans-serif;
}

/* Headers */
.hm-comp-table thead th {
    padding: 1.2rem 1rem .8rem;
    text-align: center;
    border-bottom: 1px solid rgba(201,168,76,.12);
    position: relative;
}
.hm-comp-table thead th:first-child {
    text-align: left;
    padding-left: 1.4rem;
    color: #8a8170;
    font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
    font-weight: 400;
}

.hm-comp-faction-header {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.hm-comp-faction-icon {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,168,76,.08) 0%, transparent 70%);
    border: 1px solid rgba(201,168,76,.14);
    color: rgba(201,168,76,.6);
    transition: all .4s;
}
.hm-comp-faction-header:hover .hm-comp-faction-icon {
    color: var(--gold);
    border-color: rgba(201,168,76,.4);
    box-shadow: 0 0 20px rgba(201,168,76,.1);
    transform: scale(1.1);
}
.hm-comp-faction-icon svg { width: 22px; height: 22px; }
.hm-comp-faction-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem; font-weight: 500;
    color: #d4c9b0; letter-spacing: .05em;
}

/* Rows */
.hm-comp-table tbody td {
    padding: .9rem 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(201,168,76,.04);
    color: #a09888;
    font-size: .66rem; letter-spacing: .03em;
    transition: background .3s;
}
.hm-comp-table tbody td:first-child {
    text-align: left;
    padding-left: 1.4rem;
    font-weight: 500;
    color: #c8bfa8;
    font-size: .7rem; letter-spacing: .04em;
    white-space: nowrap;
}

/* Row hover highlight */
.hm-comp-table tbody tr {
    transition: background .3s;
}
.hm-comp-table tbody tr:hover {
    background: rgba(201,168,76,.025);
}
.hm-comp-table tbody tr:hover td:first-child {
    color: #e0d6c0;
}

/* Stat bar cell */
.hm-comp-bar-cell {
    position: relative;
}
.hm-comp-bar {
    display: inline-block;
    height: 6px;
    border-radius: 3px;
    min-width: 8px;
    transition: width 1.2s cubic-bezier(.22,1,.36,1), background .4s;
    position: relative;
}
/* Bar colors by stat */
.hm-comp-bar--gold  { background: linear-gradient(90deg, rgba(201,168,76,.5), rgba(201,168,76,.25)); }
.hm-comp-bar--best { background: linear-gradient(90deg, rgba(201,168,76,.7), rgba(201,168,76,.35)); }
.hm-comp-bar--good { background: linear-gradient(90deg, rgba(201,168,76,.45), rgba(201,168,76,.2)); }
.hm-comp-bar--avg  { background: linear-gradient(90deg, rgba(201,168,76,.3), rgba(201,168,76,.12)); }

/* Best-value highlight */
.hm-comp-best {
    color: #d4b65c !important;
    font-weight: 600 !important;
}
.hm-comp-best .hm-comp-bar { box-shadow: 0 0 8px rgba(201,168,76,.18); }

/* Animated bar fill on scroll */
.hm-comp-bar { width: 0 !important; }
.hm-comp-bar.hm-bar-animate {
    width: var(--bar-w) !important;
}

/* Section separator */
.hm-comp-highlight {
    border-bottom: 1px solid rgba(201,168,76,.08) !important;
}
.hm-comp-highlight td { padding-bottom: 1.2rem !important; }

/* Mobile: horizontal scroll */
@media(max-width: 639px) {
    .hm-comp-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .hm-comp-table { min-width: 500px; }
}

/* ═══════════════════════════════════════════════════════════════
   § 4c  UNIT COMPARISON
   ═══════════════════════════════════════════════════════════════ */
.hm-units {
    background: #0a0804;
    padding: 6rem 1.5rem;
    border-top: 1px solid rgba(201,168,76,.04);
}
.hm-units-inner { max-width: 1000px; margin: 0 auto; }

/* Unit card grid */
.hm-unit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media(min-width: 640px)  { .hm-unit-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width: 1024px) { .hm-unit-grid { grid-template-columns: repeat(3, 1fr); } }

/* Individual unit card */
.hm-unit-card {
    position: relative;
    padding: 1.4rem 1.3rem;
    background: rgba(15,12,6,.6);
    border: 1px solid rgba(201,168,76,.07);
    border-radius: 12px;
    transition: all .4s cubic-bezier(.22,1,.36,1);
    overflow: hidden;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.hm-unit-card::after {
    content: '';
    position: absolute; bottom: 0; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,.12), transparent);
    transition: all .4s;
}
.hm-unit-card:hover {
    border-color: rgba(201,168,76,.22);
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(201,168,76,.06);
    background: rgba(18,14,8,.75);
}
.hm-unit-card:hover::after {
    left: 5%; right: 5%;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,.25), transparent);
}

/* Unit card header */
.hm-unit-head {
    display: flex; align-items: center; gap: .8rem;
    margin-bottom: 1rem;
}
/* Emblem-Kaestchen. Seit die Embleme aus inc/UnitIcons.php kommen, steckt in
   jedem ein gezeichneter Gegenstand statt zweier Konturlinien — 40/20 px war
   dafuer zu eng (Scutum, Rundschild und Auge verloren ihre Binnenzeichnung).
   44/24 px zieht die Kaestchen mit den Wiki-Karten gleich; die Kopfzeile
   waechst dadurch um 4 px, das Kartenraster bleibt unberuehrt.
   --cc faerbt die Akzentebene (.ic-a) der Embleme. Bewusst Gold und NICHT
   fraktionsbunt wie im Wiki: diese Seite kennt keine Fraktionsfarben, die
   Tags daneben sind durchgehend gold. Der Wert liegt eine Spur ueber der
   ruhenden Silhouette, damit der Akzent traegt, ohne herauszufallen. */
.hm-unit-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(201,168,76,.06);
    border: 1px solid rgba(201,168,76,.14);
    color: rgba(201,168,76,.82);
    --cc: rgba(232,205,128,.9);
    transition: all .4s;
}
.hm-unit-card:hover .hm-unit-icon {
    background: rgba(201,168,76,.1);
    border-color: rgba(201,168,76,.35);
    color: var(--gold);
    --cc: #e8cd80;
    box-shadow: 0 0 16px rgba(201,168,76,.08);
}
.hm-unit-icon svg { width: 24px; height: 24px; }

.hm-unit-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.15rem; font-weight: 500;
    color: #d4c9b0; letter-spacing: .05em;
}
.hm-unit-faction-tag {
    display: inline-block;
    font-family: system-ui, sans-serif;
    font-size: .5rem; letter-spacing: .12em; text-transform: uppercase;
    padding: .1rem .45rem; border-radius: 3px;
    color: rgba(232,205,128,.7);
    background: rgba(201,168,76,.08);
    border: 1px solid rgba(201,168,76,.12);
    margin-top: .25rem;
}

/* Stat rows */
.hm-unit-stats {
    display: flex; flex-direction: column; gap: .5rem;
}
.hm-unit-stat {
    display: flex; align-items: center; gap: .6rem;
}
.hm-unit-stat-label {
    width: 72px; flex-shrink: 0;
    font-family: system-ui, sans-serif;
    font-size: .56rem; letter-spacing: .08em; text-transform: uppercase;
    color: #8a8170;
    display: flex; align-items: center; gap: .3rem;
}
.hm-unit-stat-label svg { width: 10px; height: 10px; }
.hm-unit-stat-bar-wrap {
    flex: 1; height: 5px;
    background: rgba(255,255,255,.03);
    border-radius: 3px; overflow: hidden;
}
.hm-unit-stat-bar {
    height: 100%; border-radius: 3px;
    width: 0;
    transition: width 1.2s cubic-bezier(.22,1,.36,1);
}
.hm-unit-stat-bar--high { background: linear-gradient(90deg, rgba(201,168,76,.6), rgba(201,168,76,.3)); }
.hm-unit-stat-bar--mid  { background: linear-gradient(90deg, rgba(201,168,76,.4), rgba(201,168,76,.18)); }
.hm-unit-stat-bar--low  { background: linear-gradient(90deg, rgba(201,168,76,.25), rgba(201,168,76,.08)); }

.hm-unit-cost {
    display: flex; gap: .6rem; flex-wrap: wrap;
    margin-top: .8rem; padding-top: .7rem;
    border-top: 1px solid rgba(201,168,76,.06);
}
.hm-unit-cost-item {
    display: flex; align-items: center; gap: .2rem;
    font-family: system-ui, sans-serif;
    font-size: .52rem; color: #8a8170; letter-spacing: .04em;
}
.hm-unit-cost-item svg { width: 10px; height: 10px; }

/* Animate bars on scroll */
.hm-unit-stat-bar.hm-bar-animate {
    width: var(--uw) !important;
}

/* Support units row */
.hm-unit-support-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.8rem;
}
@media(min-width: 640px) { .hm-unit-support-grid { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════════════════════════════════════════════════════════
   § 9  TELEFONE

   Die Seite ist mobile-first aufgebaut (fast nur min-width-Abfragen),
   das Grundlayout stimmt also. Was nicht stimmte, sind die Grössen:
   Sie stammen aus dem Desktop-Entwurf und wurden nach unten nie
   nachgezogen.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero-Höhe: kleine statt grosse Viewporthöhe ────────────────
   `100vh` meint auf Telefonen die Höhe MIT eingeklappter Adressleiste.
   Solange sie ausgeklappt ist — also beim Laden — ragt der Hero unten
   heraus und schiebt die Handlungsaufforderung aus dem Bild; beim
   Scrollen springt das Layout dann. `100svh` ist genau dafür da (die
   garantiert sichtbare Höhe). Die vh-Zeile bleibt als Rückfall für
   Browser ohne svh stehen — CSS nimmt die letzte gültige Deklaration. */
.hm-hero { min-height: calc(100svh - var(--nav-h, 3rem)); }

@media(max-width: 640px) {

    /* ── Hero ───────────────────────────────────────────────────
       `clamp(4.2rem, 12vw, 9.5rem)` sieht fluid aus, ist es unten aber
       nicht: Bei 360px Breite liefert 12vw nur 43px, es greift also das
       Minimum von 4.2rem = 67px. „ALEMAN" sind sechs Grossbuchstaben,
       dazu 0.2em Sperrung — das ergibt rund 346px Textbreite bei etwa
       312px Platz. Der Hero steht auf `overflow: hidden`, die Seite
       scrollt also nicht seitlich, sondern der Titel wird an beiden
       Rändern beschnitten (er ist zentriert).

       Zwei Stellschrauben: ein kleineres Minimum UND weniger Sperrung.
       Die Sperrung allein macht bei sechs Zeichen 1.2em aus, also gut
       ein Viertel der Zeilenbreite — sie zu halbieren bringt mehr als
       jede Schriftgradänderung und erhält die Anmutung. */
    .hm-hero-title {
        font-size: clamp(2.9rem, 14vw, 5rem);
        letter-spacing: .1em;
    }
    /* Der Claim ist auf schmalen Geräten länger als der Schriftzug; enge
       Sperrung + kleinere Schrift verhindern einen Umbruch mitten im Wort. */
    .hm-hero-title .hm-hero-claim {
        font-size: .62rem;
        letter-spacing: .16em;
        margin-top: .45rem;
    }
    .hm-hero {
        padding: 2.5rem 1.1rem 3.5rem;
        /* Ohne Mindesthöhe: Der Inhalt bestimmt sie. Ein bildschirmfüllender
           Hero kostet auf einem Telefon eine ganze Bildschirmlänge, bevor
           überhaupt etwas vom Spiel zu sehen ist. */
        min-height: auto;
    }
    .hm-hero-eyebrow {
        font-size: .5rem; letter-spacing: .2em;
        gap: .5rem; margin-bottom: 1.4rem;
    }
    .hm-hero-eyebrow-line     { width: 20px; }
    .hm-hero-subtitle-line    { margin: 1.1rem 0 1rem; gap: .7rem; }
    .hm-hero-subtitle-line-seg{ width: 32px; }
    .hm-hero-tagline          { margin-bottom: 2.2rem; line-height: 1.5; }

    /* Nebeneinander bleiben bei 360px kaum 150px je Knopf — untereinander
       und über die volle Breite sind beide sicher zu treffen und die
       Hauptaktion bleibt die optisch stärkere. */
    .hm-hero-ctas { flex-direction: column; gap: .7rem; width: 100%; }
    .hm-hero-ctas .hm-btn-primary,
    .hm-hero-ctas .hm-btn-ghost {
        width: 100%; justify-content: center;
        padding-inline: 1rem;
    }

    /* ── Abschnittsrhythmus ─────────────────────────────────────
       6–7rem oben und unten sind auf einem Telefon 96–112px Leerraum
       je Kante, zwischen zwei Abschnitten also fast eine halbe
       Bildschirmhöhe. Rund die Hälfte trägt den Rhythmus genauso. */
    .hm-features, .hm-factions, .hm-steps, .hm-cta, .hm-units, .hm-compare,
    .hm-stats--enhanced, .hm-features--enhanced, .hm-factions--enhanced,
    .hm-steps--enhanced, .hm-cta--enhanced {
        padding-block: 3.5rem;
        padding-inline: 1.1rem;
    }
    .hm-sh          { margin-bottom: 2rem; }
    .hm-sh-eyebrow  { font-size: .52rem; letter-spacing: .2em; margin-bottom: .7rem; }
    .hm-sh-subtitle { font-size: .74rem; line-height: 1.6; }

    /* Der Abstand steht am Element selbst (inline style), deshalb hier
       mit gleicher Spezifität nachziehen. */
    #hm-units .hm-sh { margin-bottom: 2rem !important; }

    /* ── Kennzahlen ─────────────────────────────────────────────
       2.6rem sind bei zwei Spalten auf 360px zu wuchtig; die Kacheln
       bekommen ausserdem weniger Innenabstand. */
    .hm-stat-item { padding: 1.4rem .6rem; }
    .hm-stat-num  { font-size: 2rem; }
    .hm-stat-label{ font-size: .52rem; letter-spacing: .14em; }

    /* ── Einheitenkarten ────────────────────────────────────────
       Das Label steht auf fester Breite (72px); zusammen mit 1.3rem
       Innenabstand je Seite bleibt bei 360px wenig für den Balken. */
    .hm-unit-card       { padding: 1.1rem 1rem; }
    .hm-unit-stat-label { width: 62px; font-size: .52rem; }
    .hm-unit-stat       { gap: .45rem; }
}

/* ── Sehr schmale Telefone ──────────────────────────────────── */
@media(max-width: 360px) {
    .hm-hero        { padding-inline: .8rem; }
    .hm-hero-title  { letter-spacing: .06em; }
    .hm-features, .hm-factions, .hm-steps, .hm-cta, .hm-units, .hm-compare,
    .hm-stats--enhanced, .hm-features--enhanced, .hm-factions--enhanced,
    .hm-steps--enhanced, .hm-cta--enhanced {
        padding-inline: .8rem;
    }
    .hm-unit-stat-label { width: 56px; }
}

/* ── Fingerbedienung ────────────────────────────────────────────
   Wie in Navi und Dorfseite an `pointer` statt an einer Breite gehängt.
   Die Ankerpunkte der Sprungmarken-Navigation und die Fraktionskarten
   sind Links ohne eigene Höhe. */
@media(pointer: coarse) {
    .hm-btn-primary, .hm-btn-ghost { min-height: 46px; }
    .hm-stat-card, .hm-feat-card, .hm-faction-emblem { min-height: 44px; }
}

/* ── Performance: Mobile – schwere Deko drosseln ────────────────
   Orbs/Grid/Particles sind Desktop-Eye-Candy, auf Telefonen nur
   teure Paints. Bei ≤640px Animationen pausieren, Größen halbieren. */
@media(max-width: 640px){
    .hm-hero-grid { animation: none; }
    .hm-orb { display: none; }
    .hm-hero-glow, .hm-hero-glow-2 { opacity: .5; }
    .hm-map-bg { opacity: .4; }
    /* Karte: Dauerläufe ruhen, die Zeichnung bleibt als Standbild */
    .hm-map-route-flow, .hm-map-river, .hm-map-ping,
    .hm-map-star, .hm-map-sweep { animation: none; }
    .hm-pulse-ring { animation: none; }
}
/* ── Reduced Motion ──────────────────────────────────────────── */
@media(prefers-reduced-motion: reduce){
    .hm-hero-grid, .hm-orb, .hm-orbit, #ring-outer, #ring-inner,
    .hm-halo, .hm-hex-spin, .hm-float, .hm-map-node,
    .hm-gem-pulse, .hm-detail, .hm-sheen,
    .hm-map-route-flow, .hm-map-river, .hm-map-ping, .hm-map-star, .hm-map-sweep,
    .hm-arc-spin, .hm-arc-spin-rev, .hm-gui-spin, .hm-gui-spin-rev,
    .hm-arc-stud, .hm-pulse-ring { animation: none !important; }
    .hm-reveal { transition: none; opacity: 1; transform: none; }
    .hm-hero-particles { display: none; }
    .hm-sheen { display: none; }
    #hex-outer, #hex-inner, #hex-plate-edge,
    #spear-head, #spear-shaft, #spear-collar,
    #spear-butt, #sword, #sword-pommel, #axe, #axe-butt,
    #focal-star, #crown-path, #ribbon-path { opacity: 1; }
    .hm-detail { opacity: 1; }
}

/* Responsive layout: single column on mobile, two columns on desktop */
    @media(min-width:1024px){
        .hm-hero-inner{ grid-template-columns: 1fr 580px; }
        .hm-hero-content{ text-align:left; padding-right:2rem; }
    }
    /* ═══ Imperial Sigil motion ═══ */
    .hm-orbit, #ring-outer, #ring-inner, .hm-halo, .hm-hex-spin, .hm-sheen {
        transform-origin: 400px 400px; transform-box: view-box;
    }
    .hm-halo-1 { animation: hmHaloBreath 9s   ease-in-out infinite; }
    .hm-halo-2 { animation: hmHaloBreath 11s  ease-in-out .8s infinite; }
    .hm-halo-3 { animation: hmHaloBreath 14s  ease-in-out 1.6s infinite; }
    .hm-orbit-1 { animation: hmSigilSpin 46s linear infinite; }
    .hm-orbit-2 { animation: hmSigilSpin 30s linear infinite reverse; }
    .hm-orbit-3 { animation: hmSigilSpin 22s linear infinite; }
    #ring-outer { animation: hmSigilSpin 90s linear infinite; }
    #ring-inner { animation: hmSigilSpin 64s linear infinite reverse; }
    .hm-hex-spin { animation: hmSigilSpin 80s linear infinite; }
    @keyframes hmSigilSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .hm-halo { animation: hmHaloBreath 9s ease-in-out infinite; }
    @keyframes hmHaloBreath {
        0%,100% { opacity: .7; transform: scale(1); }
        50%     { opacity: 1;  transform: scale(1.03); }
    }
    /* Sigil stroke-draw targets start invisible */
    #hex-outer, #hex-inner, #hex-plate-edge,
    #spear-head, #spear-shaft, #spear-collar, #spear-butt,
    #sword, #sword-pommel, #axe, #axe-butt,
    #focal-star, #crown-path, #ribbon-path { opacity: 0; }
    /* Non-drawn detail elements fade in once their draw completes */
    .hm-detail { opacity: 0; animation: hmDetailIn .5s ease forwards; }
    .hm-detail-1 { animation-delay: .9s; }
    .hm-detail-2 { animation-delay: 1.2s; }
    .hm-detail-3 { animation-delay: 1.45s; }
    @keyframes hmDetailIn { from { opacity: 0; } to { opacity: 1; } }
    /* Vertex gems: soft pulse */
    .hm-gem-pulse { animation: hmGemPulse 4s ease-in-out infinite; }
    @keyframes hmGemPulse {
        0%,100% { opacity: .55; }
        50%     { opacity: 1; }
    }
    /* Segmentbögen und Guilloche: gegenläufige Ordnungsringe.
       Die Bögen bilden den äußeren Rahmen, die Guilloche das feine
       Zierband zwischen Platte und Mittelring. */
    .hm-arc-spin, .hm-arc-spin-rev, .hm-gui-spin, .hm-gui-spin-rev {
        transform-origin: 400px 400px; transform-box: view-box;
    }
    .hm-arc-spin     { animation: hmSigilSpin 150s linear infinite; }
    .hm-arc-spin-rev { animation: hmSigilSpin 210s linear infinite reverse; }
    .hm-gui-spin     { animation: hmSigilSpin 120s linear infinite; }
    .hm-gui-spin-rev { animation: hmSigilSpin 90s linear infinite reverse; }
    .hm-arc-stud { animation: hmGemPulse 5s ease-in-out infinite; }
    /* Reichsstern: weicher Puls, der sich im Schild verliert */
    .hm-pulse-ring {
        opacity: 0;
        transform-box: fill-box; transform-origin: center;
        animation: hmPulseRing 4.6s cubic-bezier(.22,1,.36,1) infinite;
    }
    @keyframes hmPulseRing {
        0%   { transform: scale(.45); opacity: 0; }
        10%  { opacity: .5; }
        70%  { transform: scale(2.4); opacity: 0; }
        100% { transform: scale(2.6); opacity: 0; }
    }
    /* Wandernder Glanz: zieht alle 11 s einmal über das Sigil.
       Von links außerhalb bis rechts außerhalb der geclippten Fläche. */
    .hm-sheen { animation: hmSheenSweep 11s ease-in-out 3.4s infinite; opacity: 0; }
    @keyframes hmSheenSweep {
        0%   { transform: translateX(-340px); opacity: 0; }
        8%   { opacity: .9; }
        42%  { transform: translateX(340px);  opacity: .9; }
        50%  { transform: translateX(340px);  opacity: 0; }
        100% { transform: translateX(340px);  opacity: 0; }
    }

@media(min-width:640px){.hm-feature-grid{grid-template-columns:repeat(2,1fr)}}
            @media(min-width:1024px){.hm-feature-grid{grid-template-columns:repeat(4,1fr)}}

@media(min-width:768px){.hm-faction-grid{grid-template-columns:repeat(3,1fr)}}

@media(min-width:768px){.hm-steps-grid{grid-template-columns:repeat(4,1fr)}}
            .hm-steps-grid::before{content:'';position:absolute;top:2.5rem;left:calc(12.5% + 30px);right:calc(12.5% + 30px);height:1px;background:linear-gradient(to right,transparent,rgba(201,168,76,.2),rgba(201,168,76,.2),transparent);z-index:0}