/* Fragen und Antworten zur Aktion: schwarze Fläche in der Black-Deals-Kategorie, .bd-faq--page auf der Landingpage.
   Wird nur auf diesen Seiten geladen (Block\Page\Faq).
   Überschriften und Absätze tragen !important, weil das Kategorie-Theme h2, h3 und p in .column.main
   mit eigener Farbe und Größe belegt und die Schrift auf Schwarz sonst dunkelblau bliebe. */
.bd-faq {
    --bd-faq-black: #080a0b;
    --bd-faq-red: #c63543;
    --bd-faq-line: rgba(255, 255, 255, 0.16);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin: 56px 0 40px;
    padding: clamp(28px, 4.2vw, 60px);
    overflow: hidden;
    border-radius: 22px;
    background: var(--bd-faq-black);
    color: #ffffff;
    isolation: isolate;
}

/* Rotes Glühen oben links, atmet langsam. */
.bd-faq::before {
    content: "";
    position: absolute;
    top: -180px;
    left: -140px;
    z-index: -1;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(198, 53, 67, 0.5) 0%, rgba(198, 53, 67, 0) 68%);
    animation: bd-faq-glow 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bd-faq-glow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}

.bd-faq .bd-faq__head {
    position: relative;
    margin: 0;
    padding: 0;
}

.bd-faq .bd-faq__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
}

.bd-faq .bd-faq__tag {
    display: inline-block;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #ffffff;
    border-radius: 999px;
    color: #ffffff;
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

/* „Endet in …“: gefüllt in Rot, der Text kommt aus js/countdown.js. */
.bd-faq .bd-faq__tag--countdown {
    border-color: var(--bd-faq-red);
    background: var(--bd-faq-red);
}

.bd-faq .bd-faq__tag--countdown[hidden] {
    display: none;
}

.bd-faq .bd-faq__title {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #ffffff !important;
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: clamp(28px, 3.4vw, 46px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.08 !important;
    text-align: left !important;
    text-transform: none !important;
    hyphens: manual;
}

/* Roter Strich unter der Überschrift, ein Lichtstreifen läuft darüber. */
.bd-faq .bd-faq__title::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin-top: 22px;
    background: linear-gradient(90deg, var(--bd-faq-red) 0%, var(--bd-faq-red) 40%, #ff8c97 50%, var(--bd-faq-red) 60%, var(--bd-faq-red) 100%);
    background-size: 300% 100%;
    animation: bd-faq-sweep 3.6s linear infinite;
}

@keyframes bd-faq-sweep {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

.bd-faq .bd-faq__intro {
    max-width: 34ch;
    hyphens: manual;
    -webkit-hyphens: manual;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

.bd-faq .bd-faq__list {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--bd-faq-line);
}

.bd-faq .bd-faq__item {
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--bd-faq-line);
    background: transparent;
}

.bd-faq .bd-faq__question {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 22px 0;
    color: #ffffff;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.bd-faq .bd-faq__question::-webkit-details-marker {
    display: none;
}

.bd-faq .bd-faq__question::marker {
    content: "";
}

.bd-faq .bd-faq__question:focus-visible {
    outline: 2px solid var(--bd-faq-red);
    outline-offset: 4px;
}

.bd-faq .bd-faq__num {
    flex: none;
    width: 30px;
    color: var(--bd-faq-red);
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
}

.bd-faq .bd-faq__q {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #ffffff !important;
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: clamp(17px, 1.45vw, 21px) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    text-transform: none !important;
    hyphens: manual;
    -webkit-hyphens: manual;
    transition: color 0.18s ease;
}

.bd-faq .bd-faq__icon {
    position: relative;
    flex: none;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transition: transform 0.28s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.bd-faq .bd-faq__icon::before,
.bd-faq .bd-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    margin: -1px 0 0 -7px;
    background: #ffffff;
}

.bd-faq .bd-faq__icon::after {
    transform: rotate(90deg);
}

.bd-faq .bd-faq__question:hover .bd-faq__icon {
    border-color: var(--bd-faq-red);
}

.bd-faq .bd-faq__item[open] .bd-faq__icon {
    border-color: var(--bd-faq-red);
    background: var(--bd-faq-red);
    transform: rotate(45deg);
}

.bd-faq .bd-faq__answer {
    margin: 0;
    padding: 0 56px 26px 48px;
    animation: bd-faq-open 0.3s ease both;
}

@keyframes bd-faq-open {
    0% { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 1; transform: translateY(0); }
}

.bd-faq .bd-faq__answer p {
    max-width: 64ch;
    hyphens: manual;
    -webkit-hyphens: manual;
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    text-align: left !important;
}

.bd-faq .bd-faq__answer p:last-child {
    margin-bottom: 0 !important;
}

/* Landingpage: ein schwarzes Band ohne Rundung und ohne Glühen, Überschrift wie die Abschnittstitel dort.
   Auf der schwarzen Kampagnenseite fällt das Band nicht auf, auf einer hellen Seite trägt es den Block.
   Steht für sich, damit der Block im Seiteninhalt und unter dem Seiteninhalt gleich aussieht. */
.bd-faq.bd-faq--page {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 76px max(28px, calc((100% - 1376px) / 2));
    overflow: visible;
    border-radius: 0;
    background: var(--bd-faq-black);
}

.bd-faq.bd-faq--page::before {
    content: none;
}

.bd-faq.bd-faq--page .bd-faq__title {
    color: var(--bd-faq-red) !important;
    font-size: clamp(25px, 3.75vw, 48px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.12 !important;
    text-transform: uppercase !important;
}

.bd-faq.bd-faq--page .bd-faq__title::after {
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, var(--bd-faq-red) 50%, #ffffff 60%, #ffffff 100%);
    background-size: 300% 100%;
}

@media (min-width: 960px) {
    .bd-faq {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
        gap: clamp(36px, 5vw, 80px);
        align-items: start;
    }

    .bd-faq .bd-faq__head {
        position: sticky;
        top: 120px;
    }
}

@media (max-width: 600px) {
    .bd-faq {
        margin: 40px 0 28px;
        border-radius: 16px;
    }

    .bd-faq.bd-faq--page {
        margin: 0;
        padding: 52px 18px;
        border-radius: 0;
    }

    .bd-faq .bd-faq__question {
        gap: 12px;
        padding: 18px 0;
    }

    .bd-faq .bd-faq__num {
        width: 24px;
        font-size: 12px;
    }

    .bd-faq .bd-faq__icon {
        width: 32px;
        height: 32px;
    }

    .bd-faq .bd-faq__answer {
        padding: 0 0 22px 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bd-faq::before,
    .bd-faq .bd-faq__title::after,
    .bd-faq .bd-faq__answer {
        animation: none;
    }

    .bd-faq .bd-faq__icon,
    .bd-faq .bd-faq__q {
        transition: none;
    }
}