/* CSS Name: Animationen - Magische Feste Description: Website von Marco Faller - Zauberei, Entertainment, Schauspiel Author: Marco Faller Author URL: magische-feste.de Version: 1.0 Datum: 2025-02-23 */:root{ --back-col-white: #ffffff; --back-col-rot: #580004; --acc-col-bronze: #d58936; --acc-col-smoke: #f5f5f5; --text-col-grey: #303030;}/*------------------------------------------------------------------------------------------Häufige Fragen*/.faq{ font-family: Lexend; color: var(--text-col-grey); font-size: clamp(1.2rem, 0.9091rem + 1.4545vw, 2rem); font-weight: 500; line-height: 1.75; margin: 2vh 0;}.faq li{ padding: 2vh 0; list-style: none;}.faq li:not(:last-child){ border-bottom: 1px solid var(--acc-col-smoke);}summary{ display: flex; justify-content: space-between; align-items: center; list-style-type: none; cursor: pointer; transition: color 100ms linear;}summary:hover{ color: black;}summary img{ width: 40px; transition: transform 50ms linear;}details > p{ padding: 0 0 0 1vw;}details > button{ margin: 0 0 0 1vw; }details[open] > p, details[open] > button{ animation: fadein 500ms ease-out;}details[open] > summary > img{ transform: scaleY(-1);}.faq-button{ height: min-content; width: 50%; background-color: var(--back-col-rot); margin: 0 0 0 1vw;}.faq a{ font-family: Lexend, Verdana, Geneva, Tahoma, sans-serif; font-size: clamp(1.2rem, 0.9091rem + 1.4545vw, 2rem); font-weight: 300; display: flex; flex-direction: row; justify-content: center; text-align: center; padding: 1rem 2rem; text-decoration: none; color: var(--acc-col-bronze); cursor: pointer; transition: color 250ms linear;}.faq a:hover{ color: #b87227;}@keyframes fadein{ from{ opacity: 0; } to{ opacity: 1; }}