/* ==========================================================================
   Aufwind – Häufige Fragen: Themenleiste, Suche, Gruppen
   ========================================================================== */

.wind__a { stroke: var(--farbe-mint-300); stroke-width: 22; }
.wind__b { stroke: var(--farbe-salbei-200); stroke-width: 14; }

.seitenkopf--schmal h1 {
  max-width: 20ch;
}

.faq {
  display: grid;
  gap: var(--abstand-6);
  align-items: start;
}

/* --- Themen ----------------------------------------------------------------- */
.faq__themen ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  padding: 0;
  list-style: none;
}

.faq__themen-titel {
  display: none;
}

.faq__themen a {
  display: inline-flex;
  align-items: center;
  min-height: var(--klickflaeche);
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-pille);
  background: var(--farbe-flaeche);
  box-shadow: inset 0 0 0 1.5px var(--farbe-salbei-200);
  color: var(--farbe-petrol-900);
  font-weight: 600;
  text-decoration: none;
}

.faq__themen a:hover {
  background: var(--farbe-mint-100);
}

/* --- Werkzeuge ------------------------------------------------------------------ */
.faq__werkzeuge {
  display: grid;
  gap: var(--abstand-3);
  margin-bottom: var(--abstand-6);
  padding: var(--abstand-5);
  border-radius: var(--radius-l);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-s);
}

.suchfeld {
  position: relative;
}

.suchfeld .icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--farbe-petrol-700);
  pointer-events: none;
}

.suchfeld .eingabe {
  padding-left: 3rem;
}

.faq__werkzeuge .knopf {
  justify-self: start;
}

.faq__status {
  color: var(--farbe-petrol-700);
  font-size: var(--text-s);
  font-weight: 700;
}

.faq__status:empty {
  display: none;
}

@container seite (min-width: 48rem) {
  .faq__werkzeuge {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .faq__status {
    grid-column: 1 / -1;
  }
}

/* --- Gruppen ------------------------------------------------------------------------ */
.faq__gruppe {
  scroll-margin-top: 6.5rem;
}

.faq__gruppe + .faq__gruppe {
  margin-top: var(--abstand-7);
}

.faq__gruppe h2 {
  margin-bottom: var(--abstand-4);
  font-size: var(--text-xl);
}

/* --- Abschluss ---------------------------------------------------------------- */
.frage {
  display: grid;
  gap: var(--abstand-5);
  align-items: center;
}

.frage h2 {
  font-size: var(--text-2xl);
}

.frage p {
  margin-top: var(--abstand-2);
}

@container seite (min-width: 60rem) {
  .faq {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--abstand-7);
  }

  .faq__themen {
    position: sticky;
    top: 6.5rem;
  }

  .faq__themen-titel {
    display: block;
    margin-bottom: var(--abstand-3);
    color: var(--farbe-text-leise);
    font-size: var(--text-s);
    font-weight: 700;
  }

  .faq__themen ul {
    flex-direction: column;
  }

  .frage {
    grid-template-columns: 1fr auto;
  }
}