:root {
    --highlight_color: #a830b3;
    --highlight_color_2: #95387e;
    --header_height: 130px;
    --warning:rgb(212, 131, 93);
    --space:8px;




@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }



/* Mobile View */
@media screen and (max-width: 670px) {

    #navigation_lists {
        display:none;
    }

    #content {
        padding-bottom:100px;
    }

    #navigation_box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        flex-wrap: wrap;
    }

    #navigation_lists.show {
        display:flex ! important;
        flex-direction: column;
        position:absolute;
        top:var(--header_height);
        height:calc(100% - var(--header_height));
        left:0px;
        width:100%;
        background-color: var(--background_color);
        color:var(--main_color);
        z-index:999;
        box-shadow: -7px 7px 5px;
        padding:0px;
        align-items: center;
        font-size: 2em;
        padding-top:30px;

        }

    .navigation {
    width: 100%;
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom:10px;
}

    .navigation li {
        padding:3px;
        width: 80%;
        display: flex;
    }
    .toggle_color_mode {margin-left:10px;}

    .navigation li a{flex-grow: 1;display: flex;}
    .navigation li a span{flex-grow: 1;}
    .navigation li a::after{max-width:40px; text-align: center;}
    li.lightmode {display: none ! important;}
    header #navigation_box button,header #navigation_box > a {
        display:block;
    }

    header #navigation_box {
        display: flex;
        align-items: center;
        justify-content: center;
    }


}
/* Mobile View ENDE*/


/* Desktop View */
@media screen and (min-width: 670px) {
   
    #content {
        display: grid;
        grid-template-columns: 50fr 50fr;
        grid-template-rows: auto;
        grid-template-areas: 
        ".top .top"
        ".main . .main"
        "footer footer";
    }

    .content_scroll {
        display:none ! important;
    }

    .navigation {
        list-style: none;
        padding:0px;
        min-width:100px;
        margin:0px;
        flex-grow: 1;
        align-items: right;
        position:relative;
        width:50%;
        float: left;
        margin-top:8px;
    }

    #navigation_box {
        flex-grow: 1;
    }
    

    #navigation_main {

    }

    .navigation li {
        width:calc(100%);
        position: relative;
        text-align: right;
    }

    .navigation li a {
       display: block;
       padding-bottom:5px;
    }
    .navigation li a::after {
        width:30px;
        text-align: right;
        display: inline-block;
        text-align: center;
    }

    .navigation li span {
        display: inline-block;
        width:80%;
    }

    .navigation li{
        color:var(--main_color)
    }



    .navigation li:hover {
        font-weight: bold;
        color:var(--highlight_color_2)
    }

    header #navigation_box button, header #navigation_box > a {
        display:none;
    }

}
/* Desktop View ENDE*/

/* General */

body {
    font-family: Arial, Helvetica, sans-serif;
    color:var(--main_color);
    background-color: var(--background_color);
    margin:0px;
    overflow-y: scroll; 
}

#navigation_box {
    outline:0px black solid;

}

.hidden {display: none;}
a {text-decoration: none;}


.navigation li a {color:inherit}

.navigation li.active{
    font-weight: bold;
    color: var(--highlight_color) ! important;

}

.block {display: block;}
.inlineblock {display: inline-block;}
.spacetop {margin-top: var(--space);}
.spacebottom {margin-bottom: var(--space);}
.spaceGap {gap:var(--space);}
.noSpace {margin:0px;}

a.back {
    padding: 20px;
    color:var(--highlight_color_2);
    font-size: 20px;
    margin: 0px;
}
a.back::before {content:"\f060";margin-right:10px;}



h1,
h2 {
    letter-spacing: 2px;
    font-weight: bold;
    color: var(--highlight_color);
    margin:0px;
    padding: 0px;
}

h2 {font-size: 20px;}

h1 {margin:0px 0px 10px 0px;padding:0px;}

section h1:first-child{margin: 0px;}

.caption {font-style: italic;font-size: 9px;}

button.menu, a.menu {padding:15px;font-size: 30px;color:var(--highlight_color);border-radius: 7px;border:none;cursor:pointer;background-color: transparent;}
button.menu:before{font-family:'FontAwesome';content: "\f0c9";padding:7px}
#wrap {
    outline: 0px black dotted;
    max-width: 800px;
    margin: auto;
    height:100%;
    margin-right: auto;
    margin-left: auto;
    right: 0;
    left: 0;

}

.content_scroll {
    position: fixed;
    height: 50px;
    bottom: 0;
    width:100%;
    display: flex;
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
    right: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    background-color: var(--background_color)
    
}

.content_scroll button {
    
    background-color: var(--highlight_color_2);
    color: white;
    border-radius:5px;
    border: none;
    width:80%;
    height:30px;
}
.content_scroll button::before {content:"\f063";font-family: 'FontAwesome';}



header {
    outline: 0px black dotted;
    display: flex;
    flex-direction: row;
    height:var(--header_height);
    min-width: 354px;
}

#logo {width:250px;}

/* ICONS */

.insta a::after, a.instagram::after {content:"\f16d";}
.contact a::after {content:"\f095";}
.imp a::after {content:"\f022";}
.history a::after {content:"\f19c";}
.newsletter a::after {content:"\f0e0";}
.release a::after {content:"\f02d";}
.start a::after {content:"\f015";}
.press a::after {content:"\f1ea";}
.search a::after {content:"\f002";}
.events a::after {content:"\f073";}


.bold {font-weight: bold;color:var(--highlight_color_2)}

a.readers,strong {color:var(--highlight_color_2)}

a.website::after {content:"\f0ac";font-family: 'FontAwesome';}

li.darkmode a::after, a.menu.darkmode::after {content:"\f186";}
li.lightmode a::after, a.menu.lightmode::after  {content:"\f185";}

a::after {font-family: 'FontAwesome';}

a.event {line-height: 20px;}
a.event date {font-weight: bold;}


a.extern,a.event {color: var(--highlight_color_2);}

a.extern::before {content: "\f08e";font-family: 'FontAwesome';font-style: normal;margin-right:5px}

a.intern::before {content: "\f04b";font-family: 'FontAwesome';font-style: normal;margin-right:5px}

#content {

    position:relative;
    margin-top:10px;
    outline: 0px black dotted;

}


p {margin:0px;}
section {padding:0px 20px 0px 20px;margin:0px;position:relative;}

section.top {

    grid-column-start: 1;
    grid-column-end: 3;
}

section.main {
    grid-row-start: 2;
    grid-row-end: 2;

}

section.bottom {
    grid-column-start: 1;
    grid-column-end: 3;

    grid-row-start: 3;
    grid-row-end: 3;

}

section.main:nth-child(3) {text-align: right;}

section:first-child {padding-top: 0px;}




ul.readers {list-style: none;display: flex;gap:5px;flex-direction: column;}
ul.readers li {padding-right:10px;font-weight: bold;text-align: right ! important;color: var(--highlight_color_2);}

.quote {
    width: 80%;
    font-style: italic;
    color: var(--highlight_color_2);
}
.quote .text::before,.quote .text::after {content: '"';}
.quote .text {font-size:2em;}
.quote {text-align: center;}
.quote .who {text-align: right;}








.card {
    display: flex;
    flex-direction: column;
    gap:10px;
    position: relative;
}



.card.right
{
    align-items: right;
}


.mask_image {
    background-color: var(--main_color);
}

.mask_image_highlight {

    background-color: var(--highlight_color);
}

.planetarium_logo {

    height:100px;
    width:100%;
    mask: url(urania_planetarium.svg) no-repeat right;
    mask-size: 50%;
}



.aw_logo {
    
    flex-basis: 1;
    border:1px black solid;
    width:250px;

    mask-position: left;
    -webkit-mask: url(AW_logo_4.svg) no-repeat left;
    mask: url(AW_logo_4.svg) no-repeat left;
}

.page_message {text-align: center;padding:30px;}



.darkmode .icon_image {filter: invert(1);}

.expander div::before {color:var(--highlight_color_2)}
.expander div::before{font-family:'FontAwesome';content: "\f063";padding:5px;}
.expander.show div::before{font-family:'FontAwesome';content: "\f062";padding:5px;}

