/* Der Fußbereich steht eine Stufe unter dem Fließtext.

   Vorher lief er auf --fs-body, also exakt so groß wie der Inhalt darüber.
   Damit las sich die Adresse so gewichtig wie ein Absatz im Haupttext,
   obwohl sie Beiwerk ist: Kontakt, Zeiten, Rechtliches. --fs-small ist die
   Stufe darunter (14,4 bis 16 px statt 16 bis 17,6 px) und bleibt für
   Telefonnummer und Adresse bequem lesbar — deutlich über dem, was für
   Pflichtangaben üblich ist. Die Zeile mit dem Urheberrecht sitzt noch eine
   Stufe tiefer auf --fs-caption. */
.site-footer {
  background: #ffffff;
  color: var(--color-ink);
  border-top: 1px solid var(--color-border);
  /* Unten deutlich knapper als oben: Ueber dem Fussbereich kommt der Inhalt
     der Seite, darunter nichts mehr. Der Abstand muss die letzte Zeile nur
     noch vom Bildschirmrand loesen. */
  padding: clamp(3.2rem, 6vw, 4.8rem) 0 clamp(0.9rem, 1.2vw, 1.2rem);
  font-size: var(--fs-small);
}

.footer-grid {
  display: grid;
  gap: clamp(1.4rem, 2.4vw, 2.2rem);
}

.footer-block {
  display: grid;
  align-content: start;
  gap: 0.4rem;
}

.footer-title {
  /* Gleiche Vorlage wie alle Untertitel der Website. */
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 500;
  font-size: var(--fs-small);
  margin-bottom: 0.45rem;
  color: var(--color-ink);
}

.footer-block p,
.footer-block address,
.footer-block a {
  color: var(--color-ink-muted);
  font-style: normal;
  font-size: var(--fs-small);
  line-height: 1.6;
}

.footer-logo {
  height: 30px;
  width: auto;
  display: block;
  margin-bottom: 0.95rem;
  filter: none;
}

.footer-block p,
.footer-block address {
  margin: 0;
}

.footer-block p + p,
.footer-block address + p {
  margin-top: 0.3rem;
}

.footer-spacer {
  margin-bottom: 1rem;
}

/* Fussbereich: Unterstreichung erst beim Darueberfahren.
   Vorher waren die Links dauerhaft unterstrichen, die Schaltflaeche
   "Cookie-Einstellungen" daneben aber nicht — zwei Erscheinungsbilder in
   derselben Spalte. Jetzt sieht beides gleich aus, und die Unterstreichung
   bleibt das, was sie auf der ganzen Seite ist: die Rueckmeldung auf Maus
   und Tastatur. Ausserhalb von Fliesstext ist das auch nach WCAG 1.4.1 in
   Ordnung, weil die Links hier als eigene Liste stehen. */
.site-footer a {
  color: var(--color-ink);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1.6px;
  text-underline-offset: 0.2em;
}

.footer-meta {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.4rem;
  color: var(--color-ink-muted);
  font-size: var(--fs-small);
}

.footer-meta p {
  margin: 0;
  color: var(--color-ink-muted);
  overflow-wrap: anywhere;
}

.footer-meta a {
  color: var(--color-ink);
}

/* Zwei Spalten schon ab 520 px.

   Die Schwelle lag bei 760 px, deshalb standen die fuenf Bloecke auf dem
   Surface Duo (540 px) alle untereinander — der Fussbereich war dort
   laenger als der Bildschirm. Bei 520 px bleiben je Spalte rund 240 px,
   genug fuer die laengste Zeile ("office@seiner-wohnen.at" braucht knapp
   200 px). Handys bleiben darunter einspaltig, auch die grossen mit 430 px.
   Ab 768 px stehen alle fuenf Bloecke nebeneinander. */
@media (min-width: 520px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .site-footer {
    padding: clamp(3.4rem, 8vw, 4.4rem) 0 clamp(0.85rem, 1.6vw, 1.15rem);
  }

  .footer-grid {
    gap: clamp(1.7rem, 3vw, 2.35rem);
  }

  .footer-meta {
    margin-top: 2.25rem;
    gap: 0.6rem;
  }
}

@media (max-width: 640px) {
  .footer-block {
    gap: 0.5rem;
  }

  .footer-spacer {
    margin-bottom: 1.2rem;
  }
}

