/* Stylesheet time 2020-07-14 11:59  */


/* ====================================================  GLOBAL DEFINITION  ==================================================== */


/* alternatives Boxmodell */

*,
 ::before,
 ::after {
    box-sizing: border-box;
}

body {
    /*max-width: 70em;*/
    margin: 0 auto;
    /*padding: 0 1em;*/
    font-family: Helvetica, Arial, Geneva, sans-serif;
    font: normal 0.9em Arial, sans-serif;
    /*font-family: 'Constantia', Times, serif;*/
    color: #114872;
    /*steelblue*/
    ;
    background-color: #ffffff;
}

p,
ol,
ul,
dl {
    color: #333;
}


/* ====================================================  HEADER  ==================================================== */

header {
    margin: 0;
    padding: 0em;
    height: 5em;
    /* HEADER-HEIGHT*/
    z-index: 3;
    background: #ffffff;
    position: -webkit-sticky;
    /* fj */
    position: sticky;
    /* fj */
    top: 0px;
    /* fj */
    /*max-width: 70em;*/
}

header a {
    padding: .5em .5em .5em 3em;
    height: 1em;
    text-decoration: none;
    font-size: 0.8em;
    /*border: 1px solid transparent;*/
}


/*header p {
    font-variant: small-caps;
    font-size: 1.5em;
  }*/

header ul {
    float: right;
    line-height: 2em;
}

header span {
    font-weight: bold;
}

.mybold {
    color: black;
    font-weight: bold;
}


/* .akzentfarbe {
    background-color: #114872;
} */

header .flex-item {
    flex: 1 1 9%;
    background-color: white;
    /* background-image: url('../images/ll-01.png');
    background-position: left;
    background-repeat: no-repeat;
    background-size: 80%; */
    margin: .0em;
    padding: .0em;
    height: 5em;
    /* HEADER-HEIGHT*/
}

header .flex-item-2 {
    flex: 2;
    background: white;
}


/* ====================================================  CONTENT  ==================================================== */

article {
    color: black;
    flex-wrap: wrap;
    /* Line break after h1, h2, h3: */
    background-color: lightgray;
}

article h1,
article h2,
article h3,
article p {
    width: 100%;
}

dl {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1em 2em;
    margin-bottom: 3em;
}

dl>* {
    margin: 0;
    padding: 0;
}

dt {
    font-weight: bold;
}

dt::after {
    content: ":";
}


/* ====================================================  NAV  ==================================================== */

nav {
    position: -webkit-sticky;
    position: sticky;
    top: 5em;
    z-index: 5;
    background: white;
}

.flex-container {
    display: flex;
    flex-direction: row;
    background-origin: border-box;
}


/* MAIN */

.flex-item {
    flex: 1 1 0%;
    /*border: 1px solid;*/
    background: #114872;
    /*height: 10em;*/
    width: 30%;
    height: auto;
}


/* .ausnahme 1 {
    flex: 2 1 0%;
    /*height: 10em;
    background: white;
} */

#gallery img {
    /*width: auto;
  height: 10em;*/
    width: 100%;
    height: auto;
    /*height:auto;*/
    padding: 0;
    /*z-index: 1;*/
}


/* Slideshow container */

.slideshow-container {
    /*max-width: 70em;*/
    position: relative;
    margin: auto;
}

.slideshow_button {
    position: relative;
    bottom: 11vw;
    left: 5vw;
    width: 4em;
    height: auto;
}

#gallery:hover figure {
    animation-play-state: paused;
}

.mytable {
    /*background-color:orange;*/
    width: 100%;
}

.myrow {
    vertical-align: top;
    /*height: auto;*/
}


/* {}.myrow a */

.MyTrick img {
    width: 100%;
    height: 80%;
    opacity: 0.0;
    z-index: 3;
    /*background-color:yellow;*/
}

.mycol {
    /*background-color: steelblue;*/
    /*vertical-align: bottom;*/
    /*text-align: center;*/
    height: 20%;
}

.mygrid-container {
    display: grid;
    grid-template-columns: 30% 20% 20% 30%;
    /*auto auto auto auto*/
    background-color: white;
    /*#2196F3*/
    padding: 10px;
    width: 100%;
}

.mygrid-item1 {
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    /*border-radius: 0.5em .5em .5em;*/
    padding: 20px;
    font-size: 0.7em;
    text-align: center;
    grid-row: 1 / 2;
    /*grid-row-end: 2;*/
}

.mygrid-item2 {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid blue;
    border-radius: 0.5em .5em .5em;
    background-color: #114872;
    padding: 20px;
    font-size: 1em;
    text-align: center;
}

