/* ============================================================
   modvio — Footer. EINE Quelle für alle statischen Seiten.
   Markup: footer.html · Verteilung: node tools/footer-sync.mjs

   Seit 08/2026: vollflächig Markenblau (Landing-v3, qodia-Muster).
   Selbsttragend: alle Farben stehen HIER (keine tokens.css-Pflicht),
   damit Ratgeber/Statistik/Unterseiten identisch aussehen.
   Kontraste gegen den Verlauf (#2456E8→#1D48CF) gemessen:
     Links #E7EEFF ≥ 5,3:1 · Claim/H4 #DCE6FF ≥ 4,9:1 · © #CDDBFF ≥ 4,5:1
   ============================================================ */

.mfoot{
  background:linear-gradient(180deg,#2456E8,#1D48CF);
  color:#E7EEFF;
  font-family:var(--fs,var(--ft,"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif));
  padding:clamp(48px,6vw,72px) 0 28px;
  position:relative;
  overflow:hidden;
}
.mfoot::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 80% at 12% 0%,rgba(255,255,255,.14),transparent 60%);pointer-events:none}
.mfoot .mf-wrap{width:var(--mx,min(1240px,92vw));margin:0 auto;position:relative}

.mfoot .mf-top{display:grid;grid-template-columns:1.35fr 2.6fr;gap:clamp(28px,4vw,64px)}

/* Marke + Claim */
.mfoot .mf-mark{display:inline-flex;align-items:center;gap:9px;font-size:1.18rem;font-weight:700;letter-spacing:-.04em;color:#fff;text-decoration:none}
.mfoot .mf-mark .mk{width:20px;height:20px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px}
.mfoot .mf-mark .mk i{border-radius:3px;background:#fff}
.mfoot .mf-mark .mk i.hl{background:#9DBAFF}
.mfoot .mf-claim{margin:14px 0 0;max-width:36ch;font-size:.92rem;line-height:1.65;color:#DCE6FF}

/* Spalten */
.mfoot .mf-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px)}
.mfoot .mf-col h4{margin:0 0 14px;font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#DCE6FF}
.mfoot .mf-col nav{display:grid;gap:10px}
.mfoot .mf-col nav a{justify-self:start;font-size:.93rem;color:#E7EEFF;text-decoration:none;transition:color .15s}
.mfoot .mf-col nav a:hover{color:#fff}

/* Fußzeile */
.mfoot .mf-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:clamp(34px,4vw,50px);padding-top:20px;border-top:1px solid rgba(255,255,255,.22)}
.mfoot .mf-cp{font-size:.82rem;color:#CDDBFF}

/* Trust-Chip (kein farbiger Kanten-Balken — neutraler Rand rundum) */
.mfoot .mf-trust{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(255,255,255,.08);font-size:.82rem;color:#fff;text-decoration:none;transition:border-color .15s,background .15s}
.mfoot .mf-trust:hover{border-color:#fff;background:rgba(255,255,255,.14)}
.mfoot .mf-trust>svg{width:16px;height:16px;flex:0 0 auto;color:#fff}
.mfoot .mf-trust-t{font-weight:600;color:#fff}
.mfoot .mf-trust-l{display:inline-flex;align-items:center;gap:5px;padding-left:10px;border-left:1px solid rgba(255,255,255,.35)}
.mfoot .mf-trust-l svg{width:11px;height:11px}

/* Dunkle Lineage (Ratgeber/Statistik): Blau trägt auf dunklem Grund wie auf hellem —
   die Variante bleibt als Klasse erhalten, ändert aber nur die Nahtstelle nach oben. */
.mfoot--dark{border-top:0}

@media(max-width:1000px){
  .mfoot .mf-top{grid-template-columns:1fr;gap:34px}
}
@media(max-width:720px){
  .mfoot .mf-cols{grid-template-columns:1fr 1fr;gap:26px 20px}
}
/* Schmale Schirme: Chip-Schwanz weg — die Chat-Blase der Startseite sitzt fest
   unten rechts und lief sonst über das „↗" (siehe alte Messung 62px + 16px Rand). */
@media(max-width:520px){
  .mfoot .mf-trust-l{display:none}
}
/* Touch: Listen-Links auf ≥44px Zielhöhe (Zeile ~23px + 2×11px) */
@media(pointer:coarse){
  .mfoot .mf-col nav{gap:0}
  .mfoot .mf-col nav a{padding:11px 0}
  /* gemessen 29,3 px (Wortmarke) und 38,3 px (Trust-Chip) */
  .mfoot .mf-mark{min-height:44px}
  .mfoot .mf-trust{min-height:44px;padding:11px 14px}
}