/* /css/footer.css – Überarbeitet (breiten-konsistent, konfliktfrei)
=========================================================
GFC – Footer (Seriosität, Klarheit, Vertrauen)
- Footer nutzt global .container (keine eigene width/max-width-Logik)
- Footer-inner ohne zusätzliche max-width, nur vertikale Luft
- Footer-Link-Tiles sind SCOPED auf .footer-links .link-btn (keine globale Kollision)
- Safety-Mode: px -> rem/em (1:1), keine Layout-Umbauten außer universeller Grid-Spaltenlogik
========================================================= */

/* ---------- Base ---------- */
.site-footer {
  font-family: var(--ft-font);
  line-height: var(--ft-lh);
  color: var(--ft-text);
  background:
    radial-gradient(75rem 25rem at 20% -10%, rgba(92, 200, 255, 0.12), transparent 60%),
    radial-gradient(56.25rem 18.75rem at 80% 0%, rgba(92, 200, 255, 0.08), transparent 55%),
    var(--ft-bg);
  border-top: 1px solid var(--ft-border);
}

/* IMPORTANT:
   Keine .container Breiten-Overrides im Footer.
   Die globale .container regelt width + gutter konsistent. */

/* ---------- Layout ---------- */
.footer-inner {
  /* Container steuert die Außenbreite. */
  margin-inline: auto;

  /* Nur vertikale Luft – horizontale Ränder kommen vom globalen Container/Gutter */
  padding-block: clamp(1.125rem, 3.5vw, 2.25rem);

  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--ft-gap) * 0.9);
  align-items: start;
  min-width: 0;
}

/* ---------- Brand ---------- */
.footer-brand {
  background: linear-gradient(180deg, var(--ft-surface), transparent);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius);
  padding: calc(var(--ft-pad) * 0.6);
  min-width: 0;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 0.625rem; /* 10px */
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;

  inline-size: 2.375rem; /* 38px */
  block-size: 2.375rem;  /* 38px */

  border-radius: 0.625rem; /* 10px */
  border: 1px solid var(--ft-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  font-weight: 800;
  letter-spacing: 0.03125rem; /* 0.5px */
  color: var(--ft-accent);
  flex: 0 0 auto;
}

.brand-text {
  display: grid;
  gap: 0.1875rem; /* 3px */
  min-width: 0;
}

.brand-name {
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  font-weight: 700;
}

.brand-abbr {
  font-size: 0.85rem;
  color: var(--ft-muted);
  letter-spacing: 0.01875rem; /* 0.3px */
}

.claim { margin-top: 0.5rem; } /* 8px */

/* ---------- Navigation ---------- */
.footer-nav {
  padding: calc(var(--ft-pad) * 0.6);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius);
  background: linear-gradient(180deg, var(--ft-surface), transparent);
  min-width: 0;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;

  /* Universeller als "repeat(3)" – deckt Zwischenbreiten stabil ab.
     12rem (~192px) ist konservativ und verhindert zu schmale Tiles. */
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));

  gap: 0.5rem; /* 8px */
  align-items: stretch;
  min-width: 0;
}

/* Separator soll im Grid nicht als zusätzliches Element wirken */
.footer-links > .sep { display: none; }

.footer-links li {
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Footer-Link-Tiles (scoped) */
.footer-links .link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem; /* 6px */

  width: 100%;
  justify-content: flex-start;

  /* em: bleibt sehr gut von dir justierbar (folgt der Schriftgröße) */
  padding: 0.4375em 0.625em; /* 7px 10px bei 16px Basis */

  border-radius: var(--ft-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ft-text);
  font-weight: 600;
  letter-spacing: 0.0125rem; /* 0.2px */
  text-decoration: none;
  cursor: pointer;

  font: inherit;
  text-align: left;
  appearance: none;

  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;

  min-width: 0;
}

.footer-links .link-btn:hover {
  background: rgba(92, 200, 255, 0.10);
  border-color: rgba(92, 200, 255, 0.25);
  transform: translateY(-1px);
}

.footer-links .link-btn:focus-visible {
  outline: 0.125rem solid rgba(92, 200, 255, 0.55); /* 2px */
  outline-offset: 0.125rem; /* 2px */
}

/* Primary Link */
.footer-links .is-primary {
  border-color: var(--ft-border);
  background: radial-gradient(circle at top left, rgba(92, 200, 255, 0.18), transparent 55%);
}

.footer-links .is-primary:hover {
  background: rgba(92, 200, 255, 0.12);
  border-color: rgba(92, 200, 255, 0.35);
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.32); /* 10px 30px */
}

/* ---------- Mobile (≤900px) ---------- */
@media (max-width: 56.25rem) { /* 900px */
  .site-footer {
    padding: 1.25rem 0; /* 20px */
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 0.75rem; /* 12px */
    padding-block: 1.25rem; /* 20px */
  }

  /* auto-fit übernimmt 3->2->1 responsiv, daher kein erzwungenes 2-Spalten-Grid nötig */
  .footer-links {
    gap: 0.375rem; /* 6px */
  }
}

/* ---------- Small Mobile (≤520px) ----------
   Nicht mehr nötig, weil auto-fit/minmax automatisch auf 1 Spalte fällt.
   Wenn du es explizit behalten willst, kannst du den Block wieder aktivieren. */