/**
 * Fussbereich — Entwurf 18.09.2026.
 *
 * Eigene Tokens mit festen Werten, kein var() aus biz-tokens.css: Die
 * Tokendatei wird nur auf /business/ geladen, der Fussbereich steht aber auf
 * jeder Seite. Genau daran ist die Bricks-Kopfzeile gescheitert.
 *
 * Hell statt dunkel — so entschieden am 18.09.2026. Der heutige dunkle
 * Fussbereich (#191923) stoesst auf /business/ direkt an eine Sektion in
 * vollem Blau (#0044ff); zwei verwandte Blautoene hart aneinander. Eine helle
 * Flaeche konkurriert nicht mit der Sektion darueber, sondern schliesst ab.
 */

.fuss {
  --fuss-flaeche: #f5f5f7;
  --fuss-flaeche-tief: #ececf0;   /* Newsletter-Band, eine Stufe tiefer */
  --fuss-text:    #191923;
  --fuss-grau:    #5c5c66;        /* dunkler als im Kopf: auf Hellgrau braucht es mehr */
  --fuss-linie:   rgba(25, 25, 35, 0.12);
  --fuss-gold:    #f3c74b;
  --fuss-rund:    10px;
  --fuss-schrift: 'Outfit', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Eigenes box-sizing statt des globalen Resets: Der kommt heute von Bricks.
   Faellt Bricks weg, rechneten alle Flaechen hier Innenabstand und Rahmen zu
   ihrer Breite dazu. Dieselbe Vorkehrung wie in kopf.css. */
.fuss, .fuss * { box-sizing: border-box; }

.fuss {
  background: var(--fuss-flaeche);
  color: var(--fuss-text);
  font-family: var(--fuss-schrift);
  /* Der obere Rand trennt die helle Flaeche sauber von einer hellen Sektion
     darueber. Unter der blauen Sektion faellt er nicht auf, dort traegt der
     Farbwechsel selbst. */
  border-top: 1px solid var(--fuss-linie);
}

/* Dasselbe Raster wie Kopfzeile und Seiteninhalt: 85 %, hoechstens 1440 px.
   So steht es in den Bricks-Containern und in inc/biz-shared/biz-base.css. */
.fuss-innen { width: 85%; max-width: 1440px; margin: 0 auto; }

/* ── Newsletter-Band ─────────────────────────────────────────── */
.fuss-nl { background: var(--fuss-flaeche-tief); }
.fuss-nl-innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem 2.5rem; flex-wrap: wrap;
  padding: 2.2rem 0;
}
.fuss-nl-titel {
  margin: 0 0 0.3rem; font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 700; letter-spacing: -0.02em;
}
.fuss-nl-zeile { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--fuss-grau); }
.fuss-nl-knopf {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.85em 1.7em;
  border-radius: 999px; background: var(--fuss-text); color: #fff;
  font-size: 1rem; font-weight: 700; text-decoration: none;
  transition: background-color 0.18s ease;
}
.fuss-nl-knopf:hover, .fuss-nl-knopf:focus-visible { background: #000; }

/* ── Hauptteil ───────────────────────────────────────────────── */
.fuss-haupt {
  display: grid; gap: 2.5rem 2rem;
  /* minmax(0, …) statt 1fr: Sonst ist die Mindestbreite einer Spur der
     min-content ihres Inhalts, und „Partnerveranstaltungen" (rund 169 px,
     keine Trennstelle) sprengte unter 387 px das Raster. Weil weder .fuss
     noch body ein overflow-x setzen, bekam die GANZE Seite dadurch einen
     waagerechten Bildlauf. Dieselbe Ursache und dieselbe Loesung wie bei
     den Leistungskacheln der Kopfzeile. */
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  padding: 3.5rem 0 2.5rem;
}

.fuss-logo { display: inline-block; text-decoration: none; }
/* 125 px wie im Kopf und wie im bisherigen Fussbereich. */
.fuss-logo img { display: block; width: 125px; height: auto; }
.fuss-logo-text { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--fuss-text); }

.fuss-claim { margin: 1.1rem 0 1.4rem; font-size: 0.98rem; line-height: 1.5; }
.fuss-claim-zeile { color: var(--fuss-grau); }

