@font-face {
    font-family: 'Merriweather Sans Bold';
    src: url('MerriweatherSans-Bold.ttf') format('woff');
    }
 @font-face {
    font-family: 'Merriweather Sans';
    src: url('MerriweatherSans-Regular.ttf') format('woff');
    } 
body {
    display: flex;
    min-height: 100vh;
    margin: 0 auto;
    flex-direction: column;
}
body,p,h1,h2,h3,h4,h5,h6,a,div,table,ul,li,td,th {
    padding: 0px;
    margin: 0px;
    font-family: 'Merriweather Sans';
}
ul {
    padding-left: 20px;
}
h1,h2 {
    font-size: 2.2em;
    font-weight: 400;
    line-height: 130%;
}
h3 {
    font-size: 1.5em;
    font-weight: 400;
    color: #03937C;
    padding: 25px 0 15px 0;
    line-height: 130%;
}
h4 {
    font-size: 1.3em;
    font-weight: 400;
    color: #03937C;
    padding: 25px 0 15px 0;
    line-height: 130%;
}
a {
    text-decoration: none;
    color: #009CBC;
    letter-spacing: 0.03em;
}
a.magenta {
    color: #C71066;
}
a.gruen {
    color: #03937C;
}
.kleine-schrift {
    font-size: 0.8em;
}
#header {
    margin: 0;
}
#header img {
    height: 100px;
    width: 100%;
    text-align: center;
    padding: 45px 0 30px 0;
}
.baustein-auswahl {
    display: flex;
    flex-wrap: wrap;
    background-color: #CDE4EB;
}
.auswahl-links {
    width: 21.5%;
    height: 30%;
    padding: 18% 10% 8% 18.5%;
    background-image: url("live_licensing_hintergrund_003.jpg");
    background-repeat: no-repeat;
    background-color: #CDE4EB;
    background-size: 180%;
    background-position: 100% 10%;
    text-align: right;
}
.auswahl-rechts {
    width: 21.5%;
    height: 30%;
    padding: 18% 18.5% 8% 10%;
    background-image: url("live_licensing_hintergrund_004.jpg");
    background-repeat: no-repeat;
    background-size: 140%;
    background-position: 40% 5%;
}
.btn-cyan {
    background-color: #009CBC;
    height: 60%;
    width: 70%;
    padding: 5% 0 5% 0;
    color: #ffffff;
    font-size: 135%;
    font-family: 'Merriweather Sans Bold';
    border: 0;
    border-radius: 0.5em;
}
#absenden-nutzen.btn-cyan {
    font-size: 120%;
}
.btn-magenta {
    background-color: #C71066;
    height: 60%;
    width: 70%;
    padding: 5.3% 0 5% 0;
    color: #ffffff;
    font-size: 135%;
    font-family: 'Merriweather Sans Bold';
    border: 0;
    border-radius: 0.5em;
}
#sprache {
    text-align: center;
}
.btn-sprache {
    width: 60px;
    height: 30px;
    font-size: 18px;
    background-color: #ffffff;
    border: solid 1px #999999;
    border-bottom: 0;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    color: #999999;
    text-align: center;
}
.baustein-text-eins {
    background-color: #F5F5F5;
    margin: 0;
    padding: 0;
}
.baustein-text-zwei {
    background-color: #EEEEEE;
    margin: 0;
    padding: 0;
}
.baustein-text-drei {
    background-color: #F5F5F5;
    margin: 0;
    padding: 0 0 30px 0;
}
.ueberschrift {
    display: flex;
    height: 60px;
    padding-top: 70px;
}
.ueberschrift-links {
    background-color: #03937C;
    color: #ffffff;
    font-family: 'Merriweather Sans';
    padding: 5px 20px 0.3% 25%;
    margin: 0;
}
.container-absatz-volle-breite {
    width: 100%;
}
.container {
    padding-bottom: 30px;
    min-height: 5em;
    flex: 1;
}
.datenschutz {
    padding-bottom: 60px;
}
.absatz {
    color: #4A4A49;
    font-family: 'Merriweather Sans';
    font-size: 1.3em;
    padding: 35px 20px 30px 25%;
    width: 50%;
    line-height: 150%;
}
.datenschutz .absatz {
    padding: 5px 20px 0px 25%
} 
.absatz.top {
    padding-top: 30px;
}
.kontakt.absatz {
    height: 100%;
}
h4.top {
    padding-top: 0;
}
label {
    display: inline-block;
    width: 250px;
    padding: 15px 0 5px 0;
    color: #C71066;
    vertical-align: top;
}
.container.ich-nutze-musik, .container.ich-mache-musik {
    background-image: url("live_licensing_hintergrund_006.jpg");
    background-repeat: repeat-y;
    background-size: 100%;
    padding-bottom: 40px;
    margin-bottom: 30px;
}
h3.ich-nutze-musik, h3.ich-mache-musik {
    background-color: #009CBC;
    color: #ffffff;
    padding: 10px 25% 10px 25%;
    margin-top: 20px;
    font-size: 30px;
}
h3.ich-mache-musik {
    background-color: #C71066;
}    
.ich-nutze-musik label, h4.ich-nutze-musik {
    color: #009CBC;
}
.ich-mache-musik label, h4.ich-mache-musik {
    color: #C71066;
}
.ich-nutze-musik, .ich-mache-musik {
    color: #4A4A49;
}
.ich-nutze-musik-ueberschrift h4, .ich-mache-musik-ueberschrift h4 {
    color: #009CBC;
    font-size: 1.5em;
    font-family: 'Merriweather Sans';
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 50px 0 15px 25%;
}
.ich-mache-musik-ueberschrift h4 {
    color: #C71066;
}
input {
    display: inline-block;
    width: 450px;
    height: 30px;
    margin: 15px 0 0 0;
    padding: 2px 5px 2px 5px;
    border-radius: 5px;
    vertical-align: top;
    color: #009CBC;
    font-size: 1.2em;
}
#absenden-nutzen, #absenden-machen {
    text-align: left;
}
input#absenden-nutzen, input#absenden-machen {
    width: 240px;
    height: 50px;
    padding: 0;
    border-radius: 5px;
    text-align: center;
}
input#anrede-herr, input#anrede-frau, input#anrede-firma {
    margin: 15px 0 0 0;
}
textarea {
    display: inline-block;
    width: 450px;
    height: 200px;
    margin: 15px 0 0 0;
    padding: 2px 5px 2px 5px;
    border-radius: 5px;
    color: #009CBC;
    font-size: 1.2em;
}
.ich-nutze-musik input, .ich-nutze-musik textarea {
    border: #009CBC solid 1px;
}
.ich-mache-musik input, .ich-mache-musik textarea {
    border: #C71066 solid 1px;
}
#label-anrede-herr, #label-anrede-frau, #label-anrede-firma {
    width: 70px;
}
#anrede-herr, #anrede-frau, #anrede-firma {
    width: 20px;
}
.footer {
    background-color: #ffffff;
}
.footer .menu, .footer .menu a {
    font-family: 'Merriweather Sans Bold';
    color: #4A4A49;
    text-align: center;
    text-decoration: none;
    padding: 0px 20px 0px 0;
    line-height: 150%;
}
.footer .menu a {
    padding: 10px 0 20px 0;
}
.footer .adressdaten {
    font-family: 'Merriweather Sans';
    color: #4A4A49;
    width: 100%;
    text-align: center;
    padding: 10px 0 30px 0;
}
/* Accordion */
.accordion-inner {
    padding: 0 5% 5px 5%;
    background-color: #dddddd;
}
.accordion-inner h4 {
    padding: 5px 0 0 0;
    color: #C71066;
    font-size: 1em;
}
summary {
color: #C71066;
padding-top: 5px;
margin-top: -30px;
}
details > div {
padding: .5em;
overflow: hidden;
}
details[open] > div {
animation: sliding 1s forwards; 
}

