/* DROPPY – FAQ
   Wird nur auf diesen Seiten zusätzlich zu main.css geladen. */

/*  6. FAQ SECTION  */

.section-faq {
    padding-bottom: 5rem;
}

.section-faq .panel .panel-title {
    font-weight: 400;
    color: var(--c-text);
}

.section-faq .panel .panel-title .panel-toggle i {
    float: left;
    font-size: 1.25em;
    margin-right: 10px;
    color: var(--c-coral);
}

.section-faq .contact-lead .title {
    margin-bottom: 1rem;
    font-size: 1rem;
    text-transform: none;
}

/*  Variante: FAQ-Box (Bootstrap-Panel mit Collapse-JS)  */

.section-faq .panel.card-tile {
    padding: 0;
    margin-bottom: var(--space-1);
    overflow: hidden;
}

.section-faq .panel.card-tile + .panel.card-tile { margin-top: 0; }

.section-faq .panel .panel-heading { padding: 16px; background: transparent; border: 0; }

.section-faq .panel .panel-body { padding: 0 24px 24px; color: var(--c-text); border: 0; }

/*  4.7 Haekchen-Liste  */

.list-disc {
    list-style: disc;
    margin-left: 20px;
}

/*  4.8 CTA-Band (einziges Schlussband, ueberall gleich, ruhig)  */

.cta-band .title,
.cta-band h2,
.cta-band h3,
.cta-band h4 {
    margin: 0 0 var(--space-1);
    color: var(--c-dark);
    font-size: var(--fs-lg);
    font-weight: 600;
    text-transform: none;
}

/*  FAQ: alle Panel-Titel gleich, egal welche Ueberschrift-Ebene  */

.section-faq .panel .panel-title,
.section-faq .panel h2.panel-title,
.section-faq .panel h3.panel-title,
.section-faq .panel h4.panel-title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: 1.5;
    color: var(--c-text);
}

.section-faq .panel .panel-body h2,
.section-faq .panel .panel-body h3 {
    margin: var(--space-2) 0 var(--space-1);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-dark);
}

/*  4.9 Badges  */

.pill {
    display: inline-block;
    margin-left: var(--space-1);
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: middle;
    background: rgb(var(--rgb-dark) / .07);
    color: var(--c-dark);
}

.pill--free { background: rgb(var(--rgb-teal) / .15); color: var(--c-dark); }

.pill--plus { background: rgb(var(--rgb-coral) / .15); color: var(--c-coral-dark); }

/*  4.13 FAQ-Navigation und Gruppen  */

.faq-part {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 55px 0 var(--space-2);
    color: var(--c-coral);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.faq-part.title { font-size: var(--fs-md); }

.faq-part:before,
.faq-part:after { content: ""; flex: 1; border-top: 1px solid var(--c-line); }

.faq-section {
    margin: var(--space-2) 0 40px;
    padding: 10px 40px 40px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-bg);
}

.faq-section.is-general { border-top: 3px solid var(--c-teal); }

.faq-section.is-offers { border-top: 3px solid var(--c-coral); }

.faq-section .faq-group { margin-top: 35px; }

.faq-section .faq-group:first-of-type { margin-top: 20px; }

.faq-section .faq-divider { margin-top: 35px; }

.faq-group { margin-top: 50px; scroll-margin-top: 90px; }

.faq-group .group-intro { text-align: center; margin: -10px auto var(--space-3); max-width: 700px; }

.faq-divider { margin: 45px 0 0; border: 0; border-top: 1px solid var(--c-line); }

/*  4.14 Responsiv  */

@media (max-width: 767px) {
    .faq-section { padding: 10px 15px 30px; }
}