/* ══════════════════════════════════════════════════════════════════
   SPT Footer v1 — Swiss Prime Taste AG
   Gemeinsamer Footer für spoti.ch/gastrohub.ch, swissprimetaste.ch,
   vending.spoti.ch, rtc.spoti.ch und akquise.spoti.ch.

   Bewusst gekapselt: eigene Variablen mit Präfix --sptf-, alle Regeln
   unter .spt-footer. Die Datei erbt nichts vom CSS der Seite und
   überschreibt nichts davon. Änderungen einmal hier machen und in alle
   Repos kopieren; der Marker SPT-FOOTER v1 im HTML macht das
   automatisierbar.
   Farben und Typografie: Design System Swiss Prime Taste, Abschnitt 2/3.
   ══════════════════════════════════════════════════════════════════ */

.spt-footer {
  --sptf-bg:     #16150F;
  --sptf-border: #262521;
  --sptf-gold:   #D9B44A;
  --sptf-gold-h: #C79E33;
  --sptf-text:   #FDFBF7;
  --sptf-muted:  #9A948A;
  --sptf-body:   'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --sptf-mono:   'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  box-sizing: border-box;
  background: var(--sptf-bg);
  border-top: 1px solid var(--sptf-border);
  color: var(--sptf-text);
  font-family: var(--sptf-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  margin: 0;
  padding: 36px 20px calc(36px + env(safe-area-inset-bottom, 0px));
  text-align: left;
  text-transform: none;
}
.spt-footer *, .spt-footer *::before, .spt-footer *::after { box-sizing: border-box; }

.spt-footer__inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1.35fr;
  gap: 36px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  width: auto;
}
@media (max-width: 900px) { .spt-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 620px) { .spt-footer__inner { grid-template-columns: 1fr; gap: 24px; } }

.spt-footer__col { min-width: 0; }
/* :not() statt hoeherer Spezifitaet: die Element-Regel .spt-footer p schlug
   sonst .spt-footer__label und faerbte das Mono-Label grau statt gold. */
.spt-footer p:not(.spt-footer__label) {
  margin: 0 0 4px; padding: 0; font-size: 13px; line-height: 1.6; color: var(--sptf-muted);
}
.spt-footer p:last-child { margin-bottom: 0; }

.spt-footer__logo { display: block; height: 62px; width: auto; max-width: 100%; margin: 0 0 14px; border: 0; }
.spt-footer__tagline { color: var(--sptf-muted); }

.spt-footer__label {
  font-family: var(--sptf-mono);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sptf-gold);
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}

.spt-footer a { color: var(--sptf-gold); text-decoration: none; transition: color 150ms cubic-bezier(.2,0,0,1); }
.spt-footer a:hover { color: var(--sptf-gold-h); text-decoration: none; }
.spt-footer a:focus-visible { outline: 2px solid var(--sptf-gold); outline-offset: 2px; }
.spt-footer__num { font-family: var(--sptf-mono); font-variant-numeric: tabular-nums; }

.spt-footer__platforms { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.spt-footer__platforms li { margin: 0; padding: 0; }
.spt-footer__platforms a, .spt-footer__platforms .spt-footer__self {
  display: block; font-size: 13px; font-weight: 600; line-height: 1.35;
}
.spt-footer__platforms .spt-footer__self { color: var(--sptf-text); }
.spt-footer__platforms .spt-footer__self::after {
  content: ' — Sie sind hier';
  font-family: var(--sptf-mono); font-size: 10px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sptf-muted);
}
.spt-footer__note { display: block; color: var(--sptf-muted); font-size: 12px; line-height: 1.45; font-weight: 400; }

.spt-footer__base {
  max-width: 1280px; margin: 28px auto 0; padding-top: 18px;
  border-top: 1px solid var(--sptf-border);
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  align-items: baseline; justify-content: space-between;
}
.spt-footer__base p { color: var(--sptf-muted); font-size: 12px; }
.spt-footer__base .spt-footer__meta { text-align: right; }
@media (max-width: 620px) { .spt-footer__base .spt-footer__meta { text-align: left; } }

