/* ══════════════════════════════════════════════════════════
   ai-footer.css — globaler Footer CI 2030 (ai-footer.tpl), 23.09.2026
   Aufbau nach Vorlage ROKA (D:\footer-idee.jpg): heller Grund, links leer,
   drei Linkspalten rechtsbuendig, darunter eine hellgraue Leiste.
   Eigene Klassen ai-ft-*, damit die alten .ai-footer-* Regeln aus
   td.css/beiz.css (dunkler Balken bzw. Comic-Schrift) nicht greifen.
   Farben mit Rueckfallwert, weil die --ai-* Tokens je nach Modus aus
   td.css oder beiz.css kommen.
   Typografie fest nach ci-2030-base.css (nicht geerbt — td.css, beiz.css und
   die Systemseiten setzen unterschiedliche body-Stapel): Roboto, Titel 700
   (wie h3), Links 15 px --td-body, Kleintext 13 px --td-muted. Kein 600 —
   der SemiBold-Schnitt kommt sonst nirgends vor und wirkt fremd.
   ══════════════════════════════════════════════════════════ */

.ai-ft {
  position: relative;
  background: #fff;
  color: var(--ai-text, #2A2E36);
  border-top: 1px solid var(--ai-line, #DCE4EC);
  /* Unten Platz fuer Bunki (beizbanner/bunki.tpl, position:fixed): Modus «unten»
     ragt 20 + 78 px hoch, Modus «bar» 66 px Leiste plus Tuer bis ~120 px.
     Ohne den Freiraum liegt Bunki am Seitenende ueber den Social-Links. */
  padding: 64px 0 var(--ai-ft-bunki-space, 144px);
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ai-ft-container {
  width: 100%;
  max-width: var(--ai-container, 1180px);
  margin-inline: auto;
  padding-inline: var(--ai-page-gutter, 20px);
}

/* Spalten: erste Spalte ist der leere Bereich, die drei Linkspalten rechts */
.ai-ft-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 250px));
  column-gap: 40px;
  row-gap: 32px;
}
.ai-ft-head {
  margin: 0 0 16px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--td-text, #2A2E36);
}
.ai-ft-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ai-ft-col li + li { margin-top: 8px; }
.ai-ft-col a {
  font-size: 15px;
  font-weight: 400;
  color: var(--td-body, #3F4A5A);
  text-decoration: none;
  transition: color .15s ease;
}
.ai-ft-col a:hover,
.ai-ft-col a:focus-visible {
  color: var(--ai-accent, #F08228);
}

/* Untere Leiste */
.ai-ft-bar {
  display: flex;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding: 16px 20px;
  background: #F3F5F7;
  border-radius: var(--ai-radius-sm, 6px);
}
.ai-ft-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  background: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ai-dark, #0F1A24);
}
.ai-ft-flag { display: block; flex: none; }
.ai-ft-copy {
  flex: 1 1 320px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--td-muted, #526173);
}
.ai-ft-copy a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.ai-ft-copy a:hover { color: var(--ai-accent, #F08228); }
.ai-ft-social {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ai-ft-social a,
.ai-ft-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ai-radius-sm, 6px);
  color: var(--ai-dark, #0F1A24);
  transition: color .15s ease, background .15s ease;
}
.ai-ft-social a:hover,
.ai-ft-social a:focus-visible {
  color: var(--ai-accent, #F08228);
}
.ai-ft-social svg,
.ai-ft-top svg { display: block; }
.ai-ft-top {
  background: var(--ai-dark, #0F1A24);
  color: #fff;
}
.ai-ft-top:hover,
.ai-ft-top:focus-visible {
  background: var(--ai-accent, #F08228);
  color: #fff;
}

/* Tablet: leerer Bereich faellt weg, drei Spalten ueber die volle Breite */
@media (max-width: 900px) {
  .ai-ft { padding-top: 48px; }
  .ai-ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ai-ft-spacer { display: none; }
}
/* Handy: Spalten untereinander, Leiste gestapelt */
@media (max-width: 575px) {
  .ai-ft-grid { grid-template-columns: 1fr; }
  .ai-ft-bar { gap: 12px; padding: 14px 16px; }
  .ai-ft-copy { flex-basis: 100%; order: 3; }
  .ai-ft-social { margin-left: auto; gap: 0; }
}