.responsive {
    width: 100%;
    height: auto;
}

.responsive300 {
    width: 100%;
    height: auto;
    max-width: 300px;
}

.mysidenav {
    position: absolute;
    top: -10em;
    left: 1em;
    width: 25em;
    border: 3px solid blue;
    border-radius: 1.0em 1.0em 1.0em 1.0em;
    padding: 1.5em 1.5em 1.5em 1.5em;
    display: block;
    background-color: lightblue;
    animation: textwelle 2s;
    font-size: 100%;
}

@keyframes textwelle {
    0% {
        font-size: 0%;
        opacity: 0;
    }
    100% {
        font-size: 100%;
        opacity: 1;
    }
}

.mydisplay {
    display: block;
}

@media screen and (min-width: 45em) {
    .mydisplay {
        display: none;
    }
}

.mymain {
    display: flex;
    /*flex-direction: row;*/
    flex-wrap: wrap;
    flex-direction: column;
    background-color: lightgray;
    color: #114872;
}

.changer figure {
    position: absolute;
    width: 100%;
    /*max-width: 70em;*/
    height: auto;
    margin: 0;
    padding: 0;
    opacity: 0;
    /*border:dotted 3px;*/
}


/* ====================================================  LAYOUT  ==================================================== */


/* Mobile first ! all blocks: 100%, nav bottom*/


/*main {
  padding: 1em 0;
  margin: 1em 0;
}*/

nav a {
    border-radius: .5em;
}


/* nav: rows */

nav ul {
    display: -webkit-flex;
    display: flex;
    font-size: 0.5em;
    flex-direction: column;
}


/* Column container */

.row {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}


/* Create two unequal columns that sits next to each other */


/* Sidebar/left column */


/* Center vertical: https://www.w3schools.com/css/tryit.asp?filename=trycss3_align_flex*/

.side {
    flex: 30%;
    background-color: #114872;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: initial;
    flex-direction: column;
    /*border: 3px solid green;*/
}

.side>p {
    color: white;
    line-height: 2.0;
    font-size: 1.4em;
}

.sideref {
    font-style: italic;
    font-size: 1.0em;
}

.sidetext {
    font-size: 1.0em;
}


/* Main column */

.main {
    flex: 1 0 70%;
    background-color: white;
    top: initial;
    /*padding: 20px;*/
}


/*============================== Navigation=============================*/

.topnav {
    overflow: hidden;
    background-color: white;
    /*background-color: yellow;*/
    position: -webkit-sticky;
    /* fj */
    position: sticky;
    /* fj */
    top: 0px;
    /* fj */
}

.topnav a {
    float: right;
    display: block;
    color: black;
    background-color: white;
    text-align: center;
    padding: 0.5em 0.1em;
    border-radius: 0.5em;
    margin: 0.0em 1.0em 1.0em 0.0em;
    text-decoration: none;
    font-size: 1.0em;
}

.topnav a[aria-current="page"] {
    color: white;
    font-weight: bold;
    background-color: #114872;
}

.topnav a.active {
    background-color: blue;
    color: white;
}

.topnav a:hover,
.topnav a:focus {
    background-color: #114872;
    color: white;
}

.topnav a:hover::after,
.topnav a:focus::after {
    color: transparent;
}

.topnav a.icon {
    display: none;
}

.changer figcaption {
    line-height: 1.6;
}


/* 2-columns */

@media screen and (min-width: 25em) {
    nav {
        top: 8em;
    }
    header {
        height: 8em;
        /* HEADER-HEIGHT*/
        /*background: green;*/
        background-size: auto;
    }
    #gallery img {
        /*width: auto;
    height: 10em;*/
        margin: 0;
        padding: 0;
    }
    .flex-item {
        flex: auto;
        /*width: 30%;*/
        height: auto;
        /*height: 10em;
    background-position-y: 1em;
    background-size: 2em;*/
    }
    .changer figcaption {
        left: -60%;
        /*top: 10%;*/
        font-size: 0.6em;
        position: absolute;
        align-content: center;
        text-align: center;
    }
    .changer figcaption p {
        color: white;
        text-align: center;
    }
    .topnav a {
        font-size: 0.7em;
    }
    /* .buttonimg {
        /*top: 6em;
    } */
}


/* 2 columns */