.expander {

    height: 20px;
    overflow: hidden;
    padding: 2px;
    user-select: none;
    cursor: pointer;
    border-radius:5px;
    padding:10px;
    height:auto;
}


.lightmode .expander {    border: 1px black dotted;}
.darkmode .expander {    border: 1px rgb(255, 255, 255) dotted;}

.expander ul {
    width: 100%;
    display: none;
    flex-wrap: wrap;
    padding:10px;
    margin:0px;
    list-style: none;
}

.expander ul li {text-align: left;flex-grow: 1;padding:5px;margin-right:20px;}

.expander.show ul {display: flex;}



.attention {background-color: orange;color:black;padding:2px;border-radius: 2px;}

p.center {text-align: center;}

.big_button:hover {background-color: var(--highlight_color);}



.big_button {
    background-color: var(--highlight_color_2);
    padding: 10px;
    font-size: 1em;
    border-radius: 5px;
    color:white;


}


.center_box {
    width: 100%;
    display: flex;
    justify-content: center;
    justify-items: center;

    flex-direction: column;
    align-items: center;
}


.text span.initials {
    font-size: 30px;
    display: inline-block;
    top: 10px;
    position: relative;
    margin-right: 3px;
    color:var(--highlight_color_2)
}
.icon::before {font-family: "FontAwesome";}
.icon::after {font-family: "FontAwesome";}

.price {color:var(--highlight_color);font-weight: bold;}
.price::after {content:"\f153";margin-left: 10px;}

.big_button::before {font-family: 'FontAwesome';}

.big_button::before{margin-right: 10px;}
.big_button::after{margin-left: 10px;}

.booking::before {content:"\f145";}
.booking::after {content:"\f145";}
.order::before {content:"\f07a";}
.order::after {content:"\f02d";}

form {width:100%;}
textarea {width:100%;height:300px;}

iframe {width:100%;border:0px black solid;}


.form_line {
    display: flex;
    outline:0px black solid;
    padding: 5px;
}



.form_line * {padding: 5px;border-radius: 5px;}
.form_line label {width:200px;color:var(--highlight_color_2);font-weight: bold;}
.form_line .edit_area,
.form_line input {
    flex-grow: 1;
    border:1px black solid;
    background-color: rgb(218, 210, 213);
}

.form_line .edit_area {height: 100px;resize: none;border:1px black solid;}

form button {
    background-color: var(--highlight_color_2);
    color: white;
    padding: 10px;
    border-radius: 10px;
    border: 0px;
    display: block;
    float: right;
}

#illegal_words_message {
    color: rgb(255, 255, 255);
    padding:5px;
    border-radius:5px;
    border:1px black solid;
    background-color: var(--warning);
}


form div {position: relative;z-index:2;}
form #age {position:absolute;z-index:0;background-color: var(--background_color);border:none;}




.sub_box {
    display: flex;
    flex-direction: row;
    gap:10px;
}



.right {text-align: right;}

.image {
    max-width: 150px;
    user-select: none;    
    position:relative;
}

.sub_box .text {
    
    position: relative;
}

.sub_box .text p:first-child {margin-top:0px;}

.image img {
    width: 100%;
    user-select: none;
}

ul.artists{
    padding:0px;
    margin: 0px;
    list-style: none;
    width:100%;    
    display: flex;
    flex-wrap: wrap;
}

ul.artists li {

    flex-grow: 1;
    text-align: center;
    padding:5px;
    border-radius: 3px;
}

ul.artists li:hover a {
    color: white;
    flex-grow: 1;
}

ul.artists li:hover {
    background-color: var(--highlight_color_2);
    color:white;
    display: flex;
}

ul.sub_navigation {
list-style: none;
}

ul.sub_navigation li {color:var(--highlight_color_2);padding:5px;}


ul.sub_navigation li:hover {font-weight: bold;cursor:pointer;color:var(--highlight_color);}


ul.sub_navigation li a {color:inherit}


.sorted_list { list-style: none;}
.sorted_list_head {color:var(--highlight_color);font-weight: bold;font-size: 2em;margin-top:var(--space)}

.sorted_list_item {padding-left:20px;color:var(--highlight_color_2)}

.sorted_list_item a {color:inherit}