/**
 * @file        section/faq/faq.css
 * @location    /section/faq/faq.css
 * @description FAQ-Sektion. Prefix: faq__
 *              Accordion via HTML <details>/<summary> — kein JS.
 *
 *              FARBEN (COLOR-GUIDE.md — alle ≥ 7:1):
 *                BG:         C4 #f5f6f8
 *                Eyebrow:    C3/C4   7.85:1 ✓
 *                Titel:      C1/C4  11.66:1 ✓
 *                Subtitle:   C6/C4   8.22:1 ✓
 *                Subtitle-Link: C3/C4 7.85:1 ✓
 *                Cat-Label:  C3/C4   7.85:1 ✓
 *                Item BG:    C2 #ffffff
 *                  Q:        C1/C2  12.61:1 ✓
 *                  Chevron:  C3/C2   8.49:1 ✓
 *                  A:        C5/C2  14.02:1 ✓
 *                  A-Link:   C3/C2   8.49:1 ✓
 *                Open BG:    C10 #ddeaf5 — dekorativ
 *                CTA:        via g-btn tokens
 *
 * @version     1.0.0
 * @changelog
 *   1.0.0  2026-03-18  Erstversion.
 */

/* ── Section ─────────────────────────────────────────────────────── */
.faq__section {
    background: var(--color-page);
    padding:    var(--pad-section);
}
.faq__inner {
    max-width: var(--max-content);
    margin:    0 auto;
    padding:   0 var(--page-padding-x);
}

/* ── Header ──────────────────────────────────────────────────────── */
.faq__header {
    text-align:    center;
    margin-bottom: var(--space-12);
}
/* C3/C4 7.85:1 ✓ */
.faq__eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--space-2);
    font-size:      var(--text-xs);
    font-weight:    var(--weight-black);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color:          var(--color-blue);
    margin:         0 0 var(--space-3);
}
/* C1/C4 11.66:1 ✓ */
.faq__title {
    font-size:      var(--text-3xl);
    font-weight:    var(--weight-black);
    color:          var(--color-navy);
    letter-spacing: var(--tracking-tight);
    line-height:    var(--leading-tight);
    margin:         0 0 var(--space-3);
}
/* C6/C4 8.22:1 ✓ */
.faq__subtitle {
    font-size:   var(--text-base);
    color:       var(--color-ink-soft);
    margin:      0;
    line-height: var(--leading-normal);
}
/* C3/C4 7.85:1 ✓ */
.faq__subtitle-link {
    color:                 var(--color-blue);
    font-weight:           var(--weight-bold);
    text-decoration:       underline;
    text-underline-offset: 2px;
}
.faq__subtitle-link:hover         { color: var(--color-navy); }
.faq__subtitle-link:focus-visible {
    outline:        2px solid var(--color-blue);
    outline-offset: 2px;
    border-radius:  2px;
}

/* ── Grid: 3 Gruppen nebeneinander ──────────────────────────────── */
.faq__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-6);
    margin-bottom:         var(--space-12);
}

/* ── Gruppe ──────────────────────────────────────────────────────── */
.faq__group {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

/* C3/C4 7.85:1 ✓ */
.faq__cat {
    display:        flex;
    align-items:    center;
    gap:            var(--space-2);
    font-size:      var(--text-xs);
    font-weight:    var(--weight-black);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color:          var(--color-blue);
    margin:         0 0 var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom:  2px solid var(--color-blue);
}

/* ── Item (<details>) ────────────────────────────────────────────── */
.faq__item {
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow:      hidden;
    transition:    box-shadow var(--transition-fast);
}
.faq__item:hover {
    box-shadow: var(--shadow-xs);
}
.faq__item[open] {
    background: var(--color-ice);       /* C10 — dekorativ */
    border-color: var(--color-navy);
    box-shadow: var(--shadow-sm);
}

/* ── Summary (<summary>) ─────────────────────────────────────────── */
.faq__q {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-3);
    padding:         var(--space-4) var(--space-5);
    cursor:          pointer;
    list-style:      none;
    user-select:     none;
}
.faq__q::-webkit-details-marker { display: none; }

/* C1/C2 12.61:1 ✓ */
.faq__q span {
    font-size:   var(--text-sm);
    font-weight: var(--weight-bold);
    color:       var(--color-navy);
    line-height: var(--leading-snug);
    flex:        1;
}
/* C3/C2 8.49:1 ✓ */
.faq__chevron {
    font-size:   1rem;
    color:       var(--color-blue);
    flex-shrink: 0;
    transition:  transform .2s ease;
}
.faq__item[open] .faq__chevron {
    transform: rotate(45deg);
}
.faq__q:focus-visible {
    outline:        2px solid var(--color-blue);
    outline-offset: -2px;
}

/* ── Antwort ─────────────────────────────────────────────────────── */
.faq__a {
    padding:    0 var(--space-5) var(--space-4);
    border-top: 1px solid var(--color-border);
}
/* C5/C10 11.5:1 ✓ */
.faq__a p {
    font-size:   var(--text-sm);
    color:       var(--color-ink);
    line-height: var(--leading-relaxed);
    margin:      var(--space-3) 0 0;
}
/* C3/C10 — checked: C3/C2 8.49:1 (closed) */
.faq__a a {
    color:                 var(--color-blue);
    font-weight:           var(--weight-bold);
    text-decoration:       underline;
    text-underline-offset: 2px;
}
.faq__a a:hover         { color: var(--color-navy); }
.faq__a a:focus-visible {
    outline:        2px solid var(--color-blue);
    outline-offset: 2px;
    border-radius:  2px;
}

/* ── CTA ─────────────────────────────────────────────────────────── */
.faq__cta {
    display:         flex;
    justify-content: center;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .faq__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .faq__grid   { grid-template-columns: 1fr; }
    .faq__inner  { padding: 0 var(--page-padding-x-sm); }
    .faq__title  { font-size: var(--text-2xl); }
}
@media (prefers-reduced-motion: reduce) {
    .faq__chevron, .faq__item { transition: none; }
}