/* ================================================================
   BLOCK 1 von 3 — CSS des Fragenkatalogs (Ersatz für den Chatbot).
   Aus streampark-faq-widget.html übernommen. Farben oben anpassen,
   sonst nichts.
   ================================================================ */
.spf{
  --spf-accent:#F4523B;
  --spf-bg:#17191D;
  --spf-bg-2:#1F2229;
  --spf-line:#2C2F36;
  --spf-ink:#EDEEF0;
  --spf-ink-2:#A0A6AE;
  --spf-radius:12px;
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:9999;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.spf *{box-sizing:border-box}

/* --- Auslöser --- */
.spf__launch{
  display:flex; align-items:center; gap:.55rem;
  background:var(--spf-accent); color:#fff; border:0;
  padding:.8rem 1.15rem; border-radius:999px; cursor:pointer;
  font-size:.92rem; font-weight:600; letter-spacing:.01em; font-family:inherit;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.spf__launch:hover{transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.45)}
.spf__launch:focus-visible{outline:2px solid #fff; outline-offset:3px}
.spf__launch svg{width:17px;height:17px;flex:none}
.spf[data-open="true"] .spf__launch{display:none}

/* --- Panel --- */
.spf__panel{
  display:none; width:min(94vw,25.5rem); max-height:min(78vh,40rem);
  background:var(--spf-bg); color:var(--spf-ink);
  border:1px solid var(--spf-line); border-radius:var(--spf-radius);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  overflow:hidden; flex-direction:column;
}
.spf[data-open="true"] .spf__panel{display:flex}

.spf__head{
  padding:1rem 1.1rem .9rem; border-bottom:1px solid var(--spf-line);
  display:flex; align-items:flex-start; gap:.75rem;
}
.spf__title{font-size:.95rem; font-weight:700; margin:0 0 .15rem}
.spf__sub{font-size:.74rem; color:var(--spf-ink-2); margin:0; line-height:1.4}
.spf__close{
  margin-left:auto; background:none; border:0; color:var(--spf-ink-2);
  font-size:1.35rem; line-height:1; cursor:pointer; padding:.1rem .25rem;
}
.spf__close:hover{color:var(--spf-ink)}
.spf__close:focus-visible{outline:2px solid var(--spf-accent); outline-offset:2px}

.spf__searchwrap{padding:.8rem 1.1rem; border-bottom:1px solid var(--spf-line)}
.spf__search{
  width:100%; background:var(--spf-bg-2); border:1px solid var(--spf-line);
  color:var(--spf-ink); border-radius:8px; padding:.55rem .7rem;
  font-size:.86rem; font-family:inherit;
}
.spf__search::placeholder{color:var(--spf-ink-2)}
.spf__search:focus{outline:none; border-color:var(--spf-accent)}

.spf__body{overflow-y:auto; padding:.5rem 0 .9rem; flex:1}
.spf__cat{
  font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--spf-ink-2); padding:1rem 1.1rem .4rem;
}
.spf__item{border-bottom:1px solid var(--spf-line)}
.spf__item:last-child{border-bottom:0}
.spf__q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  color:var(--spf-ink); font-size:.88rem; line-height:1.45; font-weight:500;
  padding:.75rem 2.2rem .75rem 1.1rem; position:relative; font-family:inherit;
}
.spf__q:hover{background:var(--spf-bg-2)}
.spf__q:focus-visible{outline:2px solid var(--spf-accent); outline-offset:-2px}
.spf__q::after{
  content:""; position:absolute; right:1.1rem; top:1.15rem;
  width:7px; height:7px; border-right:1.6px solid var(--spf-ink-2);
  border-bottom:1.6px solid var(--spf-ink-2); transform:rotate(45deg);
  transition:transform .18s ease;
}
.spf__q[aria-expanded="true"]{color:var(--spf-accent)}
.spf__q[aria-expanded="true"]::after{transform:rotate(-135deg); border-color:var(--spf-accent)}
.spf__a{padding:0 1.1rem 1rem; font-size:.85rem; line-height:1.62; color:var(--spf-ink-2)}
.spf__a p{margin:0 0 .7rem}
.spf__a p:last-child{margin-bottom:0}
.spf__a a{color:var(--spf-accent)}
.spf__empty{padding:1.6rem 1.1rem; font-size:.85rem; color:var(--spf-ink-2)}
.spf__empty a{color:var(--spf-accent)}

.spf__foot{
  border-top:1px solid var(--spf-line); padding:.85rem 1.1rem;
  font-size:.78rem; color:var(--spf-ink-2); line-height:1.5;
}
.spf__foot a{color:var(--spf-accent); text-decoration:none; font-weight:600}
.spf__foot a:hover{text-decoration:underline}

@media (max-width:480px){
  .spf{right:.7rem; bottom:.7rem; left:.7rem}
  .spf__panel{width:auto}
}
@media (prefers-reduced-motion:reduce){ .spf *{transition:none!important} }