[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: Book Antiqua,Constantia,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    overscroll-behavior: none;
}
body {
    background-color: #999afe;
}
body.bg-yellow {
    background-color: #ffff88;
}
body.bg-white {
    background-color: white;
}

h1 {
    font-family: Constantia;
}
h1.desktop {
    position: fixed;
    top: 30px;
    left: 40px;
    font-weight: normal;
    font-size: 25px;
    display: none;
}
h1.mobile {
    padding: 10px;
    background-image: url('/images/bgleft.png');
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
}
.font_lilalucy {
    color: rgb(153, 0, 153); /*#8D385F;*/
    font-size: 35px;
    padding-left: 3px;
}
.font_eisdrache {
    color: #0000ff; /*#073185;*/
    font-size: 35px;
    padding-left: 3px;
}
h1 a, h1 a:visited, h1 a:hover {
    display: inline-block;
    text-decoration: none;
    color: unset;
}

#container_left {
    position: absolute;
    top: 0;
    left: 0;
    height: 160px;
    right: 0;
}
#container_left div {
    display: none;
    position: fixed;
    top: 400px;
    left: 40px;
}
@media (min-width: 768px) {
    #container_left {
        background-image: url('/images/bgleft.png');
        background-repeat: repeat-y;
        position: fixed;
        height: unset;
        bottom: 0;
    }
    #container_left .desktop {
        display: inline-block;
    }
    #container_left .mobile {
        display: none;
    }
}

#container_main {
    position: relative;
    margin: 120px 0 0 0;
    padding: 0 0 20px 0;
}
#container_main .content {
    padding: 20px 10px;
    position: relative;
    min-height: 200px;
}
@media (min-width: 768px) {
    #container_main {
        margin: 0;
        padding: 30px 20px 20px 0;
        margin-left: 300px;
    }
    #container_main .content {
        padding: 0 20px 20px 10px;
    }
}

h2 {
    padding: 20px 10px 0 40px;
    margin: 0;
    font-weight: bold;
}
@media (min-width: 768px) {
    h2 {
        padding: 0 40px 20px 40px;
        background-image: none;
    }
    .h2-gradient {
        background-image: none;
    }
}

#container_nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
#container_nav .toggler {
    position: absolute;
    top: 0;
    right: 0;
}
#container_nav .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #999afe;
}
.bg-yellow #container_nav .content {
    background-color: #ffff88;
}
.bg-white #container_nav .content {
    background-color: white;
}

#container_nav .content .collapse {
    border-bottom: 1px solid #444;
}
.navbar-dark .navbar-toggler {
	background-color: rgba(68,68,68,0.8);
}
#container_nav h5 {
    font-family: Constantia;
    padding-right: 60px;
}
#container_nav h5 .font_lilalucy {
    font-size: inherit;
}
#container_nav h5 .font_eisdrache {
    font-size: inherit;
}
#container_nav .content a, #container_nav .content a:link, #container_nav .content a:visited {
    color: #073185;
}
#container_nav .content a:hover {
    text-decoration: underline;
}
#container_nav .content  h5 a, #container_nav .content  h5 a:visited, #container_nav .content  h5 a:hover {
    display: block;
    text-decoration: none;
    color: inherit;
}
@media (min-width: 768px) {
    #container_nav {
        left: 300px;
    }
}

#container_cookie {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background-color: rgba(200, 200, 200, 0.8);
    text-align: center;
}

