/* =========================================================
   ALLGEMEINE CONTENT-SECTIONS
========================================================= */

.content-section {

    padding:
        70px 55px;

}

.section-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        32px;

}

.section-header h2 span {

    color:
        var(--pink);

}

.section-header h3 span {

    color:
        var(--pink);

}

.section-more {

    margin-bottom:
        7px;

    padding-bottom:
        4px;

    border-bottom:
        2px solid
        var(--lilac);

    font-size:
        0.76rem;

    font-weight:
        700;

}

/* kleiner Hinweis zum Schwierigkeitsgrad – kein eigener
   Bereich, sitzt zwischen "Neu & Beliebt" und der
   Schnittmuster-Übersicht */

.difficulty-info {

    padding-top:
        36px;

    margin-top:
        36px;

    margin-bottom:
        28px;

    border-top:
        1px solid
        var(--light-lilac);
background:var(--light-lilac);
}

.difficulty-info h3 {

    font-size:
        1.25rem;

}

.difficulty-info h3 span {

    color:
        var(--pink);

}

/* =====================================================
   SCHWIERIGKEITSGRAD
===================================================== */

.difficulty-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;

    gap: 50px;

    margin-top: 50px;
    padding: 30px 35px;

    background: rgba(255, 255, 255, 0.72);
    border-radius: 24px;
    background-color: var(--white);
}

/* LINKER BLOCK */

.difficulty-content {
    min-width: 0;
}

.difficulty-content h3 {
    margin: 0 0 18px;
}

/* EINACH / MITTEL / ANSPRUCHSVOLL */

.difficulty-legend {
    display: flex;
    align-items: center;
    gap: 30px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.difficulty-legend li {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;
    padding: 0;

    white-space: nowrap;
}

/* FARB-PUNKTE */

.difficulty-dot {
    display: block;
    flex: 0 0 12px;

    width: 12px;
    height: 12px;

    border-radius: 50%;
}

/* SCHWIERIGKEITSFARBEN */

.difficulty-easy {
    background-color: #bfe2cc;
}

.difficulty-medium {
    background-color: #bad5f2;
}

.difficulty-hard {
    background-color: #e5a6c1;
}

/* BUTTON RECHTS */

.difficulty-cta {
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
}

/* =========================================================
   GUT ZU WISSEN (FAQ)
========================================================= */

.faq-section {

    position:
        relative;

    overflow:
        hidden;

    background:
        var(--light-lilac);

    background-image:
        url("../images/gutzuwissen.svg");

    background-repeat:
        no-repeat;

    background-position:
        top center;

    background-size:
        100% auto;

}

.faq-decoration {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

}

.faq-decoration span {

    position:
        absolute;

    display:
        block;

    border-radius:
        50%;

    opacity:
        0.5;

    animation:
        decor-float
        6s
        ease-in-out
        infinite;

}

.faq-decoration span:nth-child(1) {

    width:
        150px;
    height:
        150px;

    right:
        -50px;
    top:
        60px;

    background:
        var(--pink);

    animation-delay:
        0s;

}

.faq-decoration span:nth-child(2) {

    width:
        90px;
    height:
        90px;

    right:
        300px;
    top:
        230px;

    background:
        var(--mint);

    animation-delay:
        0.6s;

}

.faq-decoration span:nth-child(3) {

    width:
        55px;
    height:
        55px;

    right:
        18%;
    bottom:
        18%;

    background:
        var(--white);

    animation-delay:
        1.2s;

}

.faq-section .section-header,
.faq-section .faq-intro,
.faq-section .faq-list {

    position:
        relative;

    z-index:
        2;

}

.faq-intro {

    margin:
        -14px 0 26px;

    color:
        var(--soft-dark);

    font-size:
        0.85rem;

}

.faq-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

    max-width:
        820px;

}

.faq-item {

    border-radius:
        20px;

    background:
        var(--cream);

    box-shadow:
        0 6px 20px
        rgba(81, 75, 87, 0.06);

    overflow:
        hidden;

    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;

}

.faq-item:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(81, 75, 87, 0.11);

}

