/* ─── Gemeinsamer Footer ──────────────────────────────────────────
   Gehoert zu templates/partials/_footer.html und wird von allen
   Basistemplates geladen: Werbeseite, Rechtstexte, Willkommensseite,
   Projektauswahl, GesundheitsCoach, Saatkalender und Trading Journal.

   Warum eine eigene Datei und nicht ein Abschnitt in style.css:
   Das Trading Journal laeuft auf data-bs-theme="dark". style.css
   faerbt global den body hell ein und wuerde dessen Farbschema
   zerlegen. Diese Datei enthaelt deshalb nur, was der Footer braucht,
   und kommt ohne Bootstrap aus — die Willkommensseite laedt keins.

   Die Farbwerte kommen aus static/css/marke.css, die vorher geladen
   werden muss.
   ──────────────────────────────────────────────────────────────── */

.sl-footer {
  background: var(--sl-blue);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2rem 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.83rem;
  /* Ausdruecklich, nicht geerbt: Die Willkommensseite zentriert ihren
     gesamten body, und ohne diese Zeile ruecken Wortmarke und
     Copyright dort in die Mitte ihrer Spalte statt an den Rand. */
  text-align: left;
  /* 0.6 statt der frueheren 0.5: Auf --sl-blue ergibt 0.5 einen
     Kontrast von 4,14:1 und verfehlt damit die 4,5:1 der WCAG AA
     fuer Text dieser Groesse. 0.6 kommt auf 5,25:1. */
  color: rgba(255, 255, 255, 0.6);
}

/* Auf der Willkommensseite liegt der Footer auf demselben Blau, das
   dort schon der Seitenhintergrund ist. Eine eigene Flaeche wuerde
   die Farbverlaeufe des Hintergrunds abschneiden und eine sichtbare
   Kante quer ueber die Seite ziehen — also nur die Trennlinie. */
.sl-footer--transparent {
  background: transparent;
}

/* Entspricht Bootstraps .container samt Haltepunkten, damit der
   Footer buendig unter dem uebrigen Seiteninhalt sitzt. Nachgebaut,
   weil die Willkommensseite kein Bootstrap laedt. */
.sl-footer-inner {
  width: 100%;
  margin-inline: auto;
  padding-inline: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 576px)  { .sl-footer-inner { max-width: 540px; } }
@media (min-width: 768px)  { .sl-footer-inner { max-width: 720px; } }
@media (min-width: 992px)  { .sl-footer-inner { max-width: 960px; } }
@media (min-width: 1200px) { .sl-footer-inner { max-width: 1140px; } }
@media (min-width: 1400px) { .sl-footer-inner { max-width: 1320px; } }

/* Unterhalb von 768px stehen die drei Teile linksbuendig
   untereinander — genau wie vorher mit col-md-4. */
.sl-footer-inner > * {
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  .sl-footer-inner {
    gap: 0;                       /* sonst passen drei Drittel nicht nebeneinander */
  }
  .sl-footer-inner > * {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .sl-footer-mitte  { text-align: center; }
  .sl-footer-rechts { justify-content: flex-end; }
}

.sl-footer .brand {
  font-family: 'Lora', serif;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  text-decoration: none;
}

.sl-footer .brand span { color: var(--sl-sand); }

.sl-footer-rechts {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.sl-footer a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.sl-footer a:hover { color: var(--sl-sand); }