/* =====================================================
   FAQ – öffentliche Seite: Filter-Leiste + Akkordeon.
   Ruhig und zentriert, passend zum Webseiten-Look.
   ===================================================== */
.fq-page { --fq-ink:#16181d; --fq-muted:#6b6f76; --fq-line:#e7e7e4;
  color: var(--fq-ink); background:#fff; }
.fq-page *, .fq-page *::before, .fq-page *::after { box-sizing:border-box; }
.fq-in { max-width: 820px; margin:0 auto; padding: 56px 24px 90px; }

.fq-head { text-align:center; margin-bottom:26px; }
/* Einheitlicher Kicker wie über alle Bausteine (13px, .18em, fett, Akzentfarbe). */
.fq-kick { font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lp-accent, var(--fq-muted)); }
.fq-h1 { font-size:clamp(30px,5vw,50px); font-weight:800; letter-spacing:-.02em; margin:8px 0 0; }

/* Filter-Leiste (wie Portfolio) */
.fq-filter { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 34px; }
.fq-fbtn { border:1px solid var(--fq-line); background:#fff; color:var(--fq-muted);
  padding:8px 18px; border-radius:999px; font-size:14px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:background .14s, color .14s, border-color .14s; }
.fq-fbtn:hover { color:var(--fq-ink); border-color:#bbb; }
.fq-fbtn.is-on { background:var(--fq-ink); border-color:var(--fq-ink); color:#fff; }

/* Gruppen nach Kategorie: Name als Überschrift über den Fragen. */
.fq-list { display:flex; flex-direction:column; gap:12px; }
.fq-group { display:flex; flex-direction:column; gap:12px; }
.fq-group + .fq-group { margin-top:26px; }
.fq-cat-title { font-size:clamp(19px,2.4vw,24px); font-weight:800; letter-spacing:-.01em;
  margin:0 2px 2px; color:var(--fq-ink); }
.fq-group + .fq-group .fq-cat-title { padding-top:8px; }

/* Akkordeon */
.fq-item { border:1px solid var(--fq-line); border-radius:12px; background:#fff; overflow:hidden; }
.fq-item > summary {
  list-style:none; cursor:pointer; padding:18px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:17px; font-weight:700; color:var(--fq-ink);
}
.fq-item > summary::-webkit-details-marker { display:none; }
.fq-item > summary:hover { color:#000; }
.fq-q { flex:1; }

/* Plus-/Minus-Symbol rechts, dreht beim Öffnen. */
.fq-ico { position:relative; width:18px; height:18px; flex-shrink:0; }
.fq-ico::before, .fq-ico::after { content:''; position:absolute; background:currentColor; border-radius:2px;
  transition:transform .25s ease, opacity .25s ease; }
.fq-ico::before { top:8px; left:0; width:18px; height:2px; }              /* waagerecht */
.fq-ico::after  { top:0; left:8px; width:2px; height:18px; }             /* senkrecht  */
.fq-item[open] .fq-ico::after { transform:rotate(90deg); opacity:0; }    /* Minus beim Öffnen */

.fq-a { padding:0 22px 20px; color:var(--fq-muted); font-size:16px; line-height:1.75; }
.fq-a p { margin:0 0 .8em; }
.fq-a p:last-child { margin-bottom:0; }
/* Auszeichnungen aus lpText() (fett/kursiv/Farben) übernehmen die lp.css-Regeln. */
/* Optionales Bild unter der Antwort. */
.fq-a-img { margin-top:14px; }
.fq-a-img img { max-width:100%; height:auto; border-radius:10px; display:block; }

.fq-empty { text-align:center; color:var(--fq-muted); padding:50px 0; }

@media (max-width:600px) {
  .fq-in { padding:40px 18px 70px; }
  .fq-item > summary { padding:16px 18px; font-size:16px; }
  .fq-a { padding:0 18px 18px; }
}

/* Ausgewogene Zeilenumbrüche (systemweit): Überschriften gleichmäßig, Fließtext ohne Einzelwort am Ende. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }