/* Kopie aus der gerenderten Astro-Website (http://127.0.0.1:8099, site/navigation/ui/fuss.css, kompiliert mit Autoprefixer), Stand 07.10.2026. Nicht von Hand angleichen, sondern neu kopieren. */
/* Footer der Agentur-Website (Welle N1-C) — Maße nach sunzinet.com
   (docs/positionierung/design/sunzinet-navigation.md, 7.8). Fläche
   --bm-dunkel, Rechtsleiste --bm-dunkel-erhaben, Back-to-Top-Kachel. Auf
   dunklen Seiten (Fuss.tsx, .bm-fuss--dunkel) stehen beide im Grundton der
   Seite, getrennt durch eine feine Linie (P2-A). Unterstriche
   der Links ziehen bei Hover/Fokus auf (site/design/bewegung.css). Abweichung vom
   Vorbild: Rechtsleisten-Text in --bm-fuss-text (Kontrast ≥ 4,5:1; P1-A:
   --bm-text-zart kam in der neuen Farbwelt nur auf 4,0:1). */

/* .bm-neu.bm-fuss (0,2,0): schlägt die Fläche von .bm-neu (tokens.css)
   unabhängig von der Ladereihenfolge. */
.bm-neu.bm-fuss {
  --bm-fuss-text: var(--bm-text-invers-leise);
  --bm-fuss-kachel: 80px;
  /* Fokusrahmen: der Fuß steht immer auf Dunkel (tokens.css »Fokusrahmen je Fläche«) */
  --bm-fokus: var(--bm-fokus-auf-dunkel);
  --bm-fokus-gegen: var(--bm-fokus-auf-hell);
  background: var(--bm-dunkel);
  color: var(--bm-text-invers);
  font-family: var(--bm-font);
}
@media (min-width: 768px) { .bm-neu.bm-fuss { --bm-fuss-kachel: 102px; } }
/* Dunkle Seite (Case-Detail, Insights-Übersicht, 404): kein hellerer Ton
   unter dem dunklen Inhalt – Fuß und Rechtsleiste im Grundton der dunklen
   Flächen, die Leiste setzt sich über eine feine Linie ab. */
.bm-neu.bm-fuss.bm-fuss--dunkel { background: var(--bm-flaeche-dunkel); }
.bm-fuss--dunkel .bm-fuss__leiste { background: var(--bm-flaeche-dunkel); box-shadow: inset 0 1px 0 var(--bm-linie-invers); }

/* Panel und Rechtsleiste = Wrapper des Fundaments (.wrap: --bm-inhalt-max
   + --bm-rand) – fluchten mit Kopf und Inhalt; nur die Flächen laufen durch. */
.bm-fuss__panel {
  max-width: var(--bm-rahmen-max);
  margin-inline: auto;
  padding: clamp(5rem, 8vw, 8rem) var(--bm-rand) 4.5rem;
}

/* ── CTA-Band ─────────────────────────────────────────────────────────── */
.bm-fuss__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.bm-fuss__cta-text { max-width: 52rem; }
.bm-fuss .bm-fuss__titel {
  margin: 0 0 40px;
  font-family: var(--bm-font-titel);   /* Titelschrift (PL-1) */
  font-size: var(--bm-t-display);
  font-weight: var(--bm-g-normal);
  font-synthesis: none;
  line-height: var(--bm-zh-snug);
  letter-spacing: var(--bm-sp-leicht);
  color: var(--bm-text-invers);
  hyphens: manual;
  text-wrap: balance;
}
.bm-fuss__siegel { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; list-style: none; margin: 0; padding: 0; }
.bm-fuss__siegel img { height: 50px; width: auto; }
@media (min-width: 1024px) { .bm-fuss__siegel img { height: 120px; } }

/* ── Link-Spalten (Seitenstruktur) ────────────────────────────────────── */
.bm-fuss__struktur {
  margin-top: clamp(64px, 8vw, 112px);
  border-top: 1px solid var(--bm-linie-invers);
}
.bm-fuss__panel > .bm-fuss__struktur:first-child { margin-top: 0; }

