/* FBB – einheitliche Fußzeile für alle Seiten (onepage-Seiten und handgebaute Seiten).
   Markup: partials/fbb-footer.html → per scripts/fbb-footer.py in jede Seite eingesetzt
   (zwischen <!-- fbb-footer:start --> und <!-- fbb-footer:end -->), außerhalb von #root,
   die React-Hydrierung der onepage-Seiten bleibt also unberührt.

   Gestaltung nach den Weekly-News-Posts (Instagram/OG-Bilder): dunkles Band mit rotem
   Streifen oben rechts, gelbe Bereichs-Pille, Kapitälchen-Labels mit weiter Laufweite,
   Doppellinie, Listen mit Trennlinien, gelbe Kachel. Farben/Schriften kommen aus den
   --fbb-* Tokens in fbb-layout.css (Fallbacks hier, falls die Datei fehlt).

   Bereich: data-context="gf" (Gemeinderatsfraktion) / "wv" (Wählervereinigung) – gesetzt
   vom Generator nach dem Bereich der Seite, zur Laufzeit von fbb-footer.js mit der
   Hauptnavigation (#fbb-gnav) abgeglichen (Datenschutz: Bereich der Herkunftsseite).
   Elemente mit data-ctx gelten nur für ihren Bereich. */

/* Original-Fußzeile der onepage-Seiten (gelber Block mit Logo/Social/Impressum) ausblenden.
   Nur per CSS: das Markup gehört zur Hydrierung. */
#root .con-kit-section.fußzeile { display: none !important; }
/* Leere Schluss-Sektion ohne Inhalt (z. B. Stadträte: 200 px Leerraum vor der Fußzeile) */
#root .con-kit-section--last:not(:has(img, picture, video, iframe, a, button, input, textarea, select, form, svg, canvas, p, h1, h2, h3, h4, li)) { display: none !important; }

.fbb-footer {
  --ff-bg: var(--fbb-ink-site, #2b2a2b);
  --ff-bg-deep: var(--fbb-ink, #1e1d1e);
  --ff-text: #fff;
  --ff-muted: #c9c4ba;              /* 8,2 : 1 auf --ff-bg */
  --ff-line: rgba(255, 255, 255, .16);
  --ff-accent: var(--fbb-yellow, #ffd500);
  --ff-red: var(--fbb-red, #e40521);
  --ff-red-text: var(--fbb-red-deep, #b8041a);  /* Text auf Gelb: 4,8 : 1 */
  --ff-ink: var(--fbb-ink, #1e1d1e);
  --ff-display: var(--fbb-font-display, "Bree Serif", Georgia, serif);
  --ff-body: var(--fbb-font-body, "Bricolage Grotesque", system-ui, sans-serif);
  --ff-radius: var(--fbb-radius, 6px);
  --ff-track: var(--fbb-eyebrow-tracking, .14em);
  --ff-pad: clamp(20px, 6.6vw, 95px);    /* gleiche Seitenränder wie der onepage-Header */

  position: relative;
  display: block;
  margin: 0;
  background: var(--ff-bg);
  color: var(--ff-text);
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fbb-footer *, .fbb-footer *::before, .fbb-footer *::after { box-sizing: border-box; }
/* Gegen globale Regeln der Seiten (p, ul, h2, a …) abschirmen */
.fbb-footer :where(h2, p, ul, li, address) {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.fbb-footer ul { list-style: none; }
.fbb-footer address { font-style: normal; }
.fbb-footer a { color: inherit; text-decoration: none; }
.fbb-footer svg { display: block; flex: 0 0 auto; }
.fbb-footer img { max-width: 100%; }

/* Nur der aktuelle Bereich */
.fbb-footer[data-context="gf"] [data-ctx="wv"],
.fbb-footer[data-context="wv"] [data-ctx="gf"] { display: none !important; }

.fbb-footer__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Roter Streifen oben rechts (wie das Band der Weekly-News-Bilder) */
.fbb-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 6px;
  background: var(--ff-red);
}

.fbb-footer__wrap {
  max-width: calc(1250px + 2 * var(--ff-pad));
  margin: 0 auto;
  padding: 0 var(--ff-pad);
}
.fbb-footer__main .fbb-footer__wrap { padding-top: 64px; padding-bottom: 64px; }

/* ---------- Kopfzeile: Bereich + Social ---------- */
.fbb-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.fbb-footer__area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 18px;
  min-width: 0;
}
.fbb-footer__badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 16px 6px;
  border-radius: 999px;
  background: var(--ff-accent);
  color: var(--ff-ink);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--ff-track);
  text-transform: uppercase;
  white-space: nowrap;
}
.fbb-footer .fbb-footer__switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ff-accent);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.fbb-footer__switch svg { width: 16px; height: 16px; transition: transform .2s ease; }
.fbb-footer .fbb-footer__switch:hover { text-decoration: underline; text-underline-offset: 4px; }
.fbb-footer__switch:hover svg { transform: translateX(3px); }

.fbb-footer__social { display: flex; gap: 10px; }
.fbb-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ff-radius);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.fbb-footer__social svg { width: 20px; height: 20px; fill: currentColor; }
.fbb-footer__social a:hover { background: var(--ff-accent); border-color: var(--ff-accent); color: var(--ff-ink); }

/* Doppellinie wie in den Posts (kräftig + fein) */
.fbb-footer__rule {
  margin: 20px 0 48px;
  height: 9px;
  border-top: 4px solid rgba(255, 255, 255, .92);
  border-bottom: 1.5px solid rgba(255, 255, 255, .5);
}

/* ---------- Raster ---------- */
.fbb-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.35fr);
  gap: 48px 40px;
  align-items: start;
}

