/* ============================================================
   mahnbescheid - Abbinder

   Die unterste Zeile der Fußzeile: rechtliche Links, Copyright und die
   beiden Marken. Sie steht in template-parts/footer-unten.php und wird von
   BEIDEN Fußzeilen benutzt - der vollständigen (footer.php) und der
   schlanken des Bestellformulars (footer-lean.php).

   Bis zum 23.09.2026 stand ihre Gestaltung deshalb doppelt: einmal in
   landing.css, einmal in bestellformular.css. Beinahe wortgleich - aber
   eben nur beinahe. `.foot-pay` trug in der einen Datei `display: flex;
   gap: 10px`, in der anderen nur `flex-shrink: 0`; auf /beantragen/ lagen
   die beiden Marken deshalb 3 px auseinander statt 10. Genau dieselbe
   Falle wie bei der Navigation zwei Tage zuvor.

   Was hier NICHT steht: die Polsterung des <footer> selbst. Die
   vollständige Fußzeile beginnt mit 56 px Luft über dem Markenblock, die
   schlanke mit 28 - das ist ein echter Unterschied und bleibt in den
   Stylesheets der Seiten.

   Wird nach dem Stylesheet der Seite geladen, damit deren allgemeine
   Regeln diese hier nicht schlagen (siehe functions.php).
   ============================================================ */

footer{
  background: var(--c-dark);
  color: oklch(0.78 0.008 252);
  font-size: 14px;
}
footer a{ color: oklch(0.86 0.008 252); text-decoration: none; }
footer a:hover{ color: #fff; text-decoration: underline; }

/* Die schlanke Fußzeile trägt sechs Rechtslinks; zwischen 769 und rund
   1000 px passten die zusammen mit den beiden Marken nicht in eine Zeile.
   Weil `.foot-pay` nicht schrumpfen darf, wurde die zweite Marke aus dem
   Bild geschoben - bei 800 px war „Überweisung" am rechten Rand
   abgeschnitten (23.09.2026). Kein Dokument-Überlauf, deshalb fiel es
   keiner Prüfung auf.
   Gelöst wird das INNEN: Die Linkzeile bricht um, und das linke Stück darf
   dafür schrumpfen (min-width: 0). Ein flex-wrap am Abbinder selbst wäre
   der falsche Hebel - Flexbox bricht lieber um, als zu schrumpfen, und die
   Marken landeten dann auch dort in einer eigenen Zeile, wo sie passen. */
.foot-bottom{
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  /* 0.60 ergibt gegen --c-dark nur 4,05:1 und fällt damit unter die 4,5:1,
     die WCAG 2.1 AA für Text unter 18,66px verlangt. 0.65 sind 4,95:1. */
  color: oklch(0.65 0.008 252); font-size: 13px;
}
.foot-bottom-left{ display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.foot-legal{ display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-pay{ flex-shrink: 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.foot-pay-badge{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-dark-border);
  border-radius: 5px;
  padding: 6px 11px;
  color: oklch(0.8 0.008 252);
  font-size: 12.5px; font-weight: 500;
}
.foot-pay-badge svg{ width: 22px; height: 22px; }

@media (max-width: 768px){
  .foot-bottom{ flex-direction: column; gap: 10px; align-items: flex-start; padding: 18px 0; font-size: 12px; }
  .foot-legal{ flex-wrap: wrap; gap: 10px 14px; font-size: 12px; }
  .foot-pay{ justify-content: flex-start; }
  .foot-pay-badge{ font-size: 11.5px; padding: 6px 9px; }
}

/* sRGB-Rückfall für Browser ohne OKLCH */
@supports not (color: oklch(0 0 0)){
  footer{ color: #B4B8BC; }
  footer a{ color: #CDD1D6; }
  .foot-bottom{ color: #8C9094; }
  .foot-pay-badge{ color: #C6CACE; }
}