/* ======================================================================
   Der Footer — zentral, aus dem Modell (Fw\Fuss).
   ======================================================================
   ❗️Hier stehen NUR Struktur und Abstände. Farben kommen von aussen:
      die allgemeinen Design-Werte als --color-… und --font-…, und was im
      Design-Bereich unter „Footer" eingestellt wird, schreibt Branding als
      eigene Regeln auf `.site-footer` (mit !important). Deshalb wird hier
      KEINE --pro-footer-*-Variable gelesen — die gibt es nicht, Branding
      erzeugt Regeln statt Variablen. Ein var() darauf sähe richtig aus und
      wäre wirkungslos.
      Die drei Werte, die der Footer selbst mitbringt (Luft, Schriftgrösse,
      Trennlinie), setzt das Partial als Variablen am Element.
   ❗️BIS 2026-10-02 STAND HIER EIN „*" + „/" IN DER ZEILE MIT DEN DESIGN-
      WERTEN. Das schloss diesen Kommentar vorzeitig, der Rest wurde
      ungueltiges CSS und verschluckte die ganze erste Regel darunter. Die
      Regel war also seit dem ersten Tag tot: „Höhe innen" und „Schriftgrösse"
      aus dem Footer-Bereich wirkten nie (#1973). Keine Fehlermeldung,
      gefunden nur durch Nachmessen im Browser. Also: in Kommentaren nie einen
      Platzhalter mit Sternchen direkt vor einem Schraegstrich.
      In der toten Regel standen ausserdem ein dunkler Hintergrund und helle
      Schrift. Sie widersprachen dem Satz oben („NUR Struktur und Abstände")
      und sind weg: die Farben kommen weiter aus seite.css (.site-footer) und
      aus den Feinfarben.
   ====================================================================== */

.fw-site-footer{
  font-family: var(--font-body, inherit);
  font-size: var(--fw-fuss-groesse, 15px);
  padding: var(--fw-fuss-luft, 48px) 0;
}

.fw-fuss{
  width: min(var(--container, 1200px), calc(100% - 2 * var(--gutter, 20px)));
  margin-inline: auto;
  display: flex; flex-direction: column; gap: 28px;
}

/* ❗️Die Spaltenzahl kommt aus dem MODELL (--fw-fuss-spalten setzt der
   Renderer), nicht aus einer Einstellung. Wie viele Spalten es gibt, sieht
   man ja — es doppelt einzustellen hiesse, dass eine der beiden Angaben
   irgendwann falsch ist. */
