/* =============================================================
   FaiRota – gemeinsames Stylesheet für Startseite, Dienstportal-
   und Rotationsliste-Seite.
   Design-Tokens und Komponenten 1:1 aus den bisherigen Einzelseiten
   zusammengeführt, damit sich alle drei Seiten identisch anfühlen.
   ============================================================= */

:root {
    --ink: #0F172A;
    --ink-soft: #1E2A3F;
    --meadow: #2D6A4F;
    --meadow-light: #3D8264;
    --meadow-pale: #E7F1EB;
    --sage: #5F9783;
    --gold: #E8A33D;
    --gold-dark: #C9852A;
    --gold-pale: #FBF0DD;
    --paper: #F8FAF6;
    --paper-alt: #EFF4EC;
    --slate: #64748B;
    --white: #FFFFFF;
    --border: #E1E8E1;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-family: 'Fraunces', Georgia, serif; }
h1, h2, h3 { text-wrap: balance; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.eyebrow {
    font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
    color: var(--gold-dark); margin-bottom: 14px;
}
.star { color: var(--gold); margin-right: 6px; }
section { padding: 88px 0; }
@media (max-width: 720px) { section { padding: 56px 0; } }

/* ============ NAV ============ */
header.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(248,250,246,0.9); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.nav-inner {
    max-width: 1160px; margin: 0 auto; padding: 12px 24px;
    display: flex; align-items: center; justify-content: flex-start; gap: 32px;
}
.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand-mark { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; }
.brand-word {
    font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
    font-size: 20px; color: var(--ink); letter-spacing: -0.01em;
}
.nav-links { display: flex; align-items: center; gap: 27px; font-size: 14px; font-weight: 600; color: var(--slate); margin-left: auto; }
.nav-links a { white-space: nowrap; }
.nav-links a:hover { color: var(--meadow); }
.nav-links a.active, .nav-mobile-panel a.active { color: var(--ink); }

.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-cta {
    background: var(--meadow); color: white; padding: 9px 18px;
    border-radius: 10px; font-size: 14px; font-weight: 600;
    transition: background 0.15s ease; white-space: nowrap;
    min-width: 178px; text-align: center;
}
.nav-cta:hover { background: var(--meadow-light); }
.nav-cta.gold { background: var(--gold); color: var(--ink); }
.nav-cta.gold:hover { background: var(--gold-dark); }
.nav-mobile-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--ink); }

.nav-mobile-panel { display: none; }
@media (max-width: 900px) {
    .nav-links, .nav-right { display: none; }
    .nav-mobile-toggle { display: block; }
    .nav-inner { justify-content: space-between; }
    .nav-mobile-panel.open {
        display: flex; flex-direction: column; gap: 4px;
        padding: 10px 24px 20px; border-top: 1px solid var(--border); background: var(--paper);
    }
    .nav-mobile-panel a { padding: 12px 4px; border-bottom: 1px solid var(--border); color: var(--slate); font-weight: 600; }
    .nav-mobile-panel .nav-cta { display: block; text-align: center; margin-top: 12px; border-bottom: none; color: white; }
    .nav-mobile-panel .nav-cta.gold { color: var(--ink); }
}

/* ============ BUTTONS ============ */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 24px; border-radius: 12px; font-weight: 600; font-size: 15.5px;
    transition: transform 0.15s ease, background 0.15s ease; cursor: pointer; border: none;
}
.btn-primary { background: var(--meadow); color: white; }
.btn-primary:hover { background: var(--meadow-light); transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-dark); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--border); }
.btn-ghost:hover { border-color: var(--sage); }
.fine-print { font-size: 13px; color: var(--slate); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.cta-row.center { justify-content: center; }

/* ============ CLOSING (Startseite, Abschluss vor dem Footer) ============ */
.closing { text-align: center; padding: 130px 0; }
.closing h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 500; margin-bottom: 12px; }
.closing p { color: var(--slate); font-size: 16px; max-width: 480px; margin: 0 auto 28px; }

