/* ============================================================================
   FUSSZEILE techq.ch — die einzige Quelle
   ============================================================================

   WARUM ES DIESE DATEI GIBT
   -------------------------
   Am 12.08.2026 trugen die 24 Seiten des Shops ACHT verschiedene Fusszeilen.
   Auf `faq` und `nutzungsrichtlinie` fehlte die Markenspalte komplett, auf
   `domains` und `quin-plus` lief das am 21.07. reparierte Ueberlapp-Raster
   (`minmax(155px,1fr)`) wieder mit und die Sozial-Knoepfe fehlten,
   `nutzungsrichtlinie` verlinkte sich selbst nicht, das Logo stand mal auf
   26px und mal auf 30px, die Spaltentitel mal in `<h2>` und mal in `<h4>`.

   Die Ursache war nicht Nachlaessigkeit. Die Regeln standen an DREI Orten:
   in `site.css` — und zusaetzlich als Inline-Kopie in `index.html` und
   `pakete.html`, weil diese beiden Seiten `site.css` bewusst NICHT laden
   (sie sind in sich geschlossen). Drei Kopien MUESSEN auseinanderlaufen.

   Deshalb diese Datei: sie wird von allen Seiten geladen, auch von den
   beiden geschlossenen. Der Namensraum `tqf-` gehoert ausschliesslich der
   Fusszeile; die alten, generischen Namen (`.footer-grid`, `.f-link`,
   `.soc`) sind an allen vier Fundstellen entfernt.

   Das Markup schreibt `tools/fusszeile_setzen.py` aus EINER Quelle in jede
   Seite. Von Hand aendert man hier nichts an einer einzelnen Seite.

   UMBAU 17.08.2026 — schmaler
   ---------------------------
   Auftrag Fabrizio: aufwerten, schmaler, «Quality 4 You» raus. Drei Varianten
   lagen als Vorschau vor. Die gewaehlte trug zusaetzlich eine Betriebsanzeige
   unten rechts; die ist nach zwei Stunden live wieder entfallen (Entscheid
   Fabrizio, «sieht nicht gut aus»), der Rest ist geblieben. Was sich geaendert
   hat und warum:

     * Die Marke ist keine SPALTE mehr, sondern eine schmale Leiste ueber den
       Links (Logo links, Sozial-Knoepfe rechts). Vorher stand unter der Marke
       ein Loch von rund 120px, weil die Spalte «Produkt» mit sieben Zeilen die
       Hoehe bestimmte und die Markenspalte nach drei Zeilen zu Ende war.
     * Weil die Links dadurch die volle Breite haben, tragen sie FUENF statt
       vier Spalten: «Produkt» ist in «Hosting» und «Mehr» geteilt. Die
       laengste Spalte hat jetzt vier statt sieben Zeilen — und genau die
       laengste Spalte bestimmt die Hoehe der ganzen Fusszeile.
     * Der Claim ist weg. Er sagte «Hosting, das mitdenkt.» und stand
       wortgleich noch einmal in der Schlusszeile darunter. Geblieben ist die
       Schlusszeile.
     * Kurzzeitig stand unten rechts eine Betriebsanzeige (Live-Zustand aus
       derselben RPC wie /status). Sie ist am selben Abend wieder raus; die
       Schlusszeile traegt nur noch die Copyright-Zeile. Warum dort ueberhaupt
       nichts stehen sollte, steht bei `.tqf-base`.

   GEMESSENER STAND (Breiten 320 bis 1920, gemessen auf Instrument Sans;
   der Fliesstext steht seit 2026-08-30 auf Inter — Breiten nicht neu gemessen)
   -------------------------------------------------------
   1440px  337px hoch (vorher 441px, davor 665px mit Waisenspalte)
    390px  853px (vorher 885px)
   Kein waagrechter Ueberlauf und kein umbrechender Linktext auf keiner
   Breite. Keine Waisenspalte, kein Loch unter der Marke.
   ============================================================================ */