/* Zwischenbreiten (Surface Duo, kleine Tablets, aufgeklappte Falter).

   Hier stehen zwei Spalten, aber die Abstaende stammten noch aus der
   Handy-Ansicht darunter: 1,2 rem unter jedem Absatzblock, 0,5 rem zwischen
   den Zeilen, dazu die Aussenabstaende des Fussbereichs. Zusammen war der
   Fussbereich auf dem Surface Duo (540 px) rund 790 px hoch — laenger als
   der Bildschirm, obwohl er nur fuenf kurze Bloecke enthaelt.

   Zwei Eingriffe: Der Kopfblock mit Logo und Claim laeuft ueber beide
   Spalten, dadurch steht der Claim in zwei statt vier Zeilen und die vier
   Sachbloecke ordnen sich paarweise darunter — Standort neben Kontakt,
   Oeffnungszeiten neben Rechtliches. Und alle Abstaende ruecken eine Stufe
   zusammen. Die Schriftgroesse bleibt unveraendert. */
@media (min-width: 520px) and (max-width: 767.98px) {
  .site-footer {
    padding: clamp(2.4rem, 5vw, 3rem) 0 clamp(0.8rem, 1.6vw, 1.1rem);
  }

  .footer-grid {
    column-gap: clamp(1.2rem, 3vw, 1.8rem);
    row-gap: clamp(1.1rem, 2.4vw, 1.5rem);
  }

  /* Der Kopfblock ist der einzige mit Fliesstext und braucht die Breite;
     die vier Sachbloecke darunter sind Listen und kommen mit der halben
     aus. */
  .footer-grid > .footer-block:first-child {
    grid-column: 1 / -1;
  }

  .footer-block {
    gap: 0.2rem;
  }

  .footer-block p,
  .footer-block address,
  .footer-block a {
    line-height: 1.5;
  }

  .footer-block p + p,
  .footer-block address + p {
    margin-top: 0.15rem;
  }

  /* "Termine nach Vereinbarung" und die E-Mail-Adresse setzen sich vom
     Block darueber ab, brauchen dafuer aber keine ganze Leerzeile. */
  .footer-spacer {
    margin-bottom: 0.5rem;
  }

  .footer-logo {
    height: 26px;
    margin-bottom: 0.6rem;
  }

  .footer-meta {
    margin-top: 1.5rem;
    padding-top: 0.8rem;
  }
}

/* Tablet und iPad: die fuenf Bloecke stehen nebeneinander in einer Zeile.

   Bei zwei Spalten lief der Fussbereich auf dem iPad ueber eine ganze
   Bildschirmhoehe: Standort und Kontakt oben, Oeffnungszeiten und
   Rechtliches erst nach dem Scrollen. Nebeneinander steht alles auf einen
   Blick da, so wie am grossen Bildschirm.

   Damit fuenf Spalten in 768 px Breite passen, faellt der Fussbereich hier
   eine Stufe kleiner aus als der uebrige Inhalt. Die beiden Schriftgroessen
   werden nur innerhalb des Fussbereichs neu gesetzt, deshalb ziehen
   Ueberschriften, Adresse, Verweise und die Zeile mit dem Urheberrecht
   gemeinsam mit. Ab 1024 px stehen sie wieder auf der normalen Groesse.

   Die Regel laeuft bis 1200 px, also auch ueber die Querformate der grossen
   iPads. Die Spaltenteilung darunter ist auf breite Bildschirme gerechnet
   und liess in diesem Bereich Adresse, E-Mail und "Cookie-Einstellungen"
   umbrechen. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .site-footer {
    --fs-small: clamp(0.8rem, 0.2rem + 1.25vw, 1rem);
    --fs-caption: clamp(0.74rem, 0.34rem + 0.82vw, 0.88rem);
  }

  /* Die Spalten sind bewusst nicht gleich breit, sondern nach dem laengsten
     Eintrag bemessen: "8530 Deutschlandsberg", "office@seiner-wohnen.at" und
     "Cookie-Einstellungen" brauchen mehr Platz als die Oeffnungszeiten. Bei
     fuenf gleichen Spalten brach die Adresse bei 768 px nach "8530" um. */
  .footer-grid {
    grid-template-columns:
      minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.13fr)
      minmax(0, 0.9fr) minmax(0, 1fr);
    column-gap: clamp(0.75rem, 1.8vw, 1.5rem);
  }

  /* Das Logo ist das einzige Element mit fester Breite und wuerde die erste
     Spalte sonst sprengen. */
  .footer-logo {
    height: clamp(20px, 2.6vw, 28px);
    margin-bottom: 0.75rem;
  }
}