.faq-item:has(.faq-question[aria-expanded="true"]) {

    background:
        var(--white);

    box-shadow:
        0 14px 32px
        rgba(81, 75, 87, 0.13);

}

.faq-item h3 {

    margin:
        0;

    font-size:
        1rem;

}

.faq-question {

    width:
        100%;

    padding:
        20px 24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    border:
        0;

    background:
        transparent;

    color:
        var(--dark);

    font-family:
        inherit;

    font-size:
        0.9rem;

    font-weight:
        700;

    text-align:
        left;

    cursor:
        pointer;

}

.faq-question > span:not(.faq-icon):not(.faq-topic-icon) {

    flex:
        1;

}

.faq-topic-icon {

    flex:
        0 0 36px;

    width:
        36px;
    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    font-size:
        1rem;

    line-height:
        1;

}

.faq-topic-mint {

    background:
        var(--mint);

}

.faq-topic-lilac {

    background:
        var(--light-lilac);

}

.faq-topic-pink {

    background:
        var(--pink);

}

.faq-topic-yellow {

    background:
        var(--yellow);

}

.faq-icon {

    position:
        relative;

    width:
        22px;
    height:
        22px;

    flex:
        0 0 22px;

    border-radius:
        50%;

    background:
        var(--white);

}

.faq-icon::before,
.faq-icon::after {

    content:
        "";

    position:
        absolute;

    top:
        50%;
    left:
        50%;

    background:
        var(--pink);

    transform:
        translate(-50%, -50%);

    transition:
        transform 0.2s ease;

}

.faq-icon::before {

    width:
        10px;
    height:
        2px;

}

.faq-icon::after {

    width:
        2px;
    height:
        10px;

}

.faq-question[aria-expanded="true"] .faq-icon::after {

    transform:
        translate(-50%, -50%)
        rotate(90deg)
        scaleY(0);

}

.faq-answer {

    padding:
        0 24px 22px 74px;

}

.faq-answer p {

    margin-bottom:
        12px;

    color:
        var(--soft-dark);

    font-size:
        0.84rem;

    line-height:
        1.7;

}

.faq-answer p:last-child {

    margin-bottom:
        0;

}

.faq-answer a {

    color:
        var(--dark);

    font-weight:
        700;

    text-decoration:
        underline;

    text-decoration-color:
        var(--pink);

    text-underline-offset:
        3px;

}

.faq-note {

    padding:
        26px 0 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    color:
        #aaa4ae;

    text-align:
        center;

}

.faq-note span {

    color:
        var(--pink);

    font-size:
        0.9rem;

}

.faq-note p {

    margin:
        0;

    font-size:
        0.75rem;

}

/* =========================================================
   SCHNITTMUSTER AUF STARTSEITE
========================================================= */

/* PLACEHOLDER (bis echte Fotos eingesetzt sind) */

.photo-placeholder {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    border-radius:
        20px;

    background:
        rgba(255,255,255,0.68);

    font-family:
        "Elfarg",
        serif;

    font-size:
        1.35rem;

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 900px) {

.content-section {

        padding-left:
            40px;

        padding-right:
            40px;

    }

.section-header {

        flex-wrap:
            wrap;

    }

.difficulty-legend {

        justify-content:
            center;

        width:
            100%;

    }

.content-section.faq-section {

        background-image:
            url("../images/gutzuwissen-tablet.svg");

    }

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

.difficulty-info {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 25px;

        padding: 25px 20px;
    }

.difficulty-content h3 {
        margin-bottom: 18px;
    }

.difficulty-legend {
        flex-direction: column;
        align-items: flex-start;

        gap: 10px;
    }

.difficulty-legend li {
        width: 100%;
    }

.difficulty-cta {
        width: 100%;
    }

.content-section.faq-section {

        padding-top:
            60px;

        padding-bottom:
            60px;

        background-image:
            url("../images/gutzuwissen-mobil.svg");

    }

.content-section {

        padding:
            60px 20px;

    }

.faq-question {

        padding:
            17px 18px;

        gap:
            12px;

        font-size:
            0.85rem;

    }

.faq-answer {

        padding:
            0 18px 18px;

    }

.section-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            15px;

    }

}