/* =====================================================================
   APG Site-Footer  ·  F1–F6  ·  ersetzt Elementor-Vorlage 11459
   ---------------------------------------------------------------------
   Konzept: konzept/footer-konzept_2026-09-10.md
   Eigene, kleine Token-Kopie wie in site-header.css — gleiche Werte wie
   die Hub-Module, ohne von .apg-hub abzuhaengen.
   Geometrie an den Header angeglichen: dieselbe Randbreite
   clamp(16px, 3.5vw, 62px), damit Kopf und Fuss auf einer Kante stehen.
   ===================================================================== */

.apg-footer {
  --ink:    #1a1f3f;
  --muted:  #5a6a7e;
  --accent: #0284c7;
  --line:   #e6eaef;
  --page:   #f4f8fc;

  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Weiss wie der abgeloeste Elementor-Footer (live gemessen: #FFFFFF). Auf der
     Toenung stand das Logo-WebP als sichtbarer weisser Kasten. */
  background: #fff;
  border-top: 1px solid var(--line);
  color: var(--ink);
  line-height: 1.6;
}
.apg-footer *, .apg-footer *::before, .apg-footer *::after { box-sizing: border-box; }

.apg-footer__wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) clamp(16px, 3.5vw, 62px);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;   /* F1 breiter als F2–F4 */
  gap: 40px 36px;
  align-items: start;
}
.apg-footer__wrap--flat { display: block; padding-top: 18px; padding-bottom: 18px; }

/* ---- F1 Marke & Erreichbarkeit ---- */
.apg-footer__logo { display: inline-block; line-height: 0; border-radius: 6px; }
.apg-footer__logo img { display: block; height: 46px; width: auto; }
.apg-footer__claim { margin: 16px 0 18px; font-size: 14.5px; color: var(--muted); max-width: 40ch; }
.apg-footer__adr { margin: 0 0 18px; font-size: 14.5px; font-style: normal; color: var(--muted); }
.apg-footer__intent { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); }

.apg-footer__tel {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 16px 8px 12px;
  border: 1.5px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 17px; font-weight: 800; color: var(--ink); text-decoration: none;
  transition: border-color 200ms ease, color 200ms ease;
}
.apg-footer__tel:hover { border-color: var(--accent); color: var(--accent); }
.apg-footer__mail {
  display: block; margin-top: 10px; font-size: 14.5px;
  color: var(--accent); text-decoration: none;
}
.apg-footer__mail:hover { text-decoration: underline; text-underline-offset: 3px; }
.apg-footer__hours { margin: 6px 0 0; font-size: 14px; color: var(--muted); }

.apg-footer__social { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
/* Trefferflaeche 44x44 auf ALLEN Breiten — der Text-Chip davor lag bei 36 px.
   Der Glyph bleibt 20 px, die Flaeche drumherum traegt die Bedienbarkeit. */
.apg-footer__soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--ink); text-decoration: none;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.apg-footer__soc-svg { display: block; fill: currentColor; }
a.apg-footer__soc:hover { border-color: var(--accent); color: var(--accent); background: var(--page); }

/* ---- F2–F4 Navigationsspalten ---- */
.apg-footer__col-h {
  margin: 0 0 14px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.apg-footer__list { list-style: none; margin: 0; padding: 0; }
.apg-footer__list li + li { margin-top: 9px; }
.apg-footer__list a {
  font-size: 14.5px; color: var(--muted); text-decoration: none;
  transition: color 200ms ease;
}
.apg-footer__list a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---- F5 Rechtsleiste + F6 Firmierung ---- */
.apg-footer__legal { background: var(--page); border-top: 1px solid var(--line); }
.apg-footer__legal-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 22px;
}
.apg-footer__legal-list a {
  display: inline-flex; align-items: center; min-height: 32px;
  font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.apg-footer__legal-list a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.apg-footer__firma { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

/* ---- Fokusringe (Tastaturbedienung) ---- */
.apg-footer a:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .apg-footer * { transition: none !important; }
}

/* =====================================================================
   Mobil
   ---------------------------------------------------------------------
   Spalten stapeln, kein Akkordeon. Ein <details>, das auf dem Desktop
   offen und auf dem Telefon zu ist, laesst sich ohne JavaScript nicht
   zuverlaessig bauen (das 'open'-Attribut kennt keine Media Query, und
   `details:not([open]) > *` zu ueberschreiben haengt am UA-Stylesheet).
   Gestapelte Listen sind das, was der Bestand ohnehin tut — und wer bis
   zum Fuss scrollt, sucht meist genau einen dieser Links.
   ===================================================================== */
@media (max-width: 1023px) {
  .apg-footer__wrap { grid-template-columns: 1fr 1fr; gap: 34px 28px; }
  .apg-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 639px) {
  .apg-footer__wrap { grid-template-columns: 1fr; gap: 30px; padding-left: 16px; padding-right: 16px; }
  .apg-footer__col { border-top: 1px solid var(--line); padding-top: 24px; }
  .apg-footer__claim { max-width: none; }
  .apg-footer__tel { width: 100%; justify-content: center; }
  .apg-footer__list a { display: inline-flex; align-items: center; min-height: 44px; }
  .apg-footer__list li + li { margin-top: 0; }
  .apg-footer__legal .apg-footer__wrap--flat { padding-left: 16px; padding-right: 16px; }
  .apg-footer__legal-list { gap: 0 20px; }
  .apg-footer__legal-list a { min-height: 44px; }

  /* Gemessen 10.09. bei 375 px: diese lagen unter der 44-px-Marke (23 / 18 px).
     Die Social-Flaeche ist seit dem Icon-Umbau auf allen Breiten 44x44 und
     braucht hier nichts mehr. Die Endnote erbt ihre Optik aus partner.css und
     wird nur gescopt nachjustiert — partner.css bleibt unangetastet, sie
     bedient 6 Bestandsseiten. */
  .apg-footer__mail { display: inline-flex; align-items: center; min-height: 44px; }
  .apg-footer .apg-partner__endnote a { display: inline-flex; align-items: center; min-height: 44px; }
}