/* padding nach oben und unten wird auf denn title gesetzt damit man auf der ganzen höhe auf das element zum extenden clicken kann */
img {
    max-width: 100%;
}

.quest {
    width: 100%;
    padding: 0 1.25em;
    padding-top: 0;
    -webkit-box-shadow: 0px 4px 4px 0px #00000029;
    box-shadow: 0px 4px 4px 0px #00000029;
    border-radius: 4px;
    border: solid 1px #000;
    transition-duration: 200ms;
}

.quest .quest {
    border: solid 2px #00000029;
    box-shadow: none;
}

.quest.active,
.quest:hover {
    border: solid 1px #FF7608;
    box-shadow: none;
}

.quest.active {
    padding-bottom: 0.938em;
}

.quest>.title {
    padding-bottom: 0.938em;
    padding-top: 0.938em;
    transition-duration: 200ms;
    display: block;
    border-bottom: solid 0px #0000;
    margin: 0;
    padding-left: 1.25em;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently*/
}

.quest.active>.title,
.quest:hover>.title {
    color: var(--primaryColor);
}

.quest.active>.title,
.quest:active>.title {
    color: var(--black);
}

.quest.active>.title {
    padding-bottom: 0.875em;
    border-bottom: solid 1px var(--black);
    margin-bottom: 0.938em;
}

.quest>.title svg {
    --svgColor: var(--primaryColor);
    position: absolute;
    left: -0.5em;
    width: 1.5em;
    transition-duration: 200ms;
}

.quest.active>.title svg {
    transform: rotate(90deg);
}

.quest>.answer {
    display: grid;
    grid-template-rows: 0fr;
    transition-duration: 200ms;
    padding-left: 1.25em;
    opacity: 0;
}

.quest.active>.answer {
    grid-template-rows: 1fr;
    opacity: 1;
}

.quest>.answer>* {
    overflow: hidden;
}

.quest>.answer>* {
    font-size: 0.889em;
}

.quest>.answer .questionTypeBlock {
    font-size: var(--fontSize);
}

.questRowns {
    display: grid;
    grid-template-columns: repeat(3, 31%);
    justify-content: space-between;
    margin-bottom: 5em;
}

.questionTypeBlock {
    display: flex;
    flex-direction: column;
    gap: 0.625em;
}

.catGap {
    height: 3.333em;
}

.awnser {
    display: grid;
    grid-template-rows: 0fr;
    transition-duration: 200ms;
}

.active .awnser {
    grid-template-rows: 1fr;
}

.awnser .faqInhalt {
    overflow: hidden;
}

@media (max-width: 1000px) {
    .questRowns {
        grid-template-columns: 100%;
        row-gap: 3.333em;
    }
}