.fbb-footer__logo {
  display: inline-block;
  padding: 14px 18px;
  border-radius: var(--ff-radius);
  background: #fff;
  line-height: 0;
}
.fbb-footer__logo img { display: block; width: 168px; height: auto; }
.fbb-footer__claim {
  margin-top: 26px !important;
  font-family: var(--ff-display) !important;
  font-size: 24px !important;
  line-height: 1.22 !important;
  letter-spacing: -.2px !important;
  color: #fff !important;
  text-wrap: pretty;
}
.fbb-footer__claim::after { /* kurzer gelber Balken unter der Überschrift */
  content: "";
  display: block;
  width: 56px;
  height: 6px;
  margin-top: 18px;
  background: var(--ff-accent);
}
.fbb-footer__lead {
  margin-top: 18px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--ff-muted) !important;
  max-width: 34ch;
}

.fbb-footer__eyebrow {
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-family: var(--ff-body) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: var(--ff-track) !important;
  text-transform: uppercase !important;
  color: var(--ff-accent) !important;
}

/* Navigation: Liste mit Trennlinien */
.fbb-footer__links li { border-bottom: 1px solid var(--ff-line); }
.fbb-footer__links li:first-child { border-top: 1px solid var(--ff-line); }
.fbb-footer__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 10px 0;
  font-family: var(--ff-display);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.2px;
  color: #fff;
}
.fbb-footer__links a::after { /* Pfeil, erscheint bei Hover/aktuell */
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity .15s ease, transform .2s ease;
}
.fbb-footer__links a:hover { color: var(--ff-accent); }
.fbb-footer__links a:hover::after { opacity: 1; transform: translateX(2px) rotate(45deg); }
.fbb-footer__links a[aria-current="page"] { color: var(--ff-accent); }
.fbb-footer__links a[aria-current="page"]::after {
  width: 8px; height: 8px; border: 0; border-radius: 50%;
  background: var(--ff-accent); transform: none; opacity: 1;
}

