/* ============================================================
   CREOVATE – Footer
   CSS Grid layout, kein Table, kein doppeltes HTML.
   Alignment: gleiche max-width + Randabstände wie .metro-grid
   ============================================================ */

:root {
  --footer-bg:  #2a2c2d;
  --footer-rad: 30px;
  --link-blue:  #b0d4ff;
}

/* ── Äußerer Rahmen ─────────────────────────────────────────── */
#colophon {
  /* Gleiche Zentrierung wie .page-content (style.css)
     → footer-box fluchtet mit den Grid-Kacheln auf allen Viewports */
  max-width: 1496px;
  width: 100%;
  margin: 0 auto;
  padding: 10px 20px 80px 18px;
  box-sizing: border-box;
}

.footer-box {
  background:    var(--footer-bg);
  border-radius: var(--footer-rad);
  max-width:     var(--metro-max-width, 1496px);
  width:         100%;
  margin:        0 auto;
  padding:       48px 56px 40px;
  box-sizing:    border-box;
  color:         #fff;
  font-family:   'MatterSQ', sans-serif;
}

/* ── Grid ───────────────────────────────────────────────────── */
.footer-grid {
  display:               grid;
  grid-template-columns: 1.618fr auto 1fr;
  grid-template-rows:    auto auto auto;
  grid-template-areas:
    "quote   address  post"
    "quote   nav      legal"
    "logo    empty    copyright";
  column-gap:            48px;
  row-gap:               0;
}

/* ── Zellen ─────────────────────────────────────────────────── */
.footer-quote     { grid-area: quote;     padding-right: 80px; }
.footer-address   { grid-area: address; }
.footer-post      { grid-area: post; }
.footer-nav       { grid-area: nav;       padding-top: 32px; }
.footer-legal     { grid-area: legal;     padding-top: 32px; }
.footer-logo      { grid-area: logo;      align-self: end; padding-top: 48px; }
.footer-stieff-logo {
  grid-area: empty;
  align-self: end;
  padding-top: 48px;
}
.footer-stieff-logo svg {
  display: block;
  height: 48px;
  width: auto;
  fill: #fff;
  transform: translateY(12px); 
}
.footer-copyright { grid-area: copyright; align-self: end; text-align: right; padding-top: 48px; }

/* ── Quote ──────────────────────────────────────────────────── */
.footer-quote p {
  font-size:   clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.3;
  margin:      0;
  color:       #fff;
}

/* ── Adresse / Post ─────────────────────────────────────────── */
.footer-address,
.footer-post {
  font-size:   0.875rem;
  line-height: 1.75;
  color:       rgba(255, 255, 255, 0.65);
}

.footer-address a,
.footer-post a {
  color:           var(--link-blue);
  text-decoration: none;
}
.footer-address a:hover,
.footer-post a:hover {
  text-decoration: underline;
}

/* ── Navigation ─────────────────────────────────────────────── */
.footer-nav-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        6px;
}

.footer-nav-list a {
  font-size:       0.875rem;
  color:           rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition:      color 0.15s;
}
.footer-nav-list a:hover {
  color: #fff;
}

/* ── Logo ───────────────────────────────────────────────────── */
.logo-prefix {
  font-size:      0.9rem;
  font-weight:    300;
  letter-spacing: 0.04em;
  color:          rgba(255, 255, 255, 0.6);
  margin-bottom:  6px;
  text-align:     center;
}

.logo-wrap {
  display:        inline-flex;
  flex-direction: column;
  align-items:    center;
  gap:            0;
}

.logo-wrap svg {
  fill:   #fff;
  width:  72px;
  height: auto;
  display: block;
}

.logo-title {
  font-size:      0.95rem;
  font-weight:    500;
  letter-spacing: 0.06em;
  margin-top:     -14px;
  color:          #fff;
}

.logo-sub {
  font-size:   0.65rem;
  font-weight: 300;
  opacity:     0.7;
  margin-top:  -4px;
}

/* ── Copyright ──────────────────────────────────────────────── */
.footer-copyright {
  font-size:   0.8rem;
  line-height: 1.6;
  color:       rgba(255, 255, 255, 0.4);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet: ab ~900 px kompakter */
@media (max-width: 900px) {
  .footer-box {
    padding: 36px 32px 32px;
  }

  .footer-quote {
    padding-right: 40px;
  }
}

/* Mobile: 2-spaltig */
@media (max-width: 640px) {
  #colophon {
    padding: 8px 10px 40px;
  }

  .footer-box {
    padding:       28px 24px 28px;
    border-radius: 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "quote     quote"
      "address   post"
      "nav       legal"
      "stieff    stieff"
      "logo      copyright";
    gap: 0 16px;
  }

  .footer-quote {
    padding-right: 0;
    padding-bottom: 24px;
    margin-bottom: 24px;
  }

  .footer-quote p {
    font-size: 1.2rem;
  }

  .footer-address,
  .footer-post {
    padding-bottom: 24px;
  }

  .footer-nav,
  .footer-legal {
    padding-top: 0;
    padding-bottom: 24px;
  }

  .footer-logo {
    padding-top: 20px;
  }

  .footer-copyright {
    padding-top: 20px;
    align-self: end;
  }

  .footer-stieff-logo {
    grid-area: stieff;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* Sehr kleine Screens: komplett einspaltig */
@media (max-width: 400px) {
  .footer-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "quote"
      "address"
      "post"
      "nav"
      "legal"
      "stieff"
      "logo"
      "copyright";
  }

  .footer-copyright {
    text-align: left;
  }
}