/* Die Fusszeile aller Seiten - die Rueckseite des Einbands.

   Eigene Datei, weil sie auf zwei Seitenfamilien sitzt: site.css (Startseite, Kontakt,
   Vergleichsseite) und styles.css (die Rechtstexte in der zentrierten Karte). Beide binden sie
   nach ihrem eigenen Stylesheet ein.

   Wie die Schale der App bleibt die Fusszeile in beiden Erscheinungsbildern Schiefer
   (DESIGN.md, "Dunkle Schale, immer"). Die Farben stehen deshalb hier als feste Werte und nicht
   als Variablen der beiden Stylesheets: deren --bg/--ink kehren sich im Dunkeln um, die
   Fusszeile nicht. Im Dunkeln faellt sie mit der Seite fast zusammen; die Haarlinie oben haelt
   beides auseinander. */

.fuss {
  --fuss-grund: #0f172a;
  --fuss-linie: #1e293b;
  --fuss-schrift: #e2e8f0;
  --fuss-leise: #94a3b8;
  --fuss-gruen: #4ade80;
  --fuss-kegel: #334155;

  background: var(--fuss-grund);
  color: var(--fuss-leise);
  border-top: 1px solid var(--fuss-linie);
  font-family: 'Nunito', 'Segoe UI', Roboto, system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  /* Die Rechtstexte zentrieren ihren Inhalt (styles.css) - die Fusszeile nicht. */
  text-align: left;
  color-scheme: dark;
}

.fuss__inner {
  display: grid;
  gap: 2.5rem;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 4.5rem) 1.5rem 2.5rem;
  box-sizing: border-box;
}

@media (min-width: 52rem) {
  .fuss__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
    gap: 4rem;
  }
}

/* ------------------------------------------------------------------ Marke */

.fuss__logo {
  display: inline-block;
  border-radius: 0.375rem;
}

.fuss__logo img {
  display: block;
  width: auto;
  height: 2.25rem;
}

.fuss__zeile {
  max-width: 22rem;
  margin: 1.25rem 0 0;
  text-wrap: pretty;
}

/* Der Kegelstand: neun Kegel in der Raute, wie sie auf der Bahn stehen. Der mittlere ist der
   Koenig und traegt als einziger die Markenfarbe. Gezeichnet als Inline-SVG, damit nichts
   nachgeladen wird. */
.fuss__stand {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: 1.75rem;
}

.fuss__stand circle {
  fill: var(--fuss-kegel);
}

.fuss__stand .fuss__koenig {
  fill: var(--fuss-gruen);
}

/* ------------------------------------------------------------------ Spalten */

.fuss__spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 2rem 1.5rem;
}

.fuss__titel {
  margin: 0 0 0.875rem;
  font-family: 'Poppins', 'Segoe UI', Roboto, system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--fuss-schrift);
}

.fuss__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

/* Die Verweise ohne Unterstrich, dafuer mit genug Hoehe zum Tippen (44px) - in der Liste ist
   klar, dass jede Zeile ein Ziel ist. Beim Zeigen tritt der Unterstrich in Gruen hinzu. */
.fuss__liste a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--fuss-leise);
  text-decoration: none;
  text-underline-offset: 0.3em;
  transition: color 0.15s ease;
}

@media (min-width: 52rem) {
  .fuss__liste a {
    min-height: 2rem;
  }
}

.fuss__liste a:hover {
  color: var(--fuss-schrift);
  text-decoration: underline;
  text-decoration-color: var(--fuss-gruen);
}

.fuss a:focus-visible {
  outline: 2px solid var(--fuss-gruen);
  outline-offset: 3px;
  border-radius: 0.375rem;
}

/* Verweise, die die Website verlassen, tragen einen kleinen Pfeil - gezeichnet, kein Zeichen. */
.fuss__raus {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

/* ------------------------------------------------------------------ Boden */

.fuss__boden {
  border-top: 1px solid var(--fuss-linie);
}

.fuss__boden p {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 1.5rem;
  box-sizing: border-box;
  font-size: 0.875rem;
}

.fuss ::selection {
  background: var(--fuss-gruen);
  color: var(--fuss-grund);
}