/* ============ HERO ============ */
.hero { padding: 72px 0 40px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero h1 {
    font-size: clamp(30px, 4.6vw, 52px); font-weight: 600; line-height: 1.14;
    letter-spacing: -0.01em; margin-bottom: 20px;
}
.hero p.lead { font-size: 18px; color: var(--slate); max-width: 480px; margin-bottom: 30px; }

/* HERO MOCKUP (Grundgerüst, gemeinsam für alle Varianten) */
.mockup-stage { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; }
.mockup-blob {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 420px; height: 420px; background: var(--paper-alt);
    border-radius: 50% 45% 55% 50% / 50% 55% 45% 50%; z-index: 0;
}
.mockup-card {
    position: relative; z-index: 1; background: white; border-radius: 18px;
    border: 1px solid var(--border); box-shadow: 0 24px 60px -20px rgba(15,23,42,0.25);
    width: 100%; max-width: 400px; padding: 18px; transform: rotate(-2.5deg);
}
.mockup-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.mockup-dot-row { display: flex; gap: 5px; }
.mockup-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.mockup-title { font-size: 12px; font-weight: 700; color: var(--slate); letter-spacing: 0.03em; }

/* Dienstportal-Variante: Kalender */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
    aspect-ratio: 1; border-radius: 5px; background: var(--paper-alt);
    font-size: 9px; color: var(--slate); display: flex; align-items: flex-start;
    justify-content: flex-end; padding: 3px;
}
.cal-cell.wish { background: #406852; color: white; font-weight: 700; }
.cal-cell.limit { background: #8D312F; color: white; font-weight: 700; }
.cal-cell.reg-wish { background: #C6F5D2; color: #2F5A40; font-weight: 600; }
.cal-cell.reg-limit { background: #F6CBCA; color: #93413E; font-weight: 600; }
.cal-cell.pref { background: #406852; color: white; font-weight: 700; position: relative; }
.cal-cell.pref .pref-star { font-size: 7px; color: var(--gold); position: absolute; top: 1px; right: 2px; }
.cal-cell.today { outline: 2px solid var(--gold); outline-offset: -2px; }
.mockup-score-row { margin-top: 14px; display: flex; gap: 10px; }
.mockup-score { flex: 1; background: var(--paper); border-radius: 10px; padding: 10px 12px; }
.mockup-score .num { font-size: 18px; font-weight: 700; color: var(--ink); }
.mockup-score .lbl { font-size: 10.5px; color: var(--slate); }

/* Rotationsliste-Variante: Punkteliste */
.mockup-rank-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 2px; border-bottom: 1px solid var(--paper-alt);
}
.mockup-rank-row:last-child { border-bottom: none; }
.mockup-rank-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.mockup-rank-sub { font-size: 10.5px; color: var(--slate); margin-top: 1px; }
.mockup-rank-score { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--meadow); font-size: 16px; }
.mockup-rank-row.lowest { background: var(--meadow-pale); border-radius: 8px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.mockup-rank-row.lowest .mockup-rank-score { color: var(--meadow); }

/* Startseite-Variante: Icon-Cluster statt einzelnem Emblem.
   Zeigt bildlich, dass die Rotationsliste ein eingebautes Teilstück
   des Dienstportals ist - großes Icon vorn, kleines dockt an der Ecke an. */
.hero-icon-cluster { position: relative; z-index: 1; width: 260px; height: 260px; }
.hero-icon-primary {
    position: absolute; top: 6px; left: 6px; width: 214px; height: 214px;
    border-radius: 46px; box-shadow: 0 24px 60px -18px rgba(15,23,42,0.28);
    transform: rotate(-4deg);
}
.hero-icon-secondary {
    position: absolute; bottom: 4px; right: 0; width: 132px; height: 132px;
    border-radius: 30px; box-shadow: 0 16px 34px -14px rgba(15,23,42,0.3);
    border: 4px solid var(--paper); transform: rotate(8deg); z-index: 2;
}
.mockup-emblem-chip {
    position: absolute; z-index: 3; background: var(--white); border: 1px solid var(--border);
    border-radius: 12px; padding: 8px 14px; font-size: 13px; font-weight: 700;
    box-shadow: 0 12px 28px -14px rgba(15,23,42,0.25); display: flex; align-items: center; gap: 6px;
}
.mockup-emblem-chip.chip-primary { top: 4%; left: -8%; color: var(--meadow); }
.mockup-emblem-chip.chip-secondary { bottom: -6%; right: -4%; color: var(--gold-dark); }

/* Hero-Bild bei schmalerem Desktop-Fenster und auf Mobile: deutlich kleiner
   und per order über den Text gestellt statt darunter. Steht bewusst NACH
   allen Basis-Regeln oben, sonst gewinnt die spätere Basis-Regel im Cascade. */
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .mockup-stage { order: -1; margin-bottom: 8px; min-height: 300px; }
    .mockup-blob { width: 300px; height: 300px; }
    .mockup-card { max-width: 270px; padding: 14px; }
    .hero-icon-cluster { width: 220px; height: 220px; }
    .hero-icon-primary { width: 181px; height: 181px; top: 5px; left: 5px; }
    .hero-icon-secondary { width: 112px; height: 112px; }
    .mockup-emblem-chip { display: none; }
}

/* ============ STORY ============ */
.story { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.story-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; } }
.story h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 500; line-height: 1.28; color: var(--ink); }
.story-body p { color: var(--ink-soft); margin-bottom: 16px; font-size: 16px; }
.story-body strong { color: var(--meadow); }

/* ============ PHILOSOPHY ============ */
.philosophy { text-align: center; }
.philosophy h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 500; margin-bottom: 44px; }
.phil-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 780px) { .phil-row { grid-template-columns: 1fr; } }
.phil-card { text-align: center; }
.phil-star { font-size: 22px; color: var(--gold); margin-bottom: 10px; }
.phil-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.phil-card p { color: var(--slate); font-size: 14.5px; }

