/* TELACY ESPORTS — FAQ-Seite (02.10.2026)
   Ergaenzt die Grundregeln fuer .faq/.faqeintrag aus site.css (die auch
   das Dashboard nutzt) nur fuer faq.html: Suche, Kategorien, Treffer,
   Anker, "Copy link", Leerzustand, Hinweis aufs Forum. */

.faqversteckt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Werkzeugleiste: Suche, Kategorien, Zahl ─────────────────── */
.faqseite .faqwerkzeug{display:flex;flex-direction:column;gap:14px;min-width:0}
.faqsuche{position:relative;max-width:640px}
.faqsuche svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--dim);pointer-events:none}
.faqsuche input{width:100%;min-height:48px;padding:12px 14px 12px 44px;background:var(--black);border:1px solid var(--line);
  color:var(--txt);font:400 15px/1.4 Barlow,sans-serif;transition:border-color .18s,background .18s}
.faqsuche input::placeholder{color:#5C5C68}
.faqsuche input:focus{outline:none;border-color:var(--brand)}
.faqsuche input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.faqchips{min-width:0}
.faqchips .chip{cursor:pointer;background:none;font-family:Barlow,sans-serif}
.faqchips .chip[aria-pressed="true"]{background:var(--brand);color:#fff}
.faqchips .chip:focus-visible{outline:2px solid var(--brand-l);outline-offset:2px}
.faqstatus{margin:0;font-size:13px;color:var(--dim);min-height:1.2em}

/* ── Eintraege ───────────────────────────────────────────────── */
.faqseite .faqeintrag{scroll-margin-top:calc(var(--hdr) + 24px)}
.faqseite .faqgruppe{scroll-margin-top:calc(var(--hdr) + 24px)}
.faqseite .faqeintrag summary{border-radius:0}
.faqfrage{flex:1;min-width:0}
.faqantwort{padding:0 2px 18px}
.faqseite .faqantwort p{margin:0 0 12px}
.faqkopie{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 10px 0 0;background:none;border:0;cursor:pointer;
  color:var(--dim);font:500 12.5px/1 Barlow,sans-serif;transition:color .18s}
.faqkopie svg{width:15px;height:15px}
.faqkopie:hover{color:var(--white)}
.faqkopie:focus-visible{outline:2px solid var(--brand);outline-offset:2px;color:var(--white)}

/* Suchtreffer */
mark.faqtreffer{background:rgba(120,64,224,.42);color:var(--white);padding:0 1px;border-radius:2px}

/* Per Anker angesprungen: kurz hervorheben */
.faqeintrag.faqziel{animation:faqziel 2.2s var(--e)}
@keyframes faqziel{0%,30%{background:rgba(120,64,224,.16)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.faqeintrag.faqziel{animation:none}}

/* ── Kein Treffer ────────────────────────────────────────────── */
.faqleer{padding:var(--pad);background:var(--s1);border:1px solid var(--line)}
.faqleer h2{font-size:clamp(1.1rem,2vw,1.35rem);color:var(--white);text-transform:uppercase;margin:0 0 10px}
.faqleer p{margin:0 0 18px;color:var(--txt);line-height:1.6;max-width:62ch}
.faqleer a,.faqmehr a{color:var(--brand-l);text-decoration:underline;text-underline-offset:3px}

/* ── Weiter fragen: Forum und Kontakt ────────────────────────── */
.faqmehr{padding:var(--pad);background:var(--s1);border:1px solid var(--line);border-left:3px solid var(--brand)}
.faqmehr h2{font-size:clamp(1.1rem,2vw,1.35rem);color:var(--white);text-transform:uppercase;margin:0 0 10px}
.faqmehr p{margin:0;color:var(--txt);line-height:1.6;max-width:70ch}

/* ── Telefon ─────────────────────────────────────────────────── */
@media (max-width:620px){
  /* Kategorien in einer Zeile zum Wischen, die Seite selbst verschiebt sich nicht. */
  .faqchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);
    scroll-padding-inline:var(--gut)}
  .faqchips::-webkit-scrollbar{display:none}
  .faqchips .chip{flex:none}
  .faqseite .faqeintrag summary{font-size:15px;padding:16px 2px}
}