/* rk-faq.css — zentraler FAQ-/Akkordeon-Baustein (Runde 7, 30.09.2026)
   Vertrag: .rk-faq[data-rk-faq] > details.rk-faq__item > summary.rk-faq__q (.rk-faq__q-text + .rk-faq__icon) + .rk-faq__a
   Verhalten (nur EINE offen, weiche Höhe): /assets/js/rk-faq.js. Ohne JS bleibt es ein normales <details>.
   Werte nur über --rk-faq-* (Standardwerte verweisen auf Tokens aus main-v2.css). */
:root {
  --rk-faq-max: 860px;
  --rk-faq-gap: 10px;
  --rk-faq-bg: var(--surface-card);
  --rk-faq-line: color-mix(in srgb, var(--text-primary) 14%, transparent);
  --rk-faq-line-open: var(--rk-line-strong, var(--text-muted));
  --rk-faq-radius: var(--rk-radius-md, 12px);
  --rk-faq-q-min-h: 64px;            /* Tippfläche ≥ 48 px, hier großzügig */
  --rk-faq-pad-x: 20px;
  --rk-faq-q-fs: 1.1875rem;
  --rk-faq-a-fs: var(--rk-fs-body, 1.125rem);
  --rk-faq-a-color: var(--text-secondary);
  --rk-faq-icon: 18px;
  --rk-faq-shadow-open: 0 1px 2px rgba(17, 18, 16, .04), 0 24px 48px -24px rgba(17, 18, 16, .20);
  --rk-faq-dur-open: 420ms;
  --rk-faq-dur-close: 320ms;
  --rk-faq-ease: cubic-bezier(.23, 1, .32, 1);
  --rk-faq-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 2v14M2 9h14' stroke='black' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  --rk-faq-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2 9h14' stroke='black' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --rk-faq-shadow-open: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 48px -24px rgba(0, 0, 0, .7);
}

.rk-faq { display: grid; gap: var(--rk-faq-gap); max-width: var(--rk-faq-max); margin: 0 auto; }
.rk-faq__item {
  border: 1px solid var(--rk-faq-line);
  border-radius: var(--rk-faq-radius);
  background: var(--rk-faq-bg);
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.rk-faq__item[open] { border-color: var(--rk-faq-line-open); box-shadow: var(--rk-faq-shadow-open); }
.rk-faq__q {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: var(--rk-faq-q-min-h); padding: 16px var(--rk-faq-pad-x);
  color: var(--text-primary); font-size: var(--rk-faq-q-fs); line-height: 1.35; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.rk-faq__q::-webkit-details-marker { display: none; }
.rk-faq__q:focus-visible { outline: 2px solid var(--rk-focus-color); outline-offset: -3px; box-shadow: var(--rk-focus-ring); border-radius: var(--rk-faq-radius); }
.rk-faq__q-text { flex: 1; min-width: 0; overflow-wrap: break-word; }
.rk-faq__icon {
  flex: none; width: var(--rk-faq-icon); height: var(--rk-faq-icon);
  background-color: currentColor;
  -webkit-mask: var(--rk-faq-icon-plus) center / contain no-repeat;
          mask: var(--rk-faq-icon-plus) center / contain no-repeat;
  transition: transform .35s var(--rk-faq-ease);
}
.rk-faq__item[open] > .rk-faq__q .rk-faq__icon {
  -webkit-mask-image: var(--rk-faq-icon-minus); mask-image: var(--rk-faq-icon-minus);
  transform: rotate(180deg);
}
.rk-faq__a { padding: 0 var(--rk-faq-pad-x) 22px; display: grid; gap: 12px; color: var(--rk-faq-a-color); font-size: var(--rk-faq-a-fs); line-height: 1.65; }
.rk-faq__a > * { margin: 0; }
.rk-faq__a a { overflow-wrap: break-word; }
@media (max-width: 600px) {
  :root { --rk-faq-pad-x: 16px; --rk-faq-q-fs: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rk-faq__item, .rk-faq__icon { transition: none; }
}