@media screen and (min-width: 45em) {
    header {
        height: 9em;
        /* HEADER-HEIGHT*/
        /*background: blue;*/
        background-size: auto;
    }
    nav {
        top: 9em;
        /* HEADER-HEIGHT*/
    }
    /*nav: columns*/
    nav ul {
        flex-direction: row;
        font-size: 1.0em;
        background-color: white;
    }
    nav li {
        margin: 0;
        flex: 1 1 0%;
    }
    /* main: flex-container */
    article,
    main {
        display: flex;
        flex-flow: row wrap;
        /*border:solid 2px;*/
    }
    main>* {
        flex: 1 100%;
        /* children: full width */
    }
    section {
        flex: 1 48%;
        /* half width */
        /*margin: 1%;*/
    }
    #gallery img {
        /*width: auto;
    height: 20em;*/
        margin: 0;
        padding: 0;
    }
    .flex-item {
        height: 20em;
        /*background-position-y: 2em;*/
        background-size: 3em;
    }
    .changer figcaption {
        left: -50%;
        top: 10%;
        font-size: 1.5em;
    }
    .topnav a {
        font-size: 0.8em;
    }
    /* .buttonimg {
        /*top: 15em;
    } */
}


/* 2 columns with wider aside */

@media screen and (min-width: 58em) {
    header {
        height: 10em;
        /* HEADER-HEIGHT*/
    }
    header .flex-item {
        height: 10em;
        /* HEADER-HEIGHT*/
    }
    nav {
        top: 10em;
    }
    aside {
        flex: 1 31%;
        /* width 1/3.  */
        /*margin: 1%;*/
    }
    .row {
        top: 0em;
        position: relative;
        flex-direction: row;
    }
    .mymain {
        /*display: flex;*/
        top: 0em;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        /*flex-direction: column;*/
        /*background-color: lightgray;
      color: #114872;*/
    }
    article {
        flex: 0 0 100%;
        /*margin: 1%;
    margin-left:4px;*/
        padding-left: 4px;
    }
    /*article p,
    article li,
    article blockquote {
      max-width: 40em;
    }*/
    #about {
        flex: 1 30%;
        margin: 1%;
        background-color: #eee;
        border: 1px solid #114872;
        padding: 1em;
        height: 22em;
    }
    #impressum {
        flex: 1 60%;
        /*margin: 1%;*/
    }
    /* aside p {
        /*margin-bottom: 3em;
    } */
    aside p:last-child {
        margin-bottom: 1.2em;
    }
    /* Image gallery */
    #gallery img {
        /*width: auto;
    height: 30em;*/
        margin: 0;
        padding: 0;
    }
    .flex-item {
        height: 30em;
        background-position-y: 22em;
        background-size: 12em;
    }
    /*.changer figcaption {
    left: -40%;
    text-align: center;
    top: 25%;
    font-size: 1.5em;
  }*/
    .topnav a {
        font-size: 0.8em;
    }
    /* .buttonimg {
        /*top: 23em;
    } */
}

@media screen and (max-width: 35em) {
    /*header {
    height: 8em;
    background: green;
    background-size: auto;
  }*/
    .topnav a:not(:first-child) {
        display: none;
    }
    .topnav a.icon {
        float: left;
        /*font-size: 1.5em;*/
        display: block;
    }
    .topnav.responsive {
        position: relative;
    }
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

header ul {
    flex: 1 1 100%;
    padding-left: 0;
    margin-left: 0;
}

header li {
    list-style-type: none;
    display: inline-block;
    border-left: .2em solid #989898;
}

header li:first-child {
    border-left-color: transparent;
}

header li a {
    color: #114872;
    background-color: white;
    margin: .3em 0.3em 0.0em .3em;
    padding: .1em .1em;
    /*border-radius: .5em;*/
}

header li a:hover,
header li a:focus {
    /*background-color: #114872;*/
    color: black;
}

header li a {
    padding: 0.0em 0.0em 0.0em 0.0em;
    /* Distance between items */
}

header p {
    margin-top: 0;
    padding-top: 0;
    text-align: right;
}


/* border: to avoid white space above article */

article {
    border: solid;
    border-color: lightgray;
}

.myfooter {
    width: 100%;
    background-color: white;
    /*#114872*/
    color: black;
    text-align: center;
    display: flex;
    font-size: 0.8em;
    flex-direction: row;
    background-origin: border-box;
    height: 10em;
}

.myfooter div {
    flex: 1 1 100%;
    /*list-style-type: none;*/
    display: inline-block;
    padding-top: 2em;
    padding-bottom: 2em;
}

@media screen and (max-width: 600px) {
    .myfooter {
        flex-direction: column;
    }
    .myfooter div {
        padding-top: 0.2em;
        padding-bottom: 0.2em;
    }
}


/* DEBUG */


/*
.topnav {
  background-color: yellow;
}

header {
  background-color: greenyellow;
}

.side {
  background-color: blue;
}

article {
  border: solid 2px;
}

.flex-item {
  border: 3px dotted;
  background: red;
}
/**/