.fuss-adresse {
  font-style: normal; font-size: 0.95rem; line-height: 1.7; color: var(--fuss-grau);
  margin: 0 0 1.5rem;
}
.fuss-adresse a { color: var(--fuss-grau); text-decoration: none; }
.fuss-adresse a:hover, .fuss-adresse a:focus-visible { color: var(--fuss-text); text-decoration: underline; }
/* Telefon und Mailadresse sind am Handy die beiden wichtigsten Wege aus
   dem Fussbereich heraus — und waren mit 19 px die flachsten Ziele der
   Seite (gemessen 21.09.2026 bei 360, 375 und 390 px). WCAG 2.5.8 nennt
   24 px als Untergrenze. inline-block, damit das Polster wirkt und die
   Telefonnummer nicht mitten in der Vorwahl umbricht. */
.fuss-adresse a {
  display: inline-block;
  padding-block: 0.32rem;
  min-height: 24px;
}

/* ── Soziale Netzwerke ───────────────────────────────────────── */
.fuss-netzwerke { display: flex; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.fuss-netzwerke a {
  /* 44x44 — WCAG 2.5.8 verlangt mindestens 24x24, 44 ist die bequeme Groesse
     und dieselbe wie bei den Knoepfen der Kopfzeile. */
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; color: var(--fuss-grau);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.fuss-netzwerke a:hover, .fuss-netzwerke a:focus-visible {
  background: var(--fuss-text); color: #fff;
}
.fuss-netzwerke svg { display: block; }

/* ── Linkspalten ─────────────────────────────────────────────── */
.fuss-spalte-titel {
  margin: 0 0 1rem; font-size: 0.76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--fuss-grau);
}
.fuss-spalte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.1rem; }
/* minmax allein liesse das Wort nur aus der Spalte statt aus der Seite
   laufen — beides gehoert zusammen. */
.fuss-spalte a {
  display: block; padding: 0.42em 0;
  overflow-wrap: anywhere; hyphens: auto;
  font-size: 0.98rem; color: var(--fuss-text); text-decoration: none;
  transition: color 0.18s ease;
}
.fuss-spalte a:hover, .fuss-spalte a:focus-visible { text-decoration: underline; }

/* ── Untere Zeile ────────────────────────────────────────────── */
.fuss-unten { border-top: 1px solid var(--fuss-linie); }
.fuss-unten-innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap;
  padding: 1.3rem 0;
}
.fuss-copy { margin: 0; font-size: 0.9rem; color: var(--fuss-grau); }
.fuss-recht { display: flex; gap: 1.3rem; margin: 0; padding: 0; list-style: none; }
.fuss-recht a {
  font-size: 0.9rem; color: var(--fuss-grau); text-decoration: none;
  padding: 0.35em 0;
}
.fuss-recht a:hover, .fuss-recht a:focus-visible { color: var(--fuss-text); text-decoration: underline; }

.fuss-hoch {
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--fuss-linie);
  border-radius: 50%; background: transparent; cursor: pointer; color: var(--fuss-text);
  display: grid; place-items: center;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.fuss-hoch:hover, .fuss-hoch:focus-visible { background: var(--fuss-text); color: #fff; }
.fuss-hoch-pfeil {
  width: 9px; height: 9px;
  border-top: 2px solid currentColor; border-left: 2px solid currentColor;
  transform: rotate(45deg) translate(1px, 1px);
}
.fuss-hoch[hidden] { display: none; }

/* Sichtbarer Fokus ueberall — WCAG 2.4.11. */
.fuss a:focus-visible, .fuss button:focus-visible {
  outline: 3px solid #0044ff; outline-offset: 3px; border-radius: 4px;
}

.fuss .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ── Umbrueche ───────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .fuss-haupt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .fuss-haupt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; padding: 2.5rem 0 2rem; }
  .fuss-nl-innen { padding: 1.8rem 0; }
  .fuss-nl-knopf { width: 100%; }
  .fuss-unten-innen { justify-content: flex-start; }
}
/* Erst unter 360 px einspaltig. Bei 390 px waere der Fussbereich einspaltig
   rund 1550 px hoch — vier Bildschirmhoehen, durch die sich niemand scrollt,
   um ans Impressum zu kommen. Zweispaltig sind es rund 1200 px. Die beiden
   langen Beschriftungen („Arbeiten bei myKaiserstuhl", „AGB Dienstleistungen")
   brechen dort auf zwei Zeilen, das ist der bessere Tausch. */
@media (max-width: 359px) {
  .fuss-haupt { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .fuss-nl-knopf, .fuss-netzwerke a, .fuss-spalte a, .fuss-hoch, .fuss-adresse a {
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .fuss-nl, .fuss-hoch, .fuss-netzwerke { display: none; }
}