/* ════════════════════════════════════════════════════════════════════════
   Werkbund FAQ – seriös, Apple-like, dezent grün (Werkbund-CI)
   SEO/GEO: Antworten sind immer im DOM; Ein-/Ausklappen rein visuell.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --wbfhg-green: var(--wb-green, var(--global-palette1, #2f6b40));
  --wbfhg-green-soft: rgba(47, 107, 64, 0.06);
  --wbfhg-green-line: rgba(47, 107, 64, 0.22);
  --wbfhg-ink: var(--global-palette5, #1d2127);
  --wbfhg-muted: #6b7280;
  --wbfhg-line: rgba(17, 24, 39, 0.09);
  --wbfhg-line-strong: rgba(17, 24, 39, 0.14);
  --wbfhg-surface: #ffffff;
  --wbfhg-bg: #fbfbfa;
  --wbfhg-radius: 14px;
  --wbfhg-radius-lg: 18px;
}

.wbfhg-faq,
.wbfhg-hub,
.wbfhg-page-search {
  margin: 32px 0;
  -webkit-font-smoothing: antialiased;
}

/* ── Shell ───────────────────────────────────────────────────────────── */
.wbfhg-shell {
  padding: clamp(20px, 2vw, 32px);
  border: 1px solid var(--wbfhg-line);
  border-radius: var(--wbfhg-radius-lg);
  background: var(--wbfhg-bg);
}

/* ── Header ──────────────────────────────────────────────────────────── */
.wbfhg-head,
.wbfhg-hub__head,
.wbfhg-page-search__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 16px 28px;
  align-items: end;
  margin-bottom: clamp(20px, 2vw, 28px);
}

.wbfhg-page-search__inner {
  padding: 18px 20px;
  border: 1px solid var(--wbfhg-line);
  border-radius: var(--wbfhg-radius-lg);
  background: var(--wbfhg-surface);
  margin-bottom: 0;
}

.wbfhg-eyebrow {
  margin: 0 0 10px;
  font-size: .7rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wbfhg-green);
}

.wbfhg-title,
.wbfhg-hub__title,
.wbfhg-page-search__title {
  margin: 0;
  font-size: clamp(1.6rem, 2.1vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  font-weight: 600;
  color: var(--wbfhg-ink);
  text-wrap: balance;
}

.wbfhg-page-search__title {
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
}

.wbfhg-intro,
.wbfhg-hub__intro,
.wbfhg-page-search__intro {
  margin: 12px 0 0;
  max-width: 66ch;
  color: var(--wbfhg-muted);
  line-height: 1.62;
  font-size: .98rem;
}

/* ── Suche ───────────────────────────────────────────────────────────── */
.wbfhg-search-wrap { width: 100%; justify-self: end; }

.wbfhg-search {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--wbfhg-line-strong);
  border-radius: var(--wbfhg-radius);
  background: var(--wbfhg-surface);
  font: inherit;
  color: var(--wbfhg-ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.wbfhg-search:focus {
  outline: none;
  border-color: var(--wbfhg-green-line);
  box-shadow: 0 0 0 3px var(--wbfhg-green-soft);
}
.wbfhg-search::placeholder { color: #9aa1ac; }

/* ── Liste ───────────────────────────────────────────────────────────── */
.wbfhg-list,
.wbfhg-hub__sets { display: grid; gap: 10px; }
.wbfhg-hub__sets { gap: 22px; }

.wbfhg-item {
  border: 1px solid var(--wbfhg-line);
  border-radius: var(--wbfhg-radius);
  background: var(--wbfhg-surface);
  overflow: hidden;
  transition: border-color .2s ease, background-color .2s ease;
}

.wbfhg-item:hover { border-color: var(--wbfhg-line-strong); }

.wbfhg-item__heading { margin: 0; }

.wbfhg-item__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.wbfhg-item__question,
.wbfhg-item__answer,
.wbfhg-item__answer * { min-width: 0; max-width: none !important; }

.wbfhg-item__question {
  display: block;
  margin: 0;
  font-size: clamp(1rem, 1.05vw, 1.16rem);
  line-height: 1.38;
  font-weight: 550;
  color: var(--wbfhg-ink);
  transition: color .2s ease;
}

/* Icon: schlichtes Plus/Minus, dünn */
.wbfhg-item__icon {
  position: relative;
  width: 18px;
  height: 18px;
  justify-self: end;
  color: var(--wbfhg-muted);
  transition: color .2s ease, transform .25s ease;
}
.wbfhg-item__icon::before,
.wbfhg-item__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1.5px;
  border-radius: 99px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .2s ease;
}
.wbfhg-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

/* ── Panel: animiert über grid-template-rows (Text bleibt im DOM!) ────── */
.wbfhg-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1);
}
.wbfhg-item__panel > .wbfhg-item__answer-inner {
  overflow: hidden;
  min-height: 0;
}