/* ============ VERGLEICH (Startseite) ============ */
.compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 780px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-card {
    background: var(--white); border: 1px solid var(--border); border-radius: 20px;
    padding: 36px; display: flex; flex-direction: column;
}
.compare-card .compare-icon { font-size: 26px; margin-bottom: 14px; }
.compare-card.gold .compare-icon { color: var(--gold-dark); }
.compare-card.meadow .compare-icon { color: var(--meadow); }
.compare-card h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.compare-card .compare-price { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.compare-card.gold .compare-price { color: var(--gold-dark); }
.compare-card.meadow .compare-price { color: var(--meadow); }
.compare-card p.compare-desc { color: var(--slate); font-size: 15px; margin-bottom: 20px; }
.compare-list { list-style: none; margin-bottom: 26px; flex-grow: 1; }
.compare-list li {
    display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--ink-soft);
    padding: 7px 0;
}
.compare-list li::before { content: "✓"; font-weight: 700; flex-shrink: 0; }
.compare-card.gold .compare-list li::before { color: var(--gold-dark); }
.compare-card.meadow .compare-list li::before { color: var(--meadow); }
.compare-card .btn { width: 100%; justify-content: center; }
.compare-note {
    max-width: 760px; margin: 36px auto 0; text-align: center; color: var(--slate);
    font-size: 15px; background: var(--paper-alt); border-radius: 14px; padding: 20px 26px;
}

/* ============ HIGHLIGHTS / FEATURE-GRID ============ */
.highlights { background: var(--white); border-top: 1px solid var(--border); }
.section-head { max-width: 820px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 500; margin-bottom: 12px; }
.section-head p { color: var(--slate); font-size: 16px; }
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 980px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid { grid-template-columns: 1fr; } }
.feat-card {
    background: var(--paper); border: 1px solid var(--border); border-radius: 16px;
    padding: 22px; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.feat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(15,23,42,0.18); }
