/* ============================================================
   Datei:        assets/css/shared/fusszeile.css
   Seite:        alle Seiten
   Zweck:        Fußzeile mit Rechtliches-Links, Jahr und Schalter für Animationen
   Abhängig von: assets/css/shared/variablen.css, assets/css/shared/layout.css
   Genutzt von:  alle HTML-Seiten (Inhalt kommt von assets/js/shared/fusszeile.js)
   ============================================================ */

/* --- 1. Rahmen --- */
.fusszeile {
  margin-top: var(--abstand-5);
  border-top: 1px solid var(--farbe-rahmen);
  background: color-mix(in srgb, var(--farbe-flaeche) 70%, transparent);
  color: var(--farbe-text-gedaempft);
  font-size: var(--schrift-klein);
}

.fusszeile__innen {
  display: grid;
  gap: var(--abstand-3);
  padding-block: var(--abstand-4);
}

/* --- 2. Links --- */
.fusszeile__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1) var(--abstand-4);
}

.fusszeile__link {
  color: var(--farbe-text-gedaempft);
}

.fusszeile__link:hover {
  color: var(--farbe-text);
}

/* --- 3. Schalter "Animationen" --- */
.fusszeile__schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  justify-self: start;
  padding: var(--abstand-1) var(--abstand-2);
  background: transparent;
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius-rund);
  color: var(--farbe-text-gedaempft);
  cursor: pointer;
}

.fusszeile__schalter:hover {
  color: var(--farbe-text);
}

.fusszeile__spur {
  position: relative;
  width: 2rem;
  height: 1.1rem;
  background: var(--farbe-flaeche-hell);
  border-radius: var(--radius-rund);
  transition: background var(--dauer-mittel);
}

.fusszeile__knopf {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.8rem;
  height: 0.8rem;
  background: var(--farbe-text-gedaempft);
  border-radius: 50%;
  transition: transform var(--dauer-mittel) var(--ease), background var(--dauer-mittel);
}

.fusszeile__schalter[aria-checked="true"] .fusszeile__spur {
  background: color-mix(in srgb, var(--akzent-1) 40%, var(--farbe-flaeche-hell));
}

.fusszeile__schalter[aria-checked="true"] .fusszeile__knopf {
  background: var(--akzent-1);
  transform: translateX(0.9rem);
}

/* --- 4. Noscript-Fallback --- */
.fusszeile-fallback {
  display: flex;
  gap: var(--abstand-3);
  padding: var(--abstand-3);
}

/* --- 5. Tablet und Desktop (ab 640 px) --- */
@media (min-width: 640px) {
  .fusszeile__innen {
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--abstand-4);
  }
}