.small {
    font-size: small;
}
.grey {
    color: #444;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

/**************************************** Startseite ****************************************/

div.start.desktop {
    display: none;
}
div.start.desktop .start_image {
    position: absolute;
    /*top: 20px;*/
}
div.start.desktop .start_image img {
    width: calc(100% - 350px);
    height: auto;
}
div.start.desktop .start_link {
    position: absolute;
    display: inline-block;
    text-align: center;
    font-size: 22px;
    padding: 30px;
}
div.start.desktop .start_link_buch { /* x = 60; x, x, x, x+50, x+50, x+50 */
    background: radial-gradient(rgb(195, 29, 127),  rgb(255, 255, 255, 0) 70%);
    right: 200px;
    color: lightyellow;
}
div.start.desktop .start_link_figuren {
    background: radial-gradient(rgb(209, 156, 243),  rgb(255, 255, 255, 0) 70%);
    right: 0;
    color: #073185;
}
div.start.desktop .start_link_lieder {
    background: radial-gradient(rgb(54, 138, 208),  rgb(255, 255, 255, 0) 70%);
    right: 150px;
    color: rgb(195, 29, 127);
}
div.start.desktop .start_link_autoren {
    background: radial-gradient(rgb(243, 156, 185),  rgb(255, 255, 255, 0) 70%);
    right: 0;
    color: yellow;
}
div.start.desktop .start_link_instrumente {
    background: radial-gradient(rgb(145, 29, 107),  rgb(255, 255, 255, 0) 70%);
    right: 50px;
    color: rgb(58, 40, 158);
}
div.start.desktop .start_link_wusstestdu {
    background: radial-gradient(rgb(209, 156, 243),  rgb(255, 255, 255, 0) 70%);
    right: 0;
    color: #073185;
}
div.start.desktop .start_link_mehrideen {
    background: radial-gradient(lightyellow,  rgb(255, 255, 255, 0) 70%);
    right: 120px;
    color: rgb(195, 29, 127);
}
div.start.desktop .start_link_buch        { top: calc(40px + 0 * 70px + 0 * 30px); }
div.start.desktop .start_link_figuren     { top: calc(40px + 1 * 70px + 0 * 30px); }
div.start.desktop .start_link_lieder      { top: calc(40px + 2 * 70px + 0 * 30px); }
div.start.desktop .start_link_autoren     { top: calc(40px + 3 * 70px + 1 * 30px); }
div.start.desktop .start_link_instrumente { top: calc(40px + 4 * 70px + 2 * 30px); }
div.start.desktop .start_link_wusstestdu  { top: calc(40px + 5 * 70px + 3 * 30px); }
div.start.desktop .start_link_mehrideen   { top: calc(40px + 6 * 70px + 4 * 30px); }
@media (min-width: 1450px) {
    div.start.desktop .start_image img { width: calc(100% - 300px); }
    div.start.desktop .start_link_buch        { top: calc(40px + 0 * 90px + 0 * 30px); }
    div.start.desktop .start_link_figuren     { top: calc(40px + 1 * 90px + 0 * 30px); }
    div.start.desktop .start_link_lieder      { top: calc(40px + 2 * 90px + 0 * 30px); }
    div.start.desktop .start_link_autoren     { top: calc(40px + 3 * 90px + 1 * 30px); }
    div.start.desktop .start_link_instrumente { top: calc(40px + 4 * 90px + 2 * 30px); }
    div.start.desktop .start_link_wusstestdu  { top: calc(40px + 5 * 90px + 3 * 30px); }
    div.start.desktop .start_link_mehrideen   { top: calc(40px + 6 * 90px + 4 * 30px); }
}
@media (min-width: 1550px) {
    div.start.desktop .start_image img { width: calc(100% - 200px); }
    div.start.desktop .start_link_buch        { top: calc(40px + 0 * 105px + 0 * 30px); }
    div.start.desktop .start_link_figuren     { top: calc(40px + 1 * 105px + 0 * 30px); }
    div.start.desktop .start_link_lieder      { top: calc(40px + 2 * 105px + 0 * 30px); }
    div.start.desktop .start_link_autoren     { top: calc(40px + 3 * 105px + 1 * 30px); }
    div.start.desktop .start_link_instrumente { top: calc(40px + 4 * 105px + 2 * 30px); }
    div.start.desktop .start_link_wusstestdu  { top: calc(40px + 5 * 105px + 3 * 30px); }
    div.start.desktop .start_link_mehrideen   { top: calc(40px + 6 * 105px + 4 * 30px); }
}
@media (min-width: 1650px) {
    div.start.desktop .start_image img { width: calc(100% - 100px); }
    div.start.desktop .start_link_buch        { top: calc(40px + 0 * 120px + 0 * 30px); }
    div.start.desktop .start_link_figuren     { top: calc(40px + 1 * 120px + 0 * 30px); }
    div.start.desktop .start_link_lieder      { top: calc(40px + 2 * 120px + 0 * 30px); }
    div.start.desktop .start_link_autoren     { top: calc(40px + 3 * 120px + 1 * 30px); }
    div.start.desktop .start_link_instrumente { top: calc(40px + 4 * 120px + 2 * 30px); }
    div.start.desktop .start_link_wusstestdu  { top: calc(40px + 5 * 120px + 3 * 30px); }
    div.start.desktop .start_link_mehrideen   { top: calc(40px + 6 * 120px + 4 * 30px); }
}
@media (min-width: 1750px) {
    div.start.desktop .start_link_buch        { top: calc(40px + 0 * 135px + 0 * 30px); right: 250px; }
    div.start.desktop .start_link_figuren     { top: calc(40px + 1 * 135px + 0 * 30px); }
    div.start.desktop .start_link_lieder      { top: calc(40px + 2 * 135px + 0 * 30px); }
    div.start.desktop .start_link_autoren     { top: calc(40px + 3 * 135px + 1 * 30px); }
    div.start.desktop .start_link_instrumente { top: calc(40px + 4 * 135px + 2 * 30px); }
    div.start.desktop .start_link_wusstestdu  { top: calc(40px + 5 * 135px + 3 * 30px); }
    div.start.desktop .start_link_mehrideen   { top: calc(40px + 6 * 135px + 4 * 30px); right: 170px; }
    /*div.start.desktop .start_link_buch        { top: 100px; }
    div.start.desktop .start_link_figuren     { top: 200px; }
    div.start.desktop .start_link_lieder      { top: 300px; }
    div.start.desktop .start_link_autoren     { top: 430px; }
    div.start.desktop .start_link_instrumente { top: 580px; }
    div.start.desktop .start_link_wusstestdu  { top: 720px; }
    div.start.desktop .start_link_mehrideen   { top: 840px; }*/
}

.start_link a, .start_link a:visited, .start_link a:hover {
    display: inline-block;
    padding: 10px;
    text-decoration: none;
    color: unset;
}

div.start.mobile .start_image img {
    width: 95%;
    height: auto;
}
div.start.mobile .start_link_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 20px;
}
div.start.mobile .start_link {
    display: inline-block;
    text-align: left;
    font-size: 22px;
    padding: 30px;
}