/* Offener Zustand: dezent grün, ruhig */
.wbfhg-item.is-open {
  border-color: var(--wbfhg-green-line);
  background: var(--wbfhg-green-soft);
}
.wbfhg-item.is-open .wbfhg-item__question { color: var(--wbfhg-green); }
.wbfhg-item.is-open .wbfhg-item__icon { color: var(--wbfhg-green); transform: rotate(180deg); }
.wbfhg-item.is-open .wbfhg-item__icon::after { opacity: 0; }
.wbfhg-item.is-open .wbfhg-item__panel { grid-template-rows: 1fr; }

.wbfhg-item__answer {
  color: var(--wbfhg-ink);
  font-size: clamp(.96rem, 1vw, 1.04rem);
  line-height: 1.7;
  padding: 0 22px 20px;
}
.wbfhg-item__answer > :first-child { margin-top: 0; }
.wbfhg-item__answer > :last-child { margin-bottom: 0; }
.wbfhg-item__answer a { color: var(--wbfhg-green); text-underline-offset: 2px; }

/* ── Hub-Variante ────────────────────────────────────────────────────── */
.wbfhg-faq--hub .wbfhg-shell { padding: clamp(16px, 1.7vw, 22px); border-radius: var(--wbfhg-radius-lg); background: var(--wbfhg-surface); }
.wbfhg-faq--hub .wbfhg-title { font-size: clamp(1.3rem, 1.6vw, 1.8rem); }
.wbfhg-faq--hub .wbfhg-head { grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; }
.wbfhg-faq--hub .wbfhg-eyebrow, .wbfhg-faq--hub .wbfhg-search-wrap { display: none; }

.wbfhg-faq[data-hide-local-search="true"] .wbfhg-search-wrap { display: none !important; }
.wbfhg-faq[data-hidden-by-search="true"] { display: none !important; }

/* SEO/GEO: Wenn JS aus ist, sind alle Antworten offen sichtbar. */
.wbfhg-faq.no-js .wbfhg-item__panel { grid-template-rows: 1fr; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .wbfhg-head,
  .wbfhg-hub__head,
  .wbfhg-page-search__inner { grid-template-columns: 1fr; align-items: start; }
  .wbfhg-search-wrap { justify-self: stretch; }
}

@media (max-width: 767px) {
  .wbfhg-faq,
  .wbfhg-hub,
  .wbfhg-page-search { margin: 22px 0; }
  .wbfhg-shell { padding: 16px; border-radius: var(--wbfhg-radius-lg); }
  .wbfhg-page-search__inner { padding: 14px; }
  .wbfhg-item__trigger { padding: 15px 16px; gap: 14px; }
  .wbfhg-item__answer { padding: 0 16px 16px; }
  .wbfhg-title,
  .wbfhg-hub__title { font-size: clamp(1.4rem, 8vw, 2rem); }
  .wbfhg-item__question { font-size: 1rem; }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wbfhg-item,
  .wbfhg-item__panel,
  .wbfhg-item__icon,
  .wbfhg-item__icon::before,
  .wbfhg-item__icon::after,
  .wbfhg-search { transition: none; }
}