/* ============================================================================
   agentbooks.de — Site-Footer (geteilte Komponente)
   Präfix sf- (site footer; ab- bleibt dem Design-System vorbehalten,
   sn- ist der Header, lp-/lib-/tw- sind seitengebunden).

   Seit dem neuen Navigationsmodell (Etappe 1) folgen Struktur und Werte dem
   Footer der Design-System-Seite „Startseite" (templates/website/
   Startseite.dc.html): Markenspalte plus fünf Rubriken (Welten · Katalog ·
   Nutzung · Unternehmen · Rechtliches) und eine Bottom-Bar mit Rechtslinks.
   Die vorherigen vier Rubriken (Produkt/Wissen/Konto/Unternehmen) entfallen.
   Innencontainer .sf-inner trägt den Seitenrand. Eingebunden von allen Seiten
   mit Footer (alle außer 404.html).
   Werte 1:1 aus dem Design; nur der als solcher markierte Responsive-Block am
   Dateiende ist Ergänzung — der Prototyp ist desktop-only. Wo eine Zahl nicht
   auf der 4px-Skala der Tokens liegt (9, 10, 14, 56 px), steht sie literal.
   ============================================================================ */

.sf-inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-12)}

.sf-footer{background:var(--surface-card);border-top:1px solid var(--border-default);color:var(--text-secondary);margin-top:var(--space-24)}

/* ---- Markenspalte + Rubriken ---- */
.sf-footer-grid{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:var(--space-12) 56px;align-items:start;padding:56px 0 var(--space-10)}
.sf-footer-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text-primary)}
.sf-footer-word{font-size:19px;font-weight:var(--weight-semibold);letter-spacing:-.025em}
.sf-footer-claim{font-size:var(--fs-button);line-height:1.6;margin-top:var(--space-4);max-width:34ch}
.sf-footer-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-5)}
.sf-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:var(--space-1) var(--space-2);border-radius:var(--radius-xs);border:1px solid var(--border-default);color:var(--text-secondary)}

.sf-footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-10) var(--space-8)}
.sf-footer-head{margin-bottom:14px}
.sf-footer-links{display:flex;flex-direction:column;gap:10px}
.sf-footer-links a{font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-secondary);text-decoration:none}
.sf-footer-links a:hover{color:var(--text-primary)}

/* ---- Bottom-Bar ---- */
.sf-footer-bottom{border-top:1px solid var(--border-default);padding:var(--space-5) 0 var(--space-8);display:flex;justify-content:space-between;align-items:center;gap:var(--space-4) var(--space-6);flex-wrap:wrap}
.sf-footer-legal{display:flex;gap:var(--space-5);flex-wrap:wrap}
.sf-footer-legal a{text-decoration:none}
.sf-footer-legal a:hover{color:var(--text-secondary)}

/* ============================================================================
   RESPONSIVE — Ergänzung zum Prototyp, Gutter-Stufen 48/32/20.
   ============================================================================ */

@media (max-width:1024px){
  .sf-inner{padding:0 var(--space-8)}
  .sf-footer-grid{grid-template-columns:1fr;gap:var(--space-10);padding:var(--space-12) 0 var(--space-8)}
}

@media (max-width:720px){
  .sf-inner{padding:0 var(--space-5)}
  .sf-footer{margin-top:var(--space-16)}
  .sf-footer-cols{grid-template-columns:repeat(2,1fr);gap:var(--space-8)}
  .sf-footer-bottom{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
}
.sf-tag-herz{display:inline-block;vertical-align:-1px;margin-left:2px;color:var(--error-600)}