div.start.mobile .start_link_buch {
    background: radial-gradient(rgb(195, 29, 127),  rgb(255, 255, 255, 0) 70%);
    color: lightyellow;
}
div.start.mobile .start_link_figuren {
    background: radial-gradient(rgb(209, 156, 243),  rgb(255, 255, 255, 0) 70%);
    color: #073185;
}
div.start.mobile .start_link_lieder {
    background: radial-gradient(rgb(54, 138, 208),  rgb(255, 255, 255, 0) 70%);
    color: rgb(195, 29, 127);
}
div.start.mobile .start_link_autoren {
    background: radial-gradient(rgb(243, 156, 185),  rgb(255, 255, 255, 0) 70%);
    color: yellow;
}
div.start.mobile .start_link_instrumente {
    background: radial-gradient(rgb(165, 100, 137),  rgb(255, 255, 255, 0) 70%);
    color: rgb(58, 40, 158);
}
div.start.mobile .start_link_wusstestdu {
    background: radial-gradient(rgb(209, 156, 243),  rgb(255, 255, 255, 0) 70%);
    color: #073185;
}
div.start.mobile .start_link_mehrideen {
    background: radial-gradient(lightyellow,  rgb(255, 255, 255, 0) 70%);
    color: rgb(195, 29, 127);
}

@media (min-width: 1240px) {
    div.start.mobile {
        display: none;
    }
    div.start.desktop {
        display: block;
    }
}

.start_link_mehrideen {
    display: none !important;
}

.hide-mobile {
    display: none;
}
@media (min-width: 1240px) {
    .show-mobile {
        display: none;
    }
    .hide-mobile {
        display: unset;
    }
    .content-figuren .row {
        margin-top: 0;
    }
}

/**************************************** Figuren ****************************************/

.content-figuren h4 {
    display: inline-block;
}
.content-figuren .text {
    display: flex;
    justify-content: center;
    align-items: center;
}
.content-figuren .row {
    margin-top:40px;
}
@media (min-width: 1240px) {
    .content-figuren .row {
        margin-top: 0;
    }
}

/**************************************** Autoren ****************************************/

.content-autoren h5 {
    display: inline-block;
}
.content-autoren img {
    border-radius: 10px;
}

/**************************************** Lieder ****************************************/

.audio i {
    font-size: 40px;
}
.fiete-finger {
    display: inline-block;
    background-image: url('/images/figur_fiete_finger_1.png');
    background-repeat: no-repeat;
    background-size: 150px;
    height: 150px;
    width: 150px;

    animation: fiete-animation 2s infinite;
}
.fiete-finger-3 {
    animation: fiete-animation 3s infinite;
}
@keyframes fiete-animation {
    to {
        background-image: url('/images/figur_fiete_finger_2.png');
    }
}

.noten-im-buch {
    display: inline-block;
    padding: 15px;
    height: 80px;
    background-color: #fff;
}

/**************************************** Kontakt ****************************************/

.captcha-reload {
    font-size: 20px;
}

.captcha-reload:hover {
    cursor: pointer;
}