.bm-fuss__spalte { border-bottom: 1px solid var(--bm-linie-invers); }
.bm-fuss__spaltenkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.bm-fuss .bm-fuss__spaltentitel {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;          /* Tippfläche 44 px, ab 768 px 24 px */
  font-size: var(--bm-t-nav);
  font-weight: var(--bm-g-mittel);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-knopf);
  color: var(--bm-text-invers);
  text-decoration: none;
}
.bm-fuss__umschalter {
  /* 44-px-Tippfläche endet an der Inhaltskante, Pfeil bündig rechts. */
  display: inline-flex; align-items: center; justify-content: flex-end;
  width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--bm-text-invers);
  cursor: pointer;
}
.bm-fuss__umschalter svg { transition: transform var(--bm-dauer-kurz) var(--bm-ease); }
.bm-fuss__spalte.is-offen .bm-fuss__umschalter svg { transform: rotate(180deg); }
.bm-fuss__liste { display: none; list-style: none; margin: 0; padding: 0 0 20px; }
.bm-fuss__spalte.is-offen .bm-fuss__liste { display: block; }
.bm-fuss__liste li + li { margin-top: 0; }
.bm-fuss__liste .bm-fuss__link { display: block; padding-block: 0.75rem; }   /* 14 × 1,5 + 24 = 45 px Tippfläche */

.bm-fuss .bm-fuss__link {
  font-size: var(--bm-t-klein);   /* P1-A: 14 px, eine Größe mit dem Spaltentitel (vorher --bm-t-nav) */
  line-height: var(--bm-zh-mittel);
  letter-spacing: var(--bm-sp-knopf);
  color: var(--bm-fuss-text);
}
.bm-fuss .bm-fuss__link:is(:hover, :focus-visible) { color: var(--bm-text-invers); }
/* Bereichs-Zwischentitel (Lösungen): feine Linie ordnet die Bereiche */
.bm-fuss .bm-fuss__bereich { padding-top: 0.75rem; color: var(--bm-text-invers); }
.bm-fuss .bm-fuss__bereich:not(:first-child) { margin-top: 1rem; border-top: 1px solid var(--bm-linie-invers); padding-top: 1rem; }