/* ── Kompakte Variante ────────────────────────────────────────────
   Fuer Arbeitswerkzeuge wie das Cockpit, wo der Footer kein Ziel ist
   sondern nur nicht fehlen darf. Gleiche Inhalte, gleiche Farben, nur
   flacher: die sechs Plattformen laufen in mehreren Spalten statt
   untereinander, das war der Hauptteil der Hoehe. Klasse zusaetzlich
   zu .spt-footer setzen - so bleibt diese Datei in allen Repos gleich.
   ──────────────────────────────────────────────────────────────── */

.spt-footer--kompakt { padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px)); }
.spt-footer--kompakt .spt-footer__inner { grid-template-columns: 1fr 1fr 2.4fr; gap: 28px; }
/* Wortmarke bleibt auf voller Groesse - die Logospalte ist nicht die
   hoechste, kleiner machen wuerde also keine Hoehe sparen. */
.spt-footer--kompakt .spt-footer__logo { margin-bottom: 10px; }
.spt-footer--kompakt .spt-footer__label { margin-bottom: 8px; }

/* Der eigentliche Hebel: aus einer langen Spalte werden drei kurze. */
.spt-footer--kompakt .spt-footer__platforms {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 22px;
}
.spt-footer--kompakt .spt-footer__base { margin-top: 18px; padding-top: 12px; }

@media (max-width: 1100px) {
  .spt-footer--kompakt .spt-footer__platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .spt-footer--kompakt .spt-footer__inner { grid-template-columns: 1fr 1fr; gap: 22px; }
  /* Die Plattformen ueber die ganze Breite, sonst wird die Spalte wieder lang. */
  .spt-footer--kompakt .spt-footer__col--platforms { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .spt-footer--kompakt .spt-footer__inner { grid-template-columns: 1fr; gap: 20px; }
  .spt-footer--kompakt .spt-footer__platforms { grid-template-columns: 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) { .spt-footer a { transition: none; } }

/* ── Breite Variante mit eigenen Linkspalten ──────────────────────
   Fuer Seiten, die neben Adresse und Plattformen eigene Rubriken im
   Fuss haben (taragona: Produkte, Ratgeber, Rechtliches). Zusaetzlich
   zu .spt-footer--kompakt setzen. Bleibt ein flaches Band: die
   Plattformen laufen zweispaltig, damit keine Spalte lang wird.
   ──────────────────────────────────────────────────────────────── */

.spt-footer--breit .spt-footer__inner,
.spt-footer--breit .spt-footer__base { max-width: 1360px; }

.spt-footer--breit .spt-footer__inner {
  /* Die Adressspalte braucht Platz fuer das Mono-Label «Swiss Prime
     Taste AG» in einer Zeile - mit Sperrung ist das breiter als es
     aussieht. «Rechtliches» hat die kuerzesten Links und gibt ab. */
  grid-template-columns: 1fr 1.28fr 1fr 1fr 0.68fr 2.2fr;
  gap: 24px;
}
.spt-footer--breit .spt-footer__platforms {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
}

/* Liste gestapelter Links, wie sie eine eigene Rubrik braucht. */
.spt-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.spt-footer__links li { margin: 0; padding: 0; }
.spt-footer__links a { display: block; font-size: 13px; line-height: 1.45; }

@media (max-width: 1240px) {
  .spt-footer--breit .spt-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spt-footer--breit .spt-footer__col--platforms { grid-column: 1 / -1; }
  .spt-footer--breit .spt-footer__platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .spt-footer--breit .spt-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spt-footer--breit .spt-footer__platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .spt-footer--breit .spt-footer__inner { grid-template-columns: 1fr; }
  .spt-footer--breit .spt-footer__platforms { grid-template-columns: 1fr; gap: 10px; }
}