@keyframes sliding {
0% {
    height: 0;
}  

100% {
    height: 100%;	
}
}
.absatz.ich-mache-musik.accordion {
    margin-top: -10px;
}
.absatz.ich-mache-musik.accordion ol {
    margin-top: 0;
}

@media screen and (max-width: 1440px) {

}
@media screen and (max-width: 1280px) {
.btn-cyan {
    width: 100%;
    padding: 5% 0 5% 0;
    margin-right: 5%;
    font-size: 120%;
}
.btn-magenta {
    width: 100%;
/*    padding: 5% 0 5% 0;*/
    font-size: 120%;
}
.auswahl-links {
    width: 21.5%;
    height: 30%;
/*    padding: 18% 10% 8% 20%;*/
}
}
@media screen and (max-width: 800px) {
.auswahl-links {
    width: 100%;
    height: 30%;
    padding: 18% 20% 8% 20%;
    background-size: 180%;
    background-position: 100% 10%;
}
.auswahl-rechts {
    width: 100%;
    height: 30%;
    padding: 18% 20% 8% 20%;
    background-size: 140%;
    background-position: 40% 5%;
}
.btn-cyan {
    height: 40%;
    width: 100%;
    padding: 6% 0 6% 0;
    font-size: 120%;
    border-radius: 0.5em;
}
.btn-magenta {
    height: 40%;
    width: 100%;
    padding: 6% 0 6% 0;
    font-size: 120%;
    border-radius: 0.5em;
}
.ueberschrift {
    height: 100%;
}
.ueberschrift-links {
    padding: 5px 20px 1% 10%;
}
h3.ich-nutze-musik, .ich-nutze-musik-ueberschrift h4, h3.ich-mache-musik, .ich-mache-musik-ueberschrift h4 {
    padding-left: 10%;
    padding-right: 10%;
}
.absatz {
    padding: 35px 20px 30px 10%;
    width: 80%;
    line-height: 150%;
}
.footer {
    padding: 0 10% 0 10%;
}
input, textarea {
    width: 100%;
    margin-top: 0px;
}
input#absenden-nutzen, input#absenden-machen {
    margin-top: 20px;
}
}

@media screen and (max-width: 400px) {

}