@media (min-width: 1200px) {
  .footer-grid {
    grid-template-columns: 1.2fr 0.9fr 0.9fr 1.25fr 0.75fr;
    column-gap: clamp(1.2rem, 2vw, 2.2rem);
  }
}

@media (min-width: 1040px) {
  .footer-meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Die Zeile mit Urheberrecht und Urheberschaft steht bewusst kleiner als
   der übrige Text im Fußbereich — sie ist Pflichtangabe, nicht Inhalt. */
.footer-copyright {
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
  /* Keine Silbentrennung in der Pflichtangabe — global steht sie auf `auto`,
     und am Handy brach die Zeile dadurch mitten in "vorbe-halten". */
  hyphens: manual;
}

/* ==========================================================================
   Platz fuer den schwebenden Handlungsaufruf — neben der letzten Zeile,
   nicht darunter.

   Der Knopf unten rechts ist fixiert, liegt also immer im Bild, und am Ende
   der Seite lag er auf der Zeile mit dem Urheberrecht. Der Fussbereich hat
   deshalb frueher die ganze Hoehe des Knopfes als unteren Abstand reserviert.
   Die Ueberdeckung war damit weg, geblieben ist ein leerer Streifen von rund
   130 px unter dem Text.

   Der Knopf steht in der Ecke, nicht ueber der ganzen Breite. Es genuegt
   deshalb, rechts eine Spalte freizuhalten: Die Zeile bricht vor dem Knopf um
   statt unter ihm zu verschwinden, und unten bleibt der gewoehnliche Abstand
   des Fussbereichs stehen. Der Trennstrich darueber laeuft weiterhin durch —
   er liegt ausserhalb des Innenabstands.

   72 px ist die groesste der drei Fassungen aus termin-button.php; am
   Schreibtisch sind es 60 px, dafuer ist dort der Eckabstand groesser.
   ========================================================================== */
.footer-meta {
  padding-right: calc(
    72px + var(--hero-shop-inset, 1.35rem) +
    max(env(safe-area-inset-right), 0px) + 0.5rem
  );
}

/* Die Urheberschaft wandert als Ganzes in die naechste Zeile, statt sich in
   "… Website" und "von Agentur.jetzt." zu teilen. Erst ab 340 px, darunter
   waere die Zeile breiter als der Bildschirm. */
@media (min-width: 340px) {
  .footer-copyright__author {
    white-space: nowrap;
  }
}

/* ==========================================================================
   Handy: die Rechteangabe steht neben dem Knopf, nicht ueber ihm.

   Bis eben hielt der Fussbereich am Handy 65 px Hoehe frei, damit der Satz
   "© 2026 Seiner Wohnen. Alle Rechte vorbehalten." ueber dem Knopf stehen
   konnte — in voller Breite brauchte er 332 px, neben dem Knopf waren nur
   266 px frei.

   Statt der Hoehe gibt jetzt die Schrift nach: Die Zeile faellt hier eine
   Stufe kleiner aus, damit der Satz in die 266 px passt. Damit stehen beide
   Zeilen links vom Knopf, und unten bleibt derselbe knappe Abstand wie in
   allen anderen Ansichten.

   Die Formel ist genau darauf gerechnet: bei 375 px rund 11,9 px Schrift,
   bei 430 px rund 14 px, ab etwa 460 px wieder die normale Groesse. Unter
   rund 365 px reicht auch das nicht — dort bricht der Satz an einer
   Wortgrenze um, der Fussbereich bleibt aber knapp.
   ========================================================================== */
@media (max-width: 469.98px) {
  /* Der Knopf sitzt am Bildschirmrand, die Zeile endet schon 0,75 rem davor
     — das ist der Aussenrand des Inhaltsbereichs (styles.css, .container bei
     max-width 640px). Hier zaehlt jeder Millimeter, deshalb wird er
     abgezogen; in den breiteren Ansichten faellt er nicht ins Gewicht. */
  .footer-meta {
    padding-right: calc(
      72px + var(--hero-shop-inset, 1.35rem) +
      max(env(safe-area-inset-right), 0px) + 0.5rem - 0.75rem
    );
  }

  .footer-copyright {
    font-size: clamp(0.73rem, -0.275rem + 4.2vw, 0.95rem);
  }
}