/* ═══════════════════════════════════════════════════════════════════════════
   Component: Site Footer v2 — Teal, textured, minimal
   ═══════════════════════════════════════════════════════════════════════════ */

.c-site-footer {
  position: relative;
  background-color: var(--color-surface-darker);
  color: hsl(198 12% 55%);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-border-teal-subtle);
  margin-top: auto;
  overflow: hidden;
}

/* Subtle noise texture overlay */
.c-site-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  pointer-events: none;
}

.c-site-footer__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.c-site-footer__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xl);
  align-items: center;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border-teal-subtle);
}

.c-site-footer__brand {
  text-align: left;
}

.c-site-footer__name {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: hsl(198 15% 92%);
}

.c-site-footer__description {
  font-size: var(--font-size-sm);
  color: hsl(198 12% 55%);
  margin-top: var(--space-2xs);
}

.c-site-footer__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-sm) var(--space-xl);
  list-style: none;
}

.c-site-footer__menu a {
  display: inline-flex;
  align-items: center;
  /* Tap-Ziel: mit padding-block 4px waren diese Links nur 17px hoch und damit
     unter der Grenze von WCAG 2.5.8 (24x24). Auf dem Handy 44px, am Schreibtisch
     24px — die Optik aendert sich dabei nicht, nur die anklickbare Flaeche. */
  min-height: 24px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: hsl(198 12% 62%);
  padding-block: 0;
  text-decoration: none;
  background: none;
  transition: color var(--motion-duration-fast) var(--motion-ease-out);
}

.c-site-footer__menu a:hover {
  color: var(--color-orange-400);
}

.c-site-footer__copyright {
  font-size: var(--font-size-xs);
  color: hsl(198 12% 62%);
  margin-bottom: var(--space-sm);
}

.c-site-footer__legal-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  list-style: none;
}

.c-site-footer__legal-list a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: var(--font-size-xs);
  color: hsl(198 12% 62%);
  padding-block: 0;
  text-decoration: none;
  background: none;
  transition: color var(--motion-duration-fast) var(--motion-ease-out);
}

.c-site-footer__legal-list a:hover {
  color: hsl(198 25% 70%);
}

.c-site-footer__cc-open {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: var(--font-size-xs);
  color: hsl(198 12% 62%);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--motion-duration-fast) var(--motion-ease-out);
}

.c-site-footer__cc-open:hover {
  color: var(--color-orange-400);
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .c-site-footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .c-site-footer__brand {
    text-align: center;
  }

  .c-site-footer__menu {
    justify-content: center;
  }

  /* Auf dem Handy ist der Daumen das Maß: Fusszeilen-Links bekommen die volle
     Tap-Hoehe, am Schreibtisch genuegen 24px (WCAG 2.5.8). */
  .c-site-footer__menu a,
  .c-site-footer__legal-list a,
  .c-site-footer__cc-open {
    min-height: 44px;
  }

  /* Die Links stehen dann ohne zusaetzliche Luecke untereinander, weil die
     Hoehe selbst schon die Trennung liefert. */
  .c-site-footer__legal-list {
    gap: 0 var(--space-lg);
  }
}