/* Haeufige Fragen — techq.ch/faq
 *
 * Eigene Datei und nicht in `site.css`, weil `site.css` von 21 Seiten geladen
 * wird: jede Zeile dort erzwingt einen `?v=`-Bump in allen 21 (und in den fuenf
 * ueberuns-Seiten, die sie in einer ANDEREN Fassung laden — ?v=8 gegen ?v=16).
 * Eine eigene Datei, die nur diese Seite laedt, kostet keinen einzigen Bump.
 *
 * Der Name traegt `-shop`, weil `tools/kopien_pruefen.py` gleichnamige Dateien
 * in `assets/` der drei Auftritte vergleicht und Abweichungen meldet. Die
 * Kundencenter-Fassung (`my.techq.ch/assets/faq.js`) ist ein anderes Programm:
 * sie liest die Datenbank live, diese hier klappt fertiges HTML zusammen.
 * Gleicher Name waere eine Falschmeldung auf Dauer.
 *
 * techq.ch hat KEINEN Dunkelmodus (nur zwei Dark-Regeln in site.css, beide fuer
 * den Logo-Wechsel). Hier deshalb bewusst nur eine Palette.
 *
 * Blauer Text nur mit `--accent-text`: `--accent` (#3f7fdf) liegt auf weiss bei
 * 3.95:1 und faellt als Textfarbe durch. Steht so in site.css gemessen.
 */

/* ── Innenrahmen ──────────────────────────────────────────────────────────────
 * Genau wie `.legal` auf den Rechtsseiten: ein LINKS ausgerichteter Rahmen in
 * einem zentrierten `.container`. Stand die Breite am Container selbst, wurde er
 * mittig gesetzt und der ganze Fragenblock sass 170 px weiter rechts als
 * Ueberschrift und Logo — im Bild sofort zu sehen, im Code nicht.
 * 820 statt 780 wie `.legal`, weil die Karten je 24 px Innenabstand haben: die
 * Textspalte landet damit bei denselben ~772 px.
 */
.hfr-rahmen { max-width: 820px; }

/* ── Kopf: Suche und Zaehler ───────────────────────────────────────────────── */
.hfr-leiste {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 22px;
}
.hfr-suche { position: relative; flex: 1 1 300px; max-width: 420px; }
.hfr-suche input {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--text);
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  /* padding einzeln: die 40px links halten den Platz fuer die Lupe frei. */
  padding-top: 13px; padding-bottom: 13px; padding-right: 16px; padding-left: 40px;
}
.hfr-suche input::placeholder { color: var(--text-faint); }
.hfr-suche input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.hfr-suche svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); pointer-events: none;
}
.hfr-zaehler { font-size: 14px; color: var(--text-muted); white-space: nowrap; }

/* ── Sprungmarken zu den Abschnitten ──────────────────────────────────────── */
.hfr-sprung { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 34px; }
.hfr-sprung a {
  display: inline-flex; align-items: center; padding: 7px 14px;
  font-size: 14px; color: var(--text-body); text-decoration: none;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: 999px; transition: border-color .15s, color .15s, background .15s;
}
.hfr-sprung a:hover { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }

/* ── Abschnitt und Karte ──────────────────────────────────────────────────── */
.hfr-gruppe {
  font-size: 13px; font-weight: 500; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-faint);
  margin: 40px 0 12px; scroll-margin-top: 92px;   /* sonst verdeckt die Kopfleiste den Titel */
}
.hfr-gruppe:first-of-type { margin-top: 0; }
.hfr-liste {
  display: flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.hfr-eintrag { border-top: 1px solid var(--border-faint); scroll-margin-top: 92px; }
.hfr-eintrag:first-child { border-top: none; }

.hfr-frage {
  width: 100%; display: flex; align-items: center; gap: 18px;
  padding: 20px 24px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 17px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--text); transition: background .12s;
}
.hfr-frage:hover { background: var(--bg-soft); }
.hfr-frage:focus-visible { outline: none; box-shadow: var(--ring); }
.hfr-frage-t { flex: 1; min-width: 0; }
.hfr-pfeil { width: 20px; height: 20px; color: var(--text-faint); flex-shrink: 0; transition: transform .15s, color .15s; }
.hfr-eintrag.hfr-auf .hfr-pfeil { transform: rotate(180deg); color: var(--text); }

/* ── Antwort ──────────────────────────────────────────────────────────────────
 * WICHTIG, die Reihenfolge ist Absicht: Im HTML steht die Antwort OFFEN. Ohne
 * JavaScript — und fuer einen Crawler, der keines ausfuehrt — ist die Seite
 * damit vollstaendig lesbar. Erst `faq-shop.js` setzt `.hfr-js` auf den
 * Behaelter und klappt zu. Umgekehrt herum waere die Seite ohne JS leer.
 *
 * Zugeklappt wird ueber `display`, nicht ueber eine Maximalhoehe: eine Zahl wie
 * `max-height: 400px` schneidet lange Antworten stillschweigend ab, und die
 * laengste hier hat ueber 900 Zeichen samt Liste.
 */
.hfr-antwort { padding: 0 24px 22px; }
.hfr-js .hfr-eintrag:not(.hfr-auf) .hfr-antwort { display: none; }
.hfr-antwort p { font-size: 15.5px; line-height: 1.65; color: var(--text-body); margin: 0 0 12px; }
.hfr-antwort p:last-child { margin-bottom: 0; }
.hfr-antwort ul { margin: 0 0 12px; padding-left: 22px; }
.hfr-antwort ul:last-child { margin-bottom: 0; }
.hfr-antwort li { font-size: 15.5px; line-height: 1.65; color: var(--text-body); margin: 0 0 6px; }
.hfr-antwort strong { color: var(--text); font-weight: 500; }
.hfr-antwort a { color: var(--accent-text); }

/* Nur mit JavaScript sichtbar: ohne Suche gibt es nichts zu melden. */
.hfr-leer-karte { margin-top: 8px; }
.hfr-leer { padding: 28px 24px; font-size: 15px; color: var(--text-muted); }

/* ── Fuss ─────────────────────────────────────────────────────────────────── */
.hfr-help {
  margin-top: 34px; background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px 28px;
}
.hfr-help-t { font-size: 17px; font-weight: 500; color: var(--text); margin: 0 0 6px; }
.hfr-help-s { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin: 0 0 16px; }
.hfr-help-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .hfr-frage { padding: 18px 18px; font-size: 16px; gap: 14px; }
  .hfr-antwort { padding: 0 18px 20px; }
  .hfr-zaehler { flex: 1 1 100%; }
  .hfr-help { padding: 22px 20px; }
}

/* Verweis auf die Einzelseite der Frage (/hilfe/<slug>), seit 06.09.2026 */
.hfr-eigene{margin:14px 0 0;font-size:13.5px;line-height:1.5;}
.hfr-eigene a{color:var(--accent-text,#1c4f9e);text-decoration:none;}
.hfr-eigene a:hover{text-decoration:underline;}