.feat-icon { font-size: 24px; margin-bottom: 12px; }
.feat-card h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; }
.feat-card p { font-size: 13.5px; color: var(--slate); }
/* Auf weißem Sektionshintergrund (z.B. Rotationsliste-Seite) sollen Karten sich weiterhin abheben */
.highlights.on-paper { background: var(--paper); border-top: none; }
.highlights.on-paper .feat-card { background: var(--white); }

/* ============ AI-FEATURE-BLOCK ============ */
.ai-feature {
    background: var(--ink); color: white; border-radius: 20px; padding: 40px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
    margin-bottom: 32px;
}
@media (max-width: 780px) { .ai-feature { grid-template-columns: 1fr; } }
.ai-feature .eyebrow { color: var(--gold); }
.ai-feature h3 { font-size: 24px; font-weight: 500; margin-bottom: 12px; color: white; }
.ai-feature p { color: #C7D0DD; font-size: 15px; }
.ai-visual {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px; padding: 16px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
    color: #9FD9BE; line-height: 1.7;
}

/* ============ FREE / KOSTENLOS BOX ============ */
.free-tool {
    background: linear-gradient(135deg, var(--gold-pale), var(--paper-alt));
    text-align: center;
}
.free-tool .star-big { font-size: 44px; color: var(--gold); margin-bottom: 14px; }
.free-tool h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 500; margin-bottom: 14px; }
.free-tool p { color: var(--ink-soft); font-size: 16.5px; max-width: 580px; margin: 0 auto 28px; }

/* ============ PRICING ============ */
.pricing-card {
    max-width: 520px; margin: 0 auto; background: var(--white); border: 1px solid var(--border);
    border-radius: 20px; padding: 40px; text-align: center;
}
.pricing-card .price { font-family: 'Fraunces', Georgia, serif; font-size: clamp(22px, 2.8vw, 28px); font-weight: 600; margin: 12px 0 6px; }
.pricing-card .price-note { color: var(--slate); font-size: 14px; margin-bottom: 24px; }
.pilot-note {
    background: var(--meadow-pale); border-radius: 12px; padding: 14px 18px;
    font-size: 14px; color: var(--meadow); margin-top: 20px; text-align: left;
}

/* ============ TRUST (dunkel, Dienstportal) ============ */
.trust { background: var(--ink); color: white; }
.trust h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 500; margin-bottom: 32px; color: white; }
.trust .trust-sub { color: #C7D0DD; font-size: 16px; margin-bottom: 32px; max-width: 480px; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 780px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-item { display: flex; gap: 12px; }
.trust-item .dot { color: var(--gold); font-size: 18px; flex-shrink: 0; }
.trust-item p { color: #C7D0DD; font-size: 14.5px; }
.trust-item strong { color: white; display: block; margin-bottom: 4px; font-size: 15.5px; }

/* ============ PRIVACY (hell, Rotationsliste + Startseite) ============ */
.privacy { background: var(--white); border-top: 1px solid var(--border); }
.privacy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cols-3-tight { max-width: 900px; margin: 0 auto; }
@media (max-width: 780px) { .privacy-grid { grid-template-columns: 1fr; } }
.privacy-item { display: flex; gap: 12px; }
.privacy-item .dot { color: var(--gold); font-size: 18px; flex-shrink: 0; }
.privacy-item p { color: var(--slate); font-size: 14.5px; }
.privacy-item strong { color: var(--ink); display: block; margin-bottom: 4px; font-size: 15.5px; }
.privacy-more { text-align: center; margin-top: 28px; }
.privacy-more a { font-size: 14px; font-weight: 600; color: var(--meadow); }
.privacy-more a:hover { text-decoration: underline; }
.trust-more { text-align: center; margin-top: 28px; }
.trust-more a { font-size: 14px; font-weight: 600; color: var(--gold); }
.trust-more a:hover { text-decoration: underline; }

/* ============ CROSSLINK (dunkle Box, z.B. Rotationsliste -> Dienstportal) ============ */
.crosslink { background: var(--meadow-pale); text-align: center; }
.crosslink h2 { color: var(--ink); font-size: clamp(24px, 3vw, 34px); font-weight: 500; margin-bottom: 14px; }
.crosslink p { color: var(--ink-soft); font-size: 16px; max-width: 560px; margin: 0 auto 28px; }

/* ============ STEPS ("So funktioniert's") ============ */
.steps { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 860px) { .steps-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps-row { grid-template-columns: 1fr; } }
.step-card { text-align: left; }
.step-num { font-family: 'Fraunces', serif; font-weight: 600; font-size: 26px; color: var(--gold); margin-bottom: 10px; }
.step-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.step-card p { color: var(--slate); font-size: 14px; }

/* ============ SCREENSHOTS / LIGHTBOX ============ */
.shot-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 560px) { .shot-row { grid-template-columns: 1fr; } }
.shot-frame {
    background: var(--white); border: 1px solid var(--border); border-radius: 16px;
    overflow: hidden;
}
.shot-label { padding: 12px 16px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); border-top: 1px solid var(--border); }
.shot-body { background: var(--paper); overflow: hidden; cursor: zoom-in; position: relative; }
.shot-body img { width: 100%; height: auto; display: block; transition: transform 0.2s ease; }
.shot-body:hover img { transform: scale(1.03); }
.shot-zoom-hint {
    position: absolute; top: 10px; right: 10px; background: rgba(15,23,42,0.65); color: white;
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 15px; pointer-events: none;
}
.lightbox {
    display: none; position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,0.92);
    align-items: center; justify-content: center; padding: 40px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 80vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.lightbox-caption { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; color: white; font-size: 14px; }