/* ── Rahmen ────────────────────────────────────────────────────────────────
   Hintergrund und Randlinie standen vorher als Inline-`style` am `<footer>`
   selbst — dadurch war der Ton auf `domains`/`quin-plus` nur zufaellig
   gleich. Jetzt traegt die Klasse ihn.

   Die Polster sind am 17.08. enger gestellt worden (oben 44–80px → 26–42px,
   unten 26–34px → 16–20px). Das ist der groesste Einzelposten der Schlankung. */
.tqf {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-muted);
}
.tqf-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: clamp(26px, 3vw, 42px) 24px clamp(16px, 1.8vw, 20px);
}

/* ── Oberer Teil ───────────────────────────────────────────────────────────
   HIER LAG DER DESKTOP-FEHLER von 2026-08. Damals waren Marke und die vier
   Linkbloecke FUENF gleichrangige Kinder EINES
   `repeat(auto-fit, minmax(230px,1fr))`. Bei 1220px Inhaltsbreite ergibt
   auto-fit genau VIER Spuren — der fuenfte Block fiel allein in eine zweite
   Zeile, daneben drei leere Spuren.

   Erste Loesung war eine eigene Rasterspur fuer die Marke. Die war richtig,
   erzeugte aber das erwaehnte Loch. Seit 17.08. steht die Marke deshalb ueber
   den Spalten statt neben ihnen: `block` statt `grid`, die Linkspalten
   bekommen die volle Breite. Das kann per Bauart keine Waise erzeugen. */
.tqf-top { display: block; }

/* ── Markenleiste ──────────────────────────────────────────────────────────
   Die Sozial-Knoepfe sind bewusst NICHT unten rechts in der Schlusszeile:
   dort sitzt das Quin-Fenster (die Rechnung dazu steht bei `.tqf-base`).
   Auf 1440px verdeckte Quin frueher den Discord-Knopf.

   Logo-Umschaltung ueber ZWEI `<img>` (`.logo-light`/`.logo-dark`) plus
   `[data-theme]` — dieselbe Mechanik wie in der Kopfleiste. techq.ch laeuft
   heute fest im Hellmodus; die zweite Fassung bleibt trotzdem im Markup,
   damit Kopf- und Fusszeile nicht auseinanderlaufen. Die Sichtbarkeit regeln
   allein `.logo-light`/`.logo-dark` (Merkregel aus dem Vault) — die
   Groessenregel hier enthaelt deshalb bewusst KEIN `display`. */
.tqf-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border-strong);
}
.tqf-logo { display: inline-flex; align-items: center; }
.tqf-logo img { height: 26px; width: auto; }
.tqf-soc {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tqf-soc a {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color .15s, border-color .15s, background-color .15s;
}
.tqf-soc a:hover { color: var(--text); border-color: var(--text-faint); background: var(--surface); }

/* 44px unter 560px. Diese Regel stand bis 12.08.2026 als `html .soc` in
   `shop-mobil.css` (Messreihe vom 09.08.). Sie ist mit umgezogen, statt dort
   auf den alten Klassennamen zu zeigen: eine Regel, deren Selektor ins Leere
   greift, meldet sich nicht — sie wirkt einfach nicht mehr. */
@media (max-width: 560px) {
  .tqf-soc a { width: 44px; height: 44px; }
}

/* ── Linkspalten ───────────────────────────────────────────────────────────
   Zwei Spalten auf dem Telefon, drei ab 760px, fuenf ab 1000px. Fest, nicht
   auto-fit — siehe die Begruendung oben.

   Warum bei 760px DREI und nicht gleich fuenf: fuenf Spuren auf 712px
   Inhaltsbreite lassen je Spur 118px, und «Nutzungsrichtlinie» braucht rund
   145px. Der Linktext waere umgebrochen, und genau das war eine der
   Anforderungen der Messreihe vom 12.08.: kein umbrechender Linktext auf
   keiner Breite.

   Geprueft und VERWORFEN: `column-count: 2` fuer den Telefonfall. Der Gedanke
   war, den Browser die Hoehen ausgleichen zu lassen. Gemessen wurde es
   schlechter, nicht besser: `break-inside: avoid` darf einen Block nicht
   teilen, und damit gleicht der Browser schlechter aus als ein festes
   Raster. */
.tqf-cols {
  display: grid;
  gap: 26px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
@media (min-width: 760px) {
  .tqf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 24px; }
}
@media (min-width: 1000px) {
  .tqf-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; }
}

