/* qbold – shared public marketing footer.
   Self-contained and safe on any public page: it defines its own content
   width and uses the qbold palette via CSS variables with hard fallbacks, so
   it renders correctly whether or not the host page defines those tokens.
   Paired with renderPublicFooter() in src/publicPages/publicFooter.ts.
   Easy to revert: delete this file and its <link> references plus the footer. */

.site-footer {
  /* Quieter-than-links secondary text tone. AA-compliant on every public
     background — auth #F7F5FB ~4.57:1, #FAFBFD ~4.77:1, #FFFFFF ~4.94:1 — yet
     still lighter than the #5B6B82 link tone, so the footer keeps its two-tone
     hierarchy. */
  --footer-muted: #637188;
  border-top: 1px solid var(--stroke, #E3E9F1);
  color: var(--slate, #5B6B82);
  font-size: 0.95rem;
  margin-top: 48px;
}

.site-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 24px 44px;
}

/* Desktop: broad, intentionally uneven columns. Brand ~35%, Prüfen wider. */
.site-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* ---------- Brand block (content, not navigation) ---------- */
.footer-brand { max-width: 340px; }
.footer-brand__logo { display: inline-block; margin-bottom: 18px; }
.footer-brand__logo img { height: 30px; width: auto; display: block; }
.footer-brand__logo:focus-visible {
  outline: 3px solid var(--brand, #7C3AED);
  outline-offset: 3px;
  border-radius: 4px;
}
.footer-brand__tagline {
  color: var(--ink, #0E1726);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.35;
  margin: 0 0 16px;
}
.footer-brand__desc {
  margin: 0 0 18px;
  line-height: 1.55;
  color: var(--slate, #5B6B82);
}
.footer-brand__trust {
  margin: 0 0 12px;
  font-size: 0.86rem;
  color: var(--footer-muted);
}
.footer-brand__contact { margin: 0; font-size: 0.9rem; }
.footer-brand__contact a {
  color: var(--slate, #5B6B82);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-brand__contact a:hover { color: var(--ink, #0E1726); }
.footer-brand__contact a:focus-visible {
  outline: 3px solid var(--brand, #7C3AED);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Secondary social links styled as subtle circular icon buttons: a thin muted
   ring around a ~22px glyph in a 36x36 target, no background fill. Muted by
   default, qbold violet (ring + icon together) on hover/focus. Flush with the
   brand text column, sitting just below the contact line. box-sizing keeps the
   ring inside the 36x36 footprint even without a host box-sizing reset. */
.footer-brand__social {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  gap: 4px;
}
.footer-social__link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  /* Quiet button boundary only: the subtle footer stroke, softer than the icon,
     so the ring never reads as part of the social logo. It stays neutral in
     every state — only the icon and the external focus outline use violet. */
  border: 1px solid var(--stroke, #E3E9F1);
  border-radius: 50%;
  color: var(--footer-muted);
  transition: color 0.15s;
}
.footer-social__link:hover {
  color: var(--brand, #7C3AED);
}
.footer-social__link:focus-visible {
  outline: 3px solid var(--brand, #7C3AED);
  outline-offset: 2px;
  border-radius: 50%;
  color: var(--brand, #7C3AED);
}
.footer-social__icon { display: block; }

/* ---------- Navigation groups ---------- */
.footer-nav__heading {
  color: var(--ink, #0E1726);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.footer-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-nav__list a {
  color: var(--slate, #5B6B82);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.footer-nav__list a:hover {
  color: var(--ink, #0E1726);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-nav__list a:focus-visible {
  outline: 3px solid var(--brand, #7C3AED);
  outline-offset: 3px;
  border-radius: 2px;
  color: var(--ink, #0E1726);
}

/* Prüfen group carries supporting descriptions; give the rows more room. */
.footer-nav__list--described { gap: 22px; }
.footer-nav__desc {
  display: block;
  margin-top: 6px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--footer-muted);
  max-width: 32ch;
}

/* ---------- Minimum interactive target size ----------
   WCAG 2.2 SC 2.5.8: standalone links get a >=24px-tall hit area without
   button-like boxes. Short labels such as "AGB" are already wider than 24px,
   so only the vertical dimension needs guaranteeing. Scoped to the footer;
   no global anchor styling. Descriptions (.footer-nav__desc) are <span>s and
   stay non-interactive. The brand logo link already wraps a 30px-tall image. */
.footer-nav__list a,
.footer-brand__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* ---------- Bottom bar ---------- */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--stroke, #E3E9F1);
  font-size: 0.85rem;
}
.site-footer__copy { color: var(--footer-muted); }
.site-footer__entity {
  /* inline-block keeps the target >=24px tall while still allowing the long
     entity name to wrap on narrow screens (no horizontal overflow). */
  display: inline-block;
  min-height: 24px;
  color: var(--footer-muted);
  text-decoration: none;
}
.site-footer__entity:hover {
  color: var(--ink, #0E1726);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__entity:focus-visible {
  outline: 3px solid var(--brand, #7C3AED);
  outline-offset: 3px;
  border-radius: 2px;
  color: var(--ink, #0E1726);
}

/* ---------- Tablet: brand full width, 2×2 nav grid ---------- */
@media (max-width: 900px) {
  .site-footer__inner { padding: 52px 24px 40px; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
  .footer-brand { grid-column: 1 / -1; max-width: 520px; }
  .footer-nav__desc { max-width: none; }
}

/* ---------- Mobile: single-column stack ---------- */
@media (max-width: 600px) {
  .site-footer__cols { grid-template-columns: 1fr; gap: 30px; }
  .footer-brand { grid-column: auto; max-width: none; }
  .site-footer__bottom { margin-top: 30px; }
}

/* ---------- Print: keep it calm — drop nav, keep brand + copyright ---------- */
@media print {
  .site-footer { margin-top: 24px; border-top: 1px solid #000; }
  .site-footer__cols { display: block; }
  .footer-nav { display: none; }
  .footer-brand__desc,
  .footer-brand__contact { display: none; }
  .site-footer__bottom { margin-top: 16px; }
}