/* ==========================================================================
   Fußzeile — eine für alle Kundenseiten (Mockup „Vorschlag A", 2026-10-10)

   Das Markup steht in jeder Seite wortgleich (Test:
   tests/test_fusszeile.py). Die Regeln stehen nur hier. Die Seiten laden
   unterschiedliche Haupt-Stylesheets (site.css, verkaufsseite.css,
   workbook-online.css), deshalb hat die Fußzeile eine eigene Datei und
   verlässt sich auf keine Farbvariable der Seite.

   Kontrast auf #efede3, gemessen (WCAG 2.x):
     Fließtext und Links  #2f3e34   9,62 : 1
     Überschriften        #3f6b50   5,22 : 1
     Zusatzzeilen         #56655a   5,26 : 1
   Das Mockup nahm #69786d für die Zusatzzeilen. Das sind 3,97 : 1 und damit
   zu wenig.
   ========================================================================== */

.fz {
  --fz-text: #2f3e34;
  --fz-akzent: #3f6b50;
  --fz-gedaempft: #56655a;
  --fz-linie: rgba(78, 122, 94, .18);
  border-top: 1px solid var(--fz-linie);
  background: #efede3;
  color: var(--fz-text);
  font-size: 1rem;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}

.fz-inhalt {
  width: min(100% - 2.5rem, var(--content, 70rem));
  margin-inline: auto;
}

.fz a {
  color: var(--fz-text);
  text-decoration: none;
}
.fz a:hover { color: var(--fz-akzent); text-decoration: underline; }
.fz a:focus-visible {
  color: var(--fz-akzent);
  text-decoration: underline;
  outline: 2px solid var(--fz-akzent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- oben: Marke und drei Spalten ---------- */

.fz-oben {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem 2.5rem;
  padding-block: 2.6rem 2.2rem;
}

.fz-marke img { display: block; width: auto; height: 2rem; max-width: 100%; }
.fz-marke p {
  max-width: 26ch;
  margin: .9rem 0 0;
  color: var(--fz-gedaempft);
  font-size: .9rem;
  line-height: 1.5;
}

.fz .fz-knopf {
  display: inline-block;
  margin-top: 1.1rem;
  padding: .55rem 1rem;
  border: 1px solid var(--fz-akzent);
  border-radius: 999px;
  color: var(--fz-akzent);
  font-size: .85rem;
  font-weight: 800;
}
.fz .fz-knopf:hover,
.fz .fz-knopf:focus-visible {
  background: var(--fz-akzent);
  color: #fff;
  text-decoration: none;
}

.fz .fz-titel {
  margin: 0 0 .8rem;
  color: var(--fz-akzent);
  font-family: inherit;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1.4;
  text-transform: uppercase;
}

.fz-spalte ul {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fz-spalte li { margin: 0; padding: 0; }
.fz-spalte a { font-size: .92rem; font-weight: 600; }

/* Der Link „Cookie-Einstellungen" hängt assets/consent.js ans Ende der
   ersten Spalte (`footer nav`), nicht in die Liste. Er soll wie ein Eintrag
   der Liste aussehen. */
.fz-spalte > a {
  display: block;
  margin-top: .55rem;
}

/* ---------- unten: Firma und Hinweis ---------- */

.fz-unten { border-top: 1px solid var(--fz-linie); }
.fz-unten .fz-inhalt {
  padding-block: 1.1rem 1.6rem;
  color: var(--fz-gedaempft);
  font-size: .8rem;
  line-height: 1.55;
}
.fz-unten p { margin: 0; }
.fz-unten p + p { margin-top: .45rem; }

/* ---------- schmale Bildschirme ---------- */

@media (max-width: 860px) {
  .fz-oben { grid-template-columns: 1fr 1fr; }
  .fz-marke { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .fz-oben { gap: 1.6rem 1.2rem; }
  .fz-spalte:last-child { grid-column: 1 / -1; }
}

@media print {
  .fz-oben { display: none; }
}