/* HTML Text aus- einklappen das CSS */

@font-face {
font-family: ‚Genericons‘;
src: url(‚assets/genericons/icon-font/Genericons-Neue.eot‘);
src: url(‚assets/genericons/icon-font/Genericons-Neue.eot?#iefix‘) format(‚embedded-opentype‘),
url(‚assets/genericons/icon-font/Genericons-Neue.woff‘) format(‚woff‘),
url(‚assets/genericons/icon-font/Genericons-Neue.ttf‘) format(‚truetype‘),
url(‚assets/genericons/icon-font/Genericons-Neue.svg#genericonsregular‘) format(’svg‘);
font-weight: normal;
font-style: normal;
}

details {
    /*border: thin solid;
    background: #fefede;*/
    padding: 0.25em 1em;
    margin-bottom: 1.5em;
}

summary {
    position: relative;
    padding-left: 1em;
    font-weight: 500;
}

summary:after {
    font-family: "FontAwesome";
    padding-left: 5px;
    vertical-align: sub;
    font-size: 1.2em;
    position: absolute;
    top: 0.05em;
    right: 0.5em;
    transition: all 0.5s;
}


details[open] summary::after {
    font-family: "FontAwesome";
    content: '';
    padding-left: 5px;
    vertical-align: sub;
    font-size: 1.2em;
    top: 0.05em;
    transform: scale(1, -1);
    margin-bottom: 1em;
}

details[open] summary {
    margin-bottom: 1em;
}

details summary {
    cursor: pointer;
}

details[open] summary ~ * {
    animation: open 0.6s ease-in-out;
}

@keyframes open {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*details[open] {
background: #ddffd1;
}
*/

summary:focus {
    outline: none;
}