/* ==========================================================================
   Etappe 6 – Footer
   Schließt die Seite im Seeblau. Die Slogan-Karte steht wie eine echte Karte
   leicht schief und trägt eine gestrichelte Kante, solange sie Platzhalter ist.
   Dieselbe Sprache wie beim Film-Rahmen: hier fehlt noch etwas.
   ========================================================================== */

.footer__card {
  max-width: 24rem;
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-media);
  background-color: rgb(241 233 218 / 0.05);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-variation-settings: "SOFT" 100;
  line-height: 1.25;
  transform: rotate(-1.2deg);
}

.footer__card-note,
.footer__note {
  max-width: 34ch;
  margin-top: var(--space-s);
  color: var(--fg-soft);
  font-size: var(--step--1);
}

.footer__meta {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-l);
  margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line);
}

.footer__brand {
  grid-column: 1 / span 4;
}

/* Seit Etappe 7 steht hier das echte Monogramm aus Dennis' Handschrift. */
.footer__monogram-mark {
  width: auto;
  height: clamp(2.5rem, 2.1rem + 1.6vw, 3.5rem);
  color: var(--fg);
}

.footer__links {
  grid-column: 6 / span 3;
}

.footer__legal {
  grid-column: 10 / -1;
}

.footer__list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__legal p + p {
  margin-top: 0.5rem;
}

.footer__soon {
  color: var(--fg-soft);
  font-size: var(--step--1);
}

@media (max-width: 56rem) {
  .footer__meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__brand,
  .footer__links,
  .footer__legal {
    grid-column: 1;
  }
}