.fw-fuss-spalten{
  display: grid; gap: 28px 32px;
  grid-template-columns: repeat(var(--fw-fuss-spalten, 3), minmax(0, 1fr));
}
@media (max-width: 860px){
  .fw-fuss-spalten{ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
/* ❗️AUCH AM HANDY NEBENEINANDER (Ansage 2026-09-28: „mag das nicht so
   dass alle untereinander mobile sind“). Hier stand `1fr`, also eine Spalte
   unter der anderen — bei drei Spalten mit je zwei Links wird daraus ein
   langer, dünner Turm, durch den man scrollt, ohne etwas zu sehen. Zwei
   Spalten passen auch auf 320 px, weil eine Linkliste selten breiter als
   „Datenschutz“ ist — gemessen: mit 132 px kippte es dort zurück auf eine
   Spalte (2×132 + 18 Abstand = 282 bei 280 verfügbaren), mit 124 nicht.
   `auto-fit` statt einer festen Zwei: bei nur EINER Spalte kollabiert der
   leere Zweit-Track und die verbliebene füllt die Breite. Eine feste
   `repeat(2, 1fr)` lässt sie auf der halben Breite stehen. */
@media (max-width: 520px){
  .fw-fuss-spalten{ grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
    gap: 22px 18px; }
  /* Die Marke ist keine Linkliste: Name und Logo brauchen die ganze Breite
     und stehen als Kopf über den Listen, nicht neben ihnen.
     ❗️Nur das Logo als Merkmal, NICHT zusätzlich die Anschrift: ein leeres
     <p class="…--adresse"> ist für :empty nicht leer (der Zeilenumbruch darin
     ist ein Textknoten), die Bedingung träfe also auch auf eine Spalte ohne
     jede Anschrift zu. */
  .fw-fuss-spalte:has(.fw-fuss-teil--logo){ grid-column: 1 / -1; }
}

.fw-fuss-spalte{ display: flex; flex-direction: column; gap: 9px; min-width: 0; }

.fw-fuss-titel{
  margin: 0 0 3px; font-family: var(--font-heading, inherit);
  font-size: .82em; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  /* In der Hauptfarbe, wie Name und Logo im Header (Ansage 2026-10-06:
     „Rechtliches und Kontakt … in Hauptfarbe"). Mit Feinfarben gilt
     `pro_footer_footer_heading` (Branding).
     ❗️--color-primary-fuss ist die Hauptfarbe, so weit nachgezogen, dass sie
     auf dem Grund des Fusses lesbar ist (Branding::variablen). Bei genug
     Kontrast ist es die Hauptfarbe selbst. */
  color: var(--color-primary-fuss, var(--color-primary, #0a6ebd));
}
/* Ohne Titel steht auch keine leere Zeile da. Im Bearbeiten-Modus macht das
   Layover die Stelle trotzdem sichtbar — sonst käme man nie wieder an sie
   heran. */
.fw-fuss-titel[data-leer]{ display: none; }

.fw-fuss-liste{ display: flex; flex-direction: column; gap: 7px; min-width: 0; }

/* ❗️overflow-wrap ist der Notnagel für alles, was auch mit <wbr> nicht in
   die Spalte passt. Ohne ihn macht `width: fit-content` weiter unten den Link
   so breit wie sein längstes Wort, und das Wort ragt über die Spalte. Mit ihm
   rechnet der Browser die Mindestbreite neu, der Link bleibt in der Spalte. */
.fw-fuss-teil{ margin: 0; line-height: 1.55; min-width: 0; overflow-wrap: anywhere; }
.fw-fuss-teil--aus{ display: none; }
/* Nur für Besucher gedacht (der Anmelde-Link): Angemeldete sehen ihn nicht.
   ❗️Im Markup steht er für sie trotzdem, sonst wäre er im Bearbeiten-Modus
   nicht anzufassen. Dort holt ihn das Layover zurück (Regel
   .fw-ft.fw-fuss-nurgast im eingespritzten Seitenstil). Besucher bekommen
   die Klasse gar nicht erst, bei ihnen ist er ein normaler Link (#2001). */
.fw-fuss-nurgast{ display: none; }

a.fw-fuss-teil,
.fw-fuss-teil--sozial a{ color: inherit; text-decoration: none; width: fit-content; }
a.fw-fuss-teil:hover,
.fw-fuss-teil--sozial a:hover{ text-decoration: underline; }

.fw-fuss-teil--logo{ display: inline-flex; align-items: center; gap: 10px; }
.fw-fuss-teil--logo img{ max-height: 40px; width: auto; display: block; }
/* Der Schriftzug eines Logos ohne Bild ist der Name der Website und steht
   deshalb wie der Name in der Hauptfarbe (Ansage 2026-10-06). Die Farbe sitzt
   am <span>, nicht am Link: so bleibt sie, auch wenn eine Feinfarbe die Links
   im Footer umfärbt. */
.fw-fuss-logo-text{ font-family: var(--font-heading, inherit); font-size: 1.15em; font-weight: 700;
  color: var(--color-primary-fuss, var(--color-primary, #0a6ebd)); }
/* Der Name der Website: fett, etwas grösser, in der Hauptfarbe (Ansage
   2026-10-05). Anders als der Schriftzug des Logos ausdrücklich farbig.
   ❗️Mit `a` davor: `a.fw-fuss-teil{color:inherit}` wiegt sonst schwerer und
   färbte den Namen in der Schriftfarbe des Footers. */
a.fw-fuss-teil--name{ font-family: var(--font-heading, inherit); font-size: 1.25em; font-weight: 700;
  letter-spacing: -.01em; color: var(--color-primary-fuss, var(--color-primary, #0a6ebd)); text-decoration: none; }

.fw-fuss-teil--sozial{ display: flex; flex-wrap: wrap; gap: 6px 16px; }

.fw-fuss-teil--trenner{
  border: 0; border-top: 1px solid currentColor; opacity: .28; margin: 4px 0; width: 100%;
}

/* Die Zeile ganz unten: Copyright, Rechtliches. */
.fw-fuss-unterzeile{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
  padding-top: 18px;
  /* Die Kante kommt aus der Schrift DIESER Fläche, gedämpft: sonst ist die
     „feine" Linie auf einem dunklen Fuss ein heller Balken. Erste Zeile =
     Rückfall für Browser ohne color-mix. */
  border-top: var(--fw-fuss-linie-breite, 1px) solid rgba(128,128,128,.28);
  border-top-color: color-mix(in srgb, currentColor var(--fw-fuss-linie-deckung, 22%), transparent);
  font-size: .9em; opacity: .9;
}
.fw-fuss-unterzeile .fw-fuss-teil{ margin: 0; }

/* Ausrichtung — die einzige Aufbau-Frage, die das Modell nicht selbst
   beantwortet. */
.fw-site-footer[data-mitte] .fw-fuss-spalte,
.fw-site-footer[data-mitte] .fw-fuss-unterzeile{ align-items: center; text-align: center; }
.fw-site-footer[data-mitte] .fw-fuss-unterzeile{ justify-content: center; }
.fw-site-footer[data-mitte] a.fw-fuss-teil{ margin-inline: auto; }

.fw-fuss-hinweis{ opacity: .6; font-style: italic; }

/* Standort-Karte im Fuss.
   ❗️Feste Hoehe statt eines Seitenverhaeltnisses: eine Karte, die auf dem
   Handy quadratisch wird, nimmt dort die halbe Bildschirmhoehe. 280 px zeigen
   genug Umgebung und lassen den Rest des Fusses sichtbar. */
.fw-fuss-karte{ width: 100%; height: 280px; border-radius: 12px; overflow: hidden;
  background: rgba(127,127,127,.12); }
.fw-fuss-karte iframe{ width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px){ .fw-fuss-karte{ height: 200px; } }