/* Öffentlicher Seitenfuß — EIN Bauteil für Startseite, Marktplatz, Marketing-Seiten,
   B2B-Landeseiten und Rechtstexte. Markup: templates/_footer_public.html.

   MECHANIK
   - Alle Flächenfarben laufen über die vier `--pf-*`-Variablen. Wer den Fuß umfärben
     will (z. B. die Rubrik-Themes des Marktplatzes über body[data-rubrik]), überschreibt
     genau diese vier — Hex-Werte direkt in einer Regel wären gegen ein anderes Theme immun.
   - Unter 720 px ist der Fuß ein Akkordeon (<details>), darüber Spalten. Das Markup wird
     serverseitig OFFEN ausgeliefert; static/js/footer-public.js klappt schmal zu. Ohne
     JavaScript bleibt also alles sichtbar — nie weniger als vorher.
   - Die Rechtszeile steht bewusst AUSSERHALB der <details>: § 5 DDG verlangt „leicht
     erkennbar und unmittelbar erreichbar". Impressum & Co. dürfen nie eingeklappt sein.

   🧨 Kein `justify-content:center` in dieser Datei. Zentrierte Fuß-Zeilen sind am
   11.08.2026 nach BEIDEN Seiten aus dem Bild gelaufen (Betreiber-Befund, Commit c21808f);
   linksbündig + flex-wrap ist die Lehre daraus. Ratsche: MobilLayoutRatscheTest. */

.pf {
  --pf-bg: #0d1326;
  --pf-ink: #ffffff;
  --pf-txt: #b6bed0;
  --pf-dim: #828da6;
  --pf-line: rgba(255, 255, 255, .10);
  position: relative;
  isolation: isolate;
  background: var(--pf-bg);
  color: var(--pf-txt);
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  line-height: 1.5;
  margin-top: 48px;
}

/* Weicher Marken-Schimmer über der Fläche (wie body::before in base.html). */
.pf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(760px 300px at 10% -20%, rgba(47, 107, 255, .22), transparent 68%),
    radial-gradient(620px 260px at 92% -8%, rgba(255, 61, 119, .14), transparent 70%);
}

.pf a { text-decoration: none; }
.pf-in { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.pf-main { display: grid; gap: 30px; padding-top: 38px; padding-bottom: 30px; }

/* ── Markenblock ─────────────────────────────────────────────────────────── */
/* Höhe/Farbe der Wortmarke bringt _brandlogo.html selbst mit (dark=True → helle SVG). */
.pf-logo { display: inline-block; }
.pf-claim {
  margin: 15px 0 0;
  max-width: 38ch;
  font-size: 14px;
  line-height: 1.62;
  color: var(--pf-dim);
}
.pf-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(100deg, #ff8a3d 0%, #ff3d77 100%);
  box-shadow: 0 16px 32px -16px rgba(255, 61, 119, .65);
}
.pf-cta:hover { filter: brightness(1.06); }
/* Mikrozeile = Pflichtangaben zum Preis (§ 5a UWG). Schmal gehalten, damit sie
   auf 390 px in saubere Zeilen bricht.
   🧨 Farbe über --pf-dim, NICHT über ein eigenes Grau: gemessen am 15.08. lag ein
   handgesetztes #727d97/#6c7690 auf diesem Grund bei 4,07:1 und riss damit WCAG AA
   (4,5:1 für Text unter 18,66 px). --pf-dim liegt bei 5,54:1. Zurückhaltung kommt
   hier über die Schriftgröße, nicht über die Farbe. */
.pf-fine { margin: 11px 0 0; max-width: 44ch; font-size: 12.5px; line-height: 1.5; color: var(--pf-dim); }

/* ── Linkgruppen: mobil Akkordeon ────────────────────────────────────────── */
.pf-cols { display: grid; }
.pf-grp { border-top: 1px solid var(--pf-line); }
.pf-grp > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  color: var(--pf-ink);
  font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 15px;
}
.pf-grp > summary::-webkit-details-marker { display: none; }
.pf-grp > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid var(--pf-dim);
  border-bottom: 2px solid var(--pf-dim);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.pf-grp[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }

.pf-links { list-style: none; margin: 0; padding: 0 0 12px; }
/* 44 px Tap-Höhe — WCAG 2.2 § 2.5.8 verlangt 24 px, die Praxis 44. */
.pf-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--pf-txt);
  font-size: 15px;
  font-weight: 600;
}
.pf-links a:hover { color: var(--pf-ink); }

/* ── Rechtszeile: immer sichtbar, nie im Akkordeon ───────────────────────── */
.pf-legal { border-top: 1px solid var(--pf-line); }
.pf-legal-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 22px;
  padding-top: 12px;
  padding-bottom: 20px;
}
.pf-legal ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 0 20px;
}
.pf-legal ul a {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-dim);
}
.pf-legal ul a:hover { color: var(--pf-ink); text-decoration: underline; }
.pf-copy { margin: 0; font-size: 12.5px; color: var(--pf-dim); }

.pf a:focus-visible,
.pf summary:focus-visible { outline: 2px solid #ff8a3d; outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .pf-grp > summary::after { transition: none; }
}

/* ── Ab 720 px: aus den Klappgruppen werden Spalten ──────────────────────── */
@media (min-width: 720px) {
  .pf-cols { grid-template-columns: repeat(3, 1fr); gap: 32px; align-content: start; }
  .pf-grp { border-top: 0; }
  /* 🧨 min-height bleibt >= 24 px, auch wenn der Titel hier wie eine Überschrift
     aussieht: pointer-events:none nimmt ihm nur die MAUS, per Tab ist das <summary>
     weiterhin ein fokussierbares Bedienelement — und damit ein Ziel im Sinne von
     WCAG 2.2 § 2.5.8. Gemessen am 15.08. quer (844x390) waren es 17 px. */
  .pf-grp > summary {
    min-height: 24px;
    margin-bottom: 14px;
    cursor: default;
    pointer-events: none;
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
  }
  .pf-grp > summary::after { display: none; }
  .pf-links { padding: 0; }
  .pf-links a { min-height: 32px; font-size: 14.5px; }
  .pf-legal-in { padding-top: 14px; }
}

/* Ab 1024 px steht der Markenblock neben den Spalten statt darüber. */
@media (min-width: 1024px) {
  .pf-main {
    grid-template-columns: minmax(250px, 1fr) 2.35fr;
    gap: 56px;
    padding-top: 58px;
    padding-bottom: 44px;
  }
}