/* ─── Kreativloft FAQ ───────────────────────────────────────────────────── */
/* Nur strukturelles CSS — Schriften und Farben werden vom Theme geerbt.      */

:root {
  --kb-faq-ease: cubic-bezier(.645, .045, .355, 1);
  --kb-faq-dur:  .35s;
}

.kb-faq {
  --kb-faq-accent:  var(--kb-accent,  #de652f);
  --kb-faq-border:  var(--kb-border,  #E8DDD2);
  --kb-faq-radius:  var(--kb-radius,  10px);
  --kb-faq-muted:   var(--kb-muted,   rgba(36,37,44,.52));
  --kb-faq-card:    #F7F6F4;   /* gleicher Grauton wie Package- und Extra-Karten */
  --kb-faq-icon:    #E2E1DF;   /* Icon-Kreis Hintergrund */
  font-size: inherit;
  color: var(--kb-body, inherit);
  max-width: 100%;
}

/* ── Header (Titel + Untertitel + Kontakt-Link) ────────────────────────── */
.kb-faq__header {
  margin-bottom: 40px;
}

.kb-faq__title {
  font-family: var(--kb-font-heading, inherit);
  font-size: 2.5em;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 14px;
}

.kb-faq__subtitle {
  font-size: 1em;
  color: var(--kb-faq-muted);
  line-height: 1.6;
  margin: 0;
}

.kb-faq__contact-link {
  color: var(--kb-faq-accent);
}

/* ── Unstyled variant (style="none") ─────────────────────────────────────── */
.kb-faq--unstyled,
.kb-faq--unstyled .kb-faq__item,
.kb-faq--unstyled .kb-faq__question,
.kb-faq--unstyled .kb-faq__answer {
  all: revert;
}

/* ── FAQ item (<details>) ─────────────────────────────────────────────────── */
.kb-faq__item {
  padding: 0 24px;
  background: transparent;
  border-radius: 0;
  /* Karten-Hintergrund und Radius animieren */
  transition:
    background var(--kb-faq-dur) var(--kb-faq-ease),
    border-radius var(--kb-faq-dur) var(--kb-faq-ease),
    margin var(--kb-faq-dur) var(--kb-faq-ease);
}

/* Offenes Element: Karten-Darstellung */
.kb-faq__item.is-open {
  background: var(--kb-faq-card);
  border-radius: 16px;
  margin: 4px 0 8px;
}

/* Trennlinie vor dem geöffneten Element ausblenden */
.kb-faq__item:has(+ .kb-faq__item.is-open) {
  border-bottom: none;
}

/* ── Summary / Frage ────────────────────────────────────────────────────── */
.kb-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--kb-font-heading, inherit);
  font-weight: 600;
  font-size: 1em;
  line-height: 1.4;
  user-select: none;
}

.kb-faq__question::-webkit-details-marker { display: none; }
.kb-faq__question::marker               { display: none; content: ''; }

/* ── Toggle-Icon (Kreis mit + / −) ──────────────────────────────────────── */
.kb-faq__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Background + Rotation animieren */
  transition:
    background var(--kb-faq-dur) var(--kb-faq-ease),
    transform  var(--kb-faq-dur) var(--kb-faq-ease);
}

/* Hintergrundfarbe und Rotation im geöffneten Zustand */
.kb-faq__item.is-open .kb-faq__icon {
  background: var(--kb-faq-icon);
  transform: rotate(180deg);
}

/* Waagerechter Strich — immer sichtbar */
.kb-faq__icon::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 2px;
  background: rgba(36,37,44,.55);
  border-radius: 1px;
}

/* Senkrechter Strich — im geschlossenen Zustand sichtbar (= Plus) */
.kb-faq__icon::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 12px;
  background: rgba(36,37,44,.55);
  border-radius: 1px;
  opacity: 1;
  transition: opacity var(--kb-faq-dur) var(--kb-faq-ease);
}

/* Geöffnet: senkrechter Strich ausfaden → ergibt Minus */
.kb-faq__item.is-open .kb-faq__icon::after {
  opacity: 0;
}

/* ── Antwort-Wrapper: Höhe animieren (explizite px-Werte per JS, wie Ohio) ── */
.kb-faq__answer-wrap {
  display: block !important; /* UA-Stylesheet für <details> überschreiben */
  overflow: hidden;
  height: 0;                 /* JS setzt Zielhöhe; 0 = geschlossen */
  transition: height var(--kb-faq-dur) var(--kb-faq-ease);
}

/* ── Antwort ─────────────────────────────────────────────────────────────── */
.kb-faq__answer {
  min-height: 0;
  padding: 0 0 24px;
  line-height: 1.7;
  color: var(--kb-body, inherit);
}

/* .kb-faq__answer a — Farbe kommt vom Theme */