@media (min-width: 768px) {
  .bm-fuss__struktur {
    display: grid;
    /* B11 (28.09.2026): 3 statt 4 Spalten zwischen 768 und 1023 px – bei 4
       reichte die Spaltenbreite (148 px bei 768) nicht für die längsten
       Einträge („Kommunikation & Kampagnen" u. a., gemessen 204 px
       einzeilig); 3 Spalten sind bei 768 px 204 px breit. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.5rem 2rem;
    padding-top: 4rem;
  }
  .bm-fuss__spalte { border-bottom: 0; }
  .bm-fuss__spaltenkopf { min-height: 1.5rem; }
  .bm-fuss .bm-fuss__spaltentitel { min-height: 1.5rem; font-size: var(--bm-t-klein); }
  .bm-fuss__umschalter { display: none; }
  .bm-fuss__liste, .bm-fuss__spalte.is-offen .bm-fuss__liste { display: block; padding: 0; }
  .bm-fuss__liste li + li { margin-top: 0.375rem; }
  /* Tippfläche 29 px (≥ 24); Zeilentakt 35 px wie zuvor */
  .bm-fuss__liste .bm-fuss__link { display: inline-block; padding-block: 0.25rem; }
  .bm-fuss__spaltenkopf { margin-bottom: 1.25rem; }
}
/* Ab 1024 wieder 4 gleich breite Spalten (vorher schon ab 768 gültig,
   B11: erst ab hier breit genug – 212 px bei 1024). */
@media (min-width: 1024px) {
  .bm-fuss__struktur { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 29.09.2026: Die Sieben-Spalten-Reihe ab 1440 (B11) entfällt. Mit „Arbeiten“
   sind es acht Hauptpunkte, und bei --bm-inhalt-max 1200 px passen acht
   max-content-Spalten nicht nebeneinander (Summe ≈ 1275 px); die achte rutschte
   allein in eine zweite Reihe. Ab 1024 gelten deshalb durchgehend 4 × 2. */

/* ── Standorte (nur mit echten Einträgen) ─────────────────────────────── */
.bm-fuss__standorte { margin-top: 48px; }
.bm-fuss__standorte ul { display: flex; flex-wrap: wrap; gap: 0 2.5rem; list-style: none; margin: 0; padding: 0; }
.bm-fuss__standorte .bm-fuss__link { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (min-width: 768px) { .bm-fuss__standorte .bm-fuss__link { min-height: 1.75rem; } }

/* ── Marke ────────────────────────────────────────────────────────────── */
.bm-fuss__marke-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px;
  margin-top: 5rem;
}
.bm-fuss .bm-fuss__marke { display: inline-block; color: var(--bm-text-invers); text-decoration: none; line-height: 1; }
/* Wortmarke wie im Kopf: Hausschrift mittel (überstimmt den Inline-Stil der
   geteilten Marke-Komponente, deshalb !important) */
.bm-fuss .bm-fuss__wortmarke {
  color: var(--bm-text-invers);
  font-family: var(--bm-font) !important;
  font-weight: var(--bm-g-mittel) !important;
  font-size: 1.5rem;   /* Logo-Maß */
  line-height: 1;
  letter-spacing: var(--bm-sp-eng);
}
.bm-fuss__bildmarke { display: block; width: auto; height: 40px; }
.bm-fuss__social { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.bm-fuss__social a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px;
  border-radius: var(--bm-radius-pille); background: var(--bm-dunkel-erhaben);
  color: var(--bm-text-invers); text-decoration: none; font-size: var(--bm-t-klein);
}

/* ── Rechtsleiste + Back-to-Top ───────────────────────────────────────── */
.bm-fuss__leiste { background: var(--bm-dunkel-erhaben); }
.bm-fuss__leiste-innen {
  display: flex;
  align-items: stretch;
  max-width: var(--bm-rahmen-max);
  min-height: var(--bm-fuss-kachel);
  margin-inline: auto;
  padding-inline: var(--bm-rand);
}
.bm-fuss__copy, .bm-fuss__recht { display: flex; align-items: center; }
.bm-fuss .bm-fuss__copy {
  margin: 0;
  font-size: var(--bm-t-meta);
  color: var(--bm-fuss-text);
}
.bm-fuss__recht { flex: 1; padding: 20px var(--bm-rand); }
.bm-fuss__recht ul { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.bm-fuss .bm-fuss__recht a {
  display: inline-flex; align-items: center; min-height: 1.5rem;   /* Tippfläche ≥ 24 px */
  font-size: var(--bm-t-meta); line-height: var(--bm-zh-mittel);
  color: var(--bm-fuss-text);
}
.bm-fuss .bm-fuss__recht a:is(:hover, :focus-visible) { color: var(--bm-text-invers); }

/* mobil: Links oben, © darunter, Kachel rechts über die volle Höhe */
@media (max-width: 767px) {
  .bm-fuss__leiste-innen { display: grid; grid-template-columns: 1fr var(--bm-fuss-kachel); grid-template-rows: auto auto; }
  .bm-fuss__recht { grid-column: 1; grid-row: 1; padding: 12px 12px 0 0; }
  .bm-fuss__recht ul { gap: 0 20px; }
  .bm-fuss .bm-fuss__copy { grid-column: 1; grid-row: 2; padding: 8px 12px 24px 0; }
  .bm-fuss__hoch { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .bm-fuss .bm-fuss__recht a { min-height: 2.75rem; }   /* Tippfläche 44 px */
}
@media (min-width: 768px) {
  .bm-fuss__recht { justify-content: flex-end; }
  .bm-fuss__recht ul { gap: 8px 24px; justify-content: flex-end; }
}
/* Große Rechtsleiste erst, wenn alle Links in eine Zeile passen (SP2-M11:
   bei 1024 brach „Für KI-Agents" allein um). */
@media (min-width: 1200px) {
  .bm-fuss__recht ul { gap: 8px 40px; }
}

.bm-fuss__hoch {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: var(--bm-fuss-kachel); height: var(--bm-fuss-kachel);
  border: 0; border-radius: 0;
  /* Signal-Kachel schon im Ruhezustand (M11), Hover dunkelt ab (--bm-signal-hell). */
  background: var(--bm-signal); color: var(--bm-signal-text);
  cursor: pointer;
}
.bm-fuss__hoch:is(:hover, :focus-visible) { background: var(--bm-signal-hell); }
.bm-fuss__hoch svg { transition: transform var(--bm-dauer) var(--bm-ease); }
.bm-fuss__hoch:is(:hover, :focus-visible) svg { transform: translateY(-3px); }

/* ── Fokus: Schalter --bm-fokus (oben, Fuß auf Dunkel); die Kachel „nach
   oben" ist eine Signalfläche, der Rahmen liegt dort innen ─────────────── */
.bm-fuss :focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 3px); }
.bm-neu.bm-fuss .bm-fuss__knopf:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 3px); }
.bm-fuss .bm-fuss__hoch { --bm-fokus: var(--bm-fokus-auf-signal); --bm-fokus-gegen: var(--bm-fokus-auf-dunkel); }
.bm-fuss .bm-fuss__hoch:focus-visible { outline-offset: -5px; }

@media (prefers-reduced-motion: reduce) {
  .bm-fuss__hoch svg, .bm-fuss__umschalter svg { transition: none; }
  .bm-fuss__hoch:is(:hover, :focus-visible) svg { transform: none; }
}