/* Kontakt: Label-Spalte + Wert, Trennlinien wie die Zahlen-Liste der Posts */
.fbb-footer__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 2px 14px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--ff-line);
}
.fbb-footer__row:first-child { border-top: 1px solid var(--ff-line); }
.fbb-footer__key {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--ff-track);
  text-transform: uppercase;
  color: var(--ff-muted);
}
.fbb-footer__val {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
  overflow-wrap: anywhere;
}
a.fbb-footer__val {
  position: relative;
  justify-self: start;
  text-decoration: underline;
  text-decoration-color: rgba(255, 213, 0, .55);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
a.fbb-footer__val::before { /* Tippfläche ≥ 44 px, ohne die Zeile zu strecken */
  content: "";
  position: absolute;
  inset: -11px -6px;
}
.fbb-footer__nw { white-space: nowrap; }
a.fbb-footer__val:hover { color: var(--ff-accent); text-decoration-color: currentColor; }

/* Gelbe Kachel „Mitmachen“ */
.fbb-footer__tile {
  padding: 28px 26px 28px;
  border-radius: var(--ff-radius);
  background: var(--ff-accent);
  color: var(--ff-ink);
}
.fbb-footer__kicker {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: var(--ff-track) !important;
  text-transform: uppercase !important;
  color: var(--ff-red-text) !important;
}
.fbb-footer__tile-title {
  margin-top: 10px !important;
  font-family: var(--ff-display) !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  letter-spacing: -.3px !important;
  color: var(--ff-ink) !important;
  text-wrap: balance;
}
.fbb-footer__tile-text {
  margin-top: 12px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--fbb-ink-soft, #3a383a) !important;
}
.fbb-footer__tile-text i { font-style: italic; font-weight: 600; }
.fbb-footer__actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
.fbb-footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 20px;
  border-radius: var(--ff-radius);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.fbb-footer__btn svg { width: 16px; height: 16px; }
.fbb-footer .fbb-footer__btn--member { background: var(--ff-ink); color: #fff; }
.fbb-footer__btn--member svg { color: var(--ff-accent); transition: transform .2s ease; }
.fbb-footer .fbb-footer__btn--member:hover { background: #000; }
.fbb-footer__btn--member:hover svg { transform: translateX(3px); }
.fbb-footer .fbb-footer__btn--line { box-shadow: inset 0 0 0 2px var(--ff-ink); color: var(--ff-ink); }
.fbb-footer .fbb-footer__btn--line:hover { background: rgba(30, 29, 30, .08); }
/* „Mitglied werden“: das Formular endet ohne Innenabstand – Luft bis zur Fußzeile */
.fbb-page-mitglied .fbb-footer { margin-top: clamp(48px, 6vw, 80px); }
/* Auf „Mitglied werden“ selbst ist der Button überflüssig (wie im Header) */
.fbb-page-mitglied .fbb-footer__btn--member { display: none; }

/* ---------- Rechtliches ---------- */
.fbb-footer__legal { background: var(--ff-bg-deep); }
.fbb-footer__legal .fbb-footer__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 32px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.fbb-footer__copy {
  padding: 12px 0 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--ff-muted) !important;
}
.fbb-footer__legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; }
.fbb-footer__legal-links li[hidden] { display: none !important; }
.fbb-footer__legal-links a,
.fbb-footer__legal-links button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.fbb-footer__legal-links a:hover,
.fbb-footer__legal-links button:hover { color: var(--ff-accent); text-decoration-color: currentColor; }
.fbb-footer__legal-links a[aria-current="page"] { color: var(--ff-accent); text-decoration-color: currentColor; }

/* Fokus gut sichtbar: gelb auf dunkel, dunkel auf Gelb */
.fbb-footer a:focus-visible,
.fbb-footer button:focus-visible {
  outline: 2px solid var(--ff-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.fbb-footer__tile a:focus-visible { outline-color: var(--ff-ink); }
.fbb-footer__social a:focus-visible { border-radius: var(--ff-radius); }

/* Breite Ansicht (4 Spalten): Kontakt-Label über dem Wert, damit die E-Mail-Adresse nicht zerfällt */
@media (min-width: 1280px) {
  .fbb-footer__row { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 12px 0 13px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1279.98px) {
  .fbb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 40px; }
}

/* ---------- Handy ---------- */
@media (max-width: 679.98px) {
  .fbb-footer__main .fbb-footer__wrap { padding-top: 48px; padding-bottom: 44px; }
  .fbb-footer::before { width: 64%; height: 5px; }
  /* Pille über die volle Breite, darunter „Zur …“ links und Social rechts */
  .fbb-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; }
  .fbb-footer__area { display: contents; }
  .fbb-footer__badge { grid-column: 1 / -1; justify-self: start; }
  .fbb-footer .fbb-footer__switch { grid-column: 1; grid-row: 2; }
  .fbb-footer__social { grid-column: 2; grid-row: 2; }
  .fbb-footer__rule { margin: 16px 0 36px; }
  .fbb-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fbb-footer__logo img { width: 150px; }
  .fbb-footer__claim { font-size: 22px !important; margin-top: 22px !important; }
  .fbb-footer__lead { max-width: none; }
  .fbb-footer__tile { padding: 24px 20px 22px; }
  .fbb-footer__tile-title { font-size: 24px !important; }
  .fbb-footer__legal .fbb-footer__wrap { flex-direction: column; align-items: flex-start; gap: 0; padding-top: 12px; padding-bottom: 16px; }
  .fbb-footer__copy { padding-bottom: 4px !important; }
  .fbb-footer__legal-links { gap: 0 22px; }
}
@media (max-width: 359.98px) {
  .fbb-footer__row { grid-template-columns: minmax(0, 1fr); }
  .fbb-footer__badge { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .fbb-footer *, .fbb-footer *::after { transition: none !important; }
}
@media print {
  .fbb-footer { background: #fff; color: #000; }
  .fbb-footer::before, .fbb-footer__social, .fbb-footer__switch, .fbb-footer__tile, .fbb-footer__rule { display: none !important; }
  .fbb-footer__legal { background: #fff; }
  .fbb-footer * { color: #000 !important; }
}