.lightbox-close {
    position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,0.1); border: none; color: white;
    width: 42px; height: 42px; border-radius: 50%; font-size: 20px; cursor: pointer; transition: background 0.15s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none;
    color: white; width: 46px; height: 46px; border-radius: 50%; font-size: 20px; cursor: pointer; transition: background 0.15s ease;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.2); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
@media (max-width: 640px) { .lightbox { padding: 16px; } .lightbox-nav { width: 38px; height: 38px; } }

/* ============ FAQ ============ */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 20px 4px; font-size: 16px; font-weight: 600; color: var(--ink);
    display: flex; justify-content: space-between; align-items: center; font-family: inherit; gap: 12px;
}
.faq-q .chev { transition: transform 0.2s ease; color: var(--slate); font-size: 18px; flex-shrink: 0; }
.faq-item.open .faq-q .chev { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-a p { padding: 0 4px 20px; color: var(--slate); font-size: 14.5px; max-width: 640px; }

/* ============ FOOTER ============ */
footer { background: var(--white); border-top: 1px solid var(--border); padding: 48px 0 28px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; margin-bottom: 32px; }
.footer-brand { display: flex; align-items: center; gap: 9px; }
.footer-brand .brand-mark { width: 26px; height: 26px; border-radius: 7px; }
.footer-brand .brand-word { font-size: 17px; }
.footer-links { display: flex; gap: 22px; font-size: 14px; color: var(--slate); flex-wrap: wrap; }
.footer-links a:hover { color: var(--meadow); }
.footer-bottom { font-size: 13px; color: var(--slate); border-top: 1px solid var(--border); padding-top: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
@media (max-width: 750px) {
    .footer-bottom { justify-content: center; text-align: center; }
    .footer-meta { justify-content: center; }
}
.footer-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13px; }
.footer-meta a { color: var(--slate); }
.footer-meta a:hover { color: var(--meadow); }
.footer-status-group { display: inline-flex; align-items: center; gap: 7px; }
.footer-status-label { color: var(--slate); }
.footer-status {
    display: inline-flex; align-items: center; gap: 4px; background: var(--meadow-pale);
    padding: 3px 8px; border-radius: 13px; color: var(--meadow); font-size: 11px;
    font-weight: 600; white-space: nowrap;
}
.footer-status-dot { width: 6px; height: 6px; background-color: var(--meadow); border-radius: 50%; display: inline-block; }