body, input, textarea { font-family: "Roboto", sans-serif; font-size: 20px;  word-wrap: break-word;  }
body, div, h1, h2, h3, img, table, tr, td { margin: 0; padding: 0; border: 0 none white; border-collapse: collapse; }
img { display: block; }

body { display: flex; justify-content: center; background: url("/images/pattern.png"); }
.page { display: flex; flex-direction: column; flex: 0 1 1260px; }
.box { margin: 0 0 20px 0; background-color: white; box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); }

.header { display: flex; min-height: 100px; align-items: center; justify-content: center; background-color: #7988ff; color: #ffffff; }
.logo { flex: 1 0 200px; text-transform: uppercase; font-size: 30px; }
.logo a { padding: 40px; text-decoration: none; color: #ffffff; }

nav.top { flex: 0 1 500px; }
nav.top ul { margin: 0; padding: 0; text-align: center; }
nav.top ul li { margin: 5px 5px; padding: 5px 10px; display: inline-block; font-size: 20px; border-radius: 15px;}
nav.top ul li a { color: #ffffff; text-decoration: none; }
nav.top ul li.active { background-color: #9fafff; }
nav.top ul li:hover { background-color: #9fafff; }
#navIcon { display: none; margin: 15px; }

.lang { flex: 1 0 150px; margin: 10px 0; position: relative; height: 20px; text-transform: none; text-align: end; }
.lang a { position: absolute; top: 0; right: 40px; opacity: 0; color: #ffffff; text-decoration: none; padding-left: 40px; background: no-repeat left top; transition: 0.3s;}
.lang a.en { background-image: url("/images/en.png"); }
.lang a.de { background-image: url("/images/de.png"); }
.lang a.active { font-weight: bold; opacity: 1;}

.lang:hover a { opacity: 1;}
.lang:hover a.en { top: -20px;}
.lang:hover a.de { top: 20px; }

@media (max-width: 900px) {
    .logo { display: none; }
}

@media (max-width: 670px) {
    .lang { display: none; }
}

@media (max-width: 500px) {
    .header { min-height: 50px; }
    nav.top ul { text-align: start; }
    nav.top ul li { display: block; }
}

footer { margin: 0 0 50px 0; clear: both; color: #999999; }
footer a { color: #999999; text-decoration: underline; } 

/* home */

.teaser { position: relative; }
a.teaser { text-decoration: none; color: #000; }
.overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    margin: 0; padding: 10px; font-size: 18px; text-align: center; 
    background-color: #ffffff; color: black; opacity: 0.8;
}
.teaser img { max-width: 100%; min-height: 300px; object-fit: cover; }

.secondary { display: flex; flex-direction: row; justify-content: stretch; }
.secondary .box:not(:last-child) { margin-right: 20px; }
.secondary .teaser img { min-height: 150px; }

@media (max-width: 600px) {
    .secondary { flex-wrap: wrap; }
    .secondary .box:not(:last-child) { margin-right: 0; }
}

/* pages */

.main { display: flex; flex-wrap: wrap; }
.content { flex: 1 1 500px; padding: 40px; word-break: break-word; }

@media (max-width: 900px) {
    .content { padding: 20px; }
}

.leftNav { flex: 0 1 250px; padding: 20px; background-color: #eeeeee; }
.leftNav a { display: block; padding: 10px; color: black; text-decoration: none; }
.leftNav a:hover { background-color: #dddddd; }
.leftNav a.active { background-color: #dddddd; }
.leftNav ul { margin: 0; padding: 0; }
.leftNav ul ul { margin: 0; padding: 0 0 0 20px; }
.leftNav li { display: block; list-style: none; border-bottom: 1px solid #cccccc; }
.leftNav li:first-child { border-top: 1px solid #cccccc; }
.leftNav ul ul li { border: none; }
.leftNav ul ul li:first-child { border: none; }

/* content elements */
h1 { font-size: 32px; margin-bottom: 30px; }
h2 { font-size: 20px; margin: 30px 0 20px 0; }
h3 { font-size: 20px; color: #666666; }
.content ul { list-style: none; }
.content li:before {display: inline-block; width: 1em; margin-left: -1em; vertical-align: 10%; content: '\25AB'; color: #7988ff; }
.content a {color: #7988ff; text-decoration: none; }
.content img { max-width: 100%; height: auto; }
.content .note { font-size: 16px; color: #aaaaaa; }

/* section lists */

.sections { list-style-type:none; padding: 0;}
.sections li { overflow: hidden; margin: 25px 0; }
.sections li:before { content: none; }
.sections a { text-decoration: none; color: black; }
.sections img { float: left; margin: 0 20px 0 0; }
.sections h2 { margin: 0; }

/* forms */
input[type=text], textarea { margin: 5px 0; padding: 5px; border: 1px solid #999999; max-width: 100%;}
input[type=submit] { margin: 5px 0; padding: 5px 20px; }

/* obsolete stuff to temporarily fix worst problems */
table.album td { padding: 10px; }
a.blog { text-decoration: none; color: black; }
.blogdivider { clear: both;  border-bottom: 1px solid #cccccc; }
.blog img { width: 100%; }
.blog img.thumb { float: left; margin: 0 20px 20px 0; width: auto; }
.blogcategory { font-size: 20px; font-weight: normal; color: #aaaaaa;}

div.commentheader { margin-top: 20px; padding: 5px; background: #eeeeee; border-top: 1px solid #cccccc; font-weight: bold; }
div.commententry { padding: 5px; margin: 5px 0; border: 1px solid #cccccc; }
div.commentfooter { padding: 5px; background: #eeeeee; border-bottom: 1px solid #cccccc; }