/* ===========================================================================
   footer.css — Benker WP-Theme
   HANDGESCHRIEBEN. Eigene Datei, damit eine Neuextraktion von components.css
   diese Regeln nicht ueberschreibt. Wird NACH components.css geladen.

   Umbau 22.07.2026 (Content-Review): Der Footer verlinkt jetzt die einzelnen
   PRODUKTE statt der Kategorien, die ins Leere fuehrten. Dafuer braucht die
   rechte Seite sechs statt vier Spalten.

   Damit der Footer dabei NICHT wesentlich hoeher wird:
     1. Die Oeffnungszeiten sind in den Buero-Block gewandert (Markup in
        footer.php). Die linke Spalte schrumpft dadurch von rund 400px auf
        rund 215px — sie war vorher die breiteste UND hoechste Spalte.
     2. Der gewonnene Platz geht an die Menuespalten: engerer Spaltenabstand
        und ein schmalerer Trenner.
   Rechnung bei 1328px Inhaltsbreite: innen rund 1184px, davon links 215px und
   Trenner 32px, bleiben rund 937px fuer sechs Spalten (rund 790px Text plus
   fuenf Abstaende a 24px = 910px). Passt mit etwas Luft.

   flex-wrap bleibt als Sicherheitsnetz: Reicht der Platz durch andere
   Schriftgroessen doch nicht, bricht die letzte Spalte sauber um, statt dass
   der Footer horizontal ueberlaeuft.
   =========================================================================== */

@media (min-width: 1200px) {
  /* Rechte Haelfte: Spaltenreihe oben, Beschreibungstext darunter. Der Text
     fuellt die Flaeche, die frei blieb, weil die linke Spalte hoeher ist als
     die Spaltenreihe. margin-top:auto drueckt ihn an die Unterkante, damit er
     mit dem Fuss der linken Spalte abschliesst statt in der Luft zu haengen. */
  .footer__right {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
  }

  .footer__seo {
    margin-top: auto;
  }

  /* Die Spalten fuellen die Restbreite und verteilen den Platz gleichmaessig
     zwischen sich (space-between). Dadurch werden die Spaltenabstaende so gross
     wie moeglich, OHNE dass der Trenner mitwaechst — vorher schluckte er als
     flex:1 den gesamten Restplatz und stand entsprechend weit von der linken
     Spalte entfernt. Der gap bleibt als Mindestabstand stehen. */
  .footer__menus {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-6) var(--space-5);
  }

  /* Fester, schmaler Trenner statt Platzhalter: kleinere Luecke zur linken
     Spalte, der gewonnene Platz geht an die Spaltenabstaende. */
  .footer__divider {
    flex: 0 0 auto;
    width: var(--space-6);
    min-width: 0;
  }
}

/* Unter 1200px bricht die Spaltenreihe ohnehin um (Bestand). Etwas engere
   Mindestbreite, damit auf Tablets drei statt zwei Spalten nebeneinander
   passen und der Footer nicht unnoetig lang wird. */
@media (max-width: 1199px) {
  .footer__col {
    min-width: 132px;
  }
}

/* ---------------------------------------------------------------------------
   Schrift (Feinschliff 22.07.2026)
   Fliesstext im Footer auf 14px: schmalere Spalten, mehr Luft dazwischen. Gilt
   fuer Menuelisten UND den Adressblock, sonst haetten Telefon/Mail (die
   .footer__link tragen) eine andere Groesse als die Adresszeilen darueber.

   Ueberschriften uebernehmen die Formatierung von .mmenu__title aus dem
   Mega-Menue (Heading-Schrift, 16px, bold, Markenblau) — dieselbe Rolle,
   dieselbe Optik, quer durch die Seite.
   --------------------------------------------------------------------------- */

.footer__list,
.footer__address {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
}

.footer__heading,
.footer__heading--accent {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-4xs, 16px);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary-800);
  margin-bottom: var(--space-4);
}

/* Logo etwas groesser: Die linke Spalte ist durch den Umbau deutlich schmaler
   geworden, dadurch wirkte das Logo verloren. */
.footer__logo img {
  height: 60px;
}

/* ---------------------------------------------------------------------------
   Beschreibungstext unter den Menuespalten
   Klein und zurueckhaltend (12px, gedaempfte Farbe): Er soll die Flaeche
   fuellen und lesbar sein, aber den Links nicht die Aufmerksamkeit nehmen.
   Zwei Spalten, weil eine Zeile ueber die volle Breite (rund 960px) viel zu
   lang zum Lesen waere; so liegt die Zeilenlaenge im gut lesbaren Bereich.
   --------------------------------------------------------------------------- */
.footer__seo {
  font-family: var(--font-body);
  font-size: var(--fs-body-xs);
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-muted);
  text-wrap: pretty; /* verhindert einzelne Woerter in der letzten Zeile */
}

@media (min-width: 900px) {
  .footer__seo {
    columns: 2;
    column-gap: var(--space-7);
  }
}