/* Spaltentitel als Grosslabel. Das ist KEIN neuer Stil, sondern die Sprache,
   die auf techq.ch schon fuer die Brotkrumen gilt (Versalien, weite
   Laufweite). Bis 2026-08-30 kam der Registerwechsel gegenueber den Links auch
   ueber die Schriftfamilie — `.tqf-h` stand auf JetBrains Mono. Seit die ganze
   Seite auf einer Schrift laeuft, tragen ihn Versalien und Laufweite allein,
   nicht der Schriftgrad. Deshalb duerfen 11.5px und 14.5px hier weiter nah
   beieinander liegen. */
.tqf-h {
  margin: 0 0 12px;
  font-family: var(--tq-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text);
}
.tqf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tqf-link {
  color: var(--text-body);
  font-size: 14.5px;
  line-height: 1.4;
  display: inline-block;
  transition: color .15s;
}
.tqf-link:hover { color: var(--accent); }

/* Auf dem Telefon war jedes Linkziel 20px hoch — zu wenig zum Treffen.
   Statt Abstand ZWISCHEN den Zeilen bekommt jede Zeile eigene Polsterung:
   die Trefferflaeche waechst auf 38px, die Spalte wird dabei kaum hoeher.

   Ausgeloest wird das NICHT allein von der Breite. Ein iPad hochkant ist
   768px breit, liegt also ueber dem Umbruchpunkt — ist aber trotzdem ein
   Finger. Gemessen: ohne `hover:none` bekam genau dieses Geraet 21px-Ziele.
   Dieselbe Bedingung nutzt `shop-mobil.css` bereits fuer die 44px-Fassung
   der Sozial-Knoepfe. */
@media (max-width: 759px), (hover: none) {
  .tqf-list { gap: 0; }
  .tqf-link { padding: 9px 0; }
}

/* ── Schlusszeile ──────────────────────────────────────────────────────────
   Traegt nur die Copyright-Zeile mit dem Claim, links.

   RECHTS GEHOERT NICHTS HIN. Dort klebt das Quin-Fenster: der Knopf ist 107px
   breit und sitzt fest 20px vom Rand, seine linke Kante liegt bei
   `Fensterbreite - 127`. Die Fusszeile endet bei `Fensterbreite/2 + 586`
   (max-width 1220 minus 24px Polster). Beide ueberlappen, solange
   `B - 127 < B/2 + 586` — also unterhalb von 1426px, und das trifft 1280 und
   1366 voll. Deshalb sind am 12.08. die Sozial-Knoepfe von hier nach oben
   gewandert, und deshalb ist am 17.08. die kurzzeitige Betriebsanzeige nur mit
   124px Freihaltung dorthin gekommen. Sie ist am selben Abend wieder entfallen
   (Entscheid Fabrizio: "sieht nicht gut aus") — mit ihr die Freihalteregel,
   `assets/fusszeile-status.js` und die `.tqf-status`-Regeln.
   Der Weg zur Statusseite laeuft ueber die Spalte "Hilfe". */
.tqf-base {
  margin-top: clamp(20px, 2.2vw, 26px);
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: space-between;
}
.tqf-copy {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-faint);
}

/* Tastaturbedienung: die Links tragen keinen eigenen Fokusring, damit der
   des Browsers sichtbar bleibt — auf dem Creme-Grund der Fusszeile braucht
   er aber Abstand, sonst klebt er am Text. */
.tqf a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .tqf-link, .tqf-soc a { transition: none; }
}