/*
 * footer.css — Footer
 * ============================================================
 */

footer {
  background: var(--dark);
  padding:    56px 48px 28px;
}

/* ── Grid ── */
.fg {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   44px;
  margin-bottom:         48px;
}

/* ── Marken-Block ── */
.fl-mark { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.fl-mark img {
  height:       44px;
  width:        auto;
  border-radius:6px;
  object-fit:   contain;
}
.fl-about {
  font-size:   13px;
  color:       rgba(255,255,255,.45);
  line-height: 1.75;
}
.fl-cert {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  margin-top:     14px;
  padding:        5px 11px;
  border-radius:  5px;
  background:     rgba(34,197,94,.08);
  border:         1px solid rgba(34,197,94,.2);
  font-size:      10px;
  letter-spacing: 1px;
  color:          #4ADE80;
  font-weight:    600;
}

/* ── Link-Spalten ── */
.fc h4 {
  font-size:      11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color:          rgba(100,180,230,.8);
  font-weight:    600;
  margin-bottom:  14px;
}
.fc ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.fc ul li a {
  font-size:  13px;
  color:      rgba(255,255,255,.38);
  transition: color .2s;
}
.fc ul li a:hover { color: rgba(255,255,255,.8); }

/* ── Bottom Bar ── */
.fb {
  border-top:  1px solid rgba(255,255,255,.08);
  padding-top: 22px;
  display:     flex;
  justify-content:space-between;
  align-items: center;
  font-size:   11px;
  color:       rgba(255,255,255,.2);
  flex-wrap:   wrap;
  gap:         10px;
}
.fl-legal { display: flex; gap: 18px; }
.fl-legal a { color: rgba(255,255,255,.2); transition: color .2s; }
.fl-legal a:hover { color: rgba(255,255,255,.5); }

/* ── Social Icons ── */
.fl-social { display: flex; gap: 12px; margin-top: 16px; }
.fl-social a {
  width:          32px;
  height:         32px;
  border-radius:  8px;
  background:     rgba(255,255,255,.07);
  border:         1px solid rgba(255,255,255,.1);
  display:        flex;
  align-items:    center;
  justify-content:center;
  color:          rgba(255,255,255,.4);
  font-size:      13px;
  transition:     all .2s;
}
.fl-social a:hover {
  background: var(--primary);
  color:      #fff;
  border-color:var(--primary);
}

/* ── Responsive ── */
@media (max-width: 780px) {
  footer { padding: 40px 24px 20px; }
  .fg    { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .fg { grid-template-columns: 1fr; }
}