/* ───────────────────────────────────────────────────────────────────────
   footer.css — Geteilter Homepage-Goldstandard-Footer für alle Unterseiten.
   Selbsttragend: eigener .foot__wrap-Container + Token-Fallbacks, damit der
   Footer unabhängig vom übrigen Page-CSS identisch rendert.
   Markup: <footer role="contentinfo"><div class="foot__wrap"> … </div></footer>
   ───────────────────────────────────────────────────────────────────────── */

footer[role="contentinfo"] {
  background: var(--paper-10, oklch(98.7% 0.002 252));
  padding: 0 0 var(--s-7, 48px);
  border-top: var(--hairline, 1px solid var(--ink-100, oklch(93.8% 0.003 252)));
}
footer[role="contentinfo"] .foot__wrap {
  max-width: 1344px; margin: 0 auto; padding: 0 var(--s-5, 24px);
}
@media (min-width: 880px) {
  footer[role="contentinfo"] .foot__wrap { padding: 0 var(--s-8, 64px); }
}

footer[role="contentinfo"] .foot__top {
  display: grid; grid-template-columns: 1fr; gap: var(--s-7, 48px);
  padding: var(--s-8, 64px) 0; border-bottom: var(--hairline, 1px solid var(--ink-100, oklch(93.8% 0.003 252)));
}
@media (min-width: 880px) {
  footer[role="contentinfo"] .foot__top { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr; gap: var(--s-6, 32px); }
}

footer[role="contentinfo"] .foot__brand .tag {
  margin-top: var(--s-4, 16px); color: var(--ink-600, oklch(42.0% 0.010 252));
  font-size: var(--type-body-sm, 15px); max-width: 32ch; line-height: 1.55;
}
footer[role="contentinfo"] .foot__brand .contact {
  margin-top: var(--s-5, 24px);
  display: flex; flex-direction: column; gap: var(--s-2, 8px);
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: var(--type-eyebrow, 11px);
  color: var(--ink-500, oklch(54.8% 0.008 252)); letter-spacing: 0.02em;
}
footer[role="contentinfo"] .foot__brand .contact a { color: inherit; text-decoration: none; }
footer[role="contentinfo"] .foot__brand .contact a:hover { color: var(--accent-600, oklch(36.1% 0.101 252)); }
footer[role="contentinfo"] .foot__brand .contact-sep {
  width: 24px; height: 1px; background: var(--ink-200, oklch(88.2% 0.004 252)); margin: var(--s-2, 8px) 0;
}
footer[role="contentinfo"] .foot__brand .address {
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: var(--type-eyebrow, 11px); line-height: 1.55;
  color: var(--ink-500, oklch(54.8% 0.008 252)); letter-spacing: 0.02em; font-style: normal;
}

footer[role="contentinfo"] .foot__col h3 {
  font-size: var(--type-eyebrow, 11px); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-500, oklch(54.8% 0.008 252)); font-weight: 600; margin-bottom: var(--s-4, 16px);
}
footer[role="contentinfo"] .foot__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3, 12px); }
footer[role="contentinfo"] .foot__col a {
  color: var(--ink-700, oklch(31.3% 0.008 252)); font-size: var(--type-body-sm, 15px); text-decoration: none;
  transition: color 120ms cubic-bezier(0.22, 0.61, 0.36, 1); padding: 10px 0; display: block; line-height: 1.4;
}
footer[role="contentinfo"] .foot__col a:hover { color: var(--ink-900, oklch(16.1% 0.005 252)); }

/* ERLEDIGT.-Spalte */
footer[role="contentinfo"] .foot__erledigt {
  padding-left: var(--s-5, 24px); border-left: 1px solid var(--paper-30, oklch(94.3% 0.004 252));
}
@media (max-width: 879px) {
  footer[role="contentinfo"] .foot__erledigt {
    padding-left: 0; border-left: none; padding-top: var(--s-5, 24px); border-top: 1px solid var(--paper-30, oklch(94.3% 0.004 252));
  }
}
footer[role="contentinfo"] .foot__erledigt-head { display: flex; align-items: center; gap: var(--s-3, 12px); margin-bottom: var(--s-3, 12px); }
footer[role="contentinfo"] .foot__erledigt-head .dot { width: 8px; height: 8px; background: var(--accent-500, oklch(42.1% 0.120 252)); border-radius: var(--r-pill, 999px); }
footer[role="contentinfo"] .foot__erledigt-head span { font-family: var(--font-sans, sans-serif); font-weight: 700; font-size: var(--type-body, 17px); color: var(--ink-900, oklch(16.1% 0.005 252)); letter-spacing: -0.015em; }
footer[role="contentinfo"] .foot__erledigt p { color: var(--ink-600, oklch(42.0% 0.010 252)); font-size: var(--type-caption, 13px); line-height: 1.55; margin: 0 0 var(--s-4, 16px); }
footer[role="contentinfo"] .foot__erledigt-links {
  display: flex; flex-direction: column; gap: var(--s-2, 8px);
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: var(--type-eyebrow, 11px); letter-spacing: 0.04em;
  color: var(--ink-500, oklch(54.8% 0.008 252));
}
footer[role="contentinfo"] .foot__erledigt-links a { color: inherit; text-decoration: none; transition: color 120ms cubic-bezier(0.22, 0.61, 0.36, 1); }
footer[role="contentinfo"] .foot__erledigt-links a.primary { color: var(--accent-600, oklch(36.1% 0.101 252)); }
footer[role="contentinfo"] .foot__erledigt-links a:hover { color: var(--ink-900, oklch(16.1% 0.005 252)); }
footer[role="contentinfo"] .foot__erledigt-links a.primary:hover { color: var(--accent-700, oklch(29.4% 0.079 252)); }

footer[role="contentinfo"] .foot__meta {
  padding: var(--s-5, 24px) 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-5, 24px); flex-wrap: wrap;
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: var(--type-eyebrow, 11px);
  color: var(--ink-500, oklch(54.8% 0.008 252)); letter-spacing: 0.04em;
}
footer[role="contentinfo"] .foot__meta-left { display: flex; align-items: center; gap: var(--s-3, 12px); flex-wrap: wrap; }
footer[role="contentinfo"] .foot__meta-sep { color: var(--ink-300, oklch(82.9% 0.005 252)); }
footer[role="contentinfo"] .foot__meta-brand { font-family: var(--font-sans, sans-serif); font-weight: 700; color: var(--ink-900, oklch(16.1% 0.005 252)); letter-spacing: -0.01em; }
footer[role="contentinfo"] .foot__meta-brand-dot { color: var(--accent-500, oklch(42.1% 0.120 252)); }
footer[role="contentinfo"] .foot__meta-legal { display: flex; gap: var(--s-4, 16px); flex-wrap: wrap; }
footer[role="contentinfo"] .foot__meta-legal a { color: var(--ink-500, oklch(54.8% 0.008 252)); text-decoration: none; transition: color 120ms cubic-bezier(0.22, 0.61, 0.36, 1); }
footer[role="contentinfo"] .foot__meta-legal a:hover { color: var(--ink-800, oklch(22.7% 0.006 252)); }