/* roboto-condensed-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-condensed-v27-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-condensed-v27-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-condensed-v27-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
*{
     min-width: 0;
    margin: 0;
    padding: 0;
}
*, *::before, *::after{
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
:root{
            --grau: hsl(225, 8%, 75%);
            --dklgrau: hsl(225, 8%, 50%);
            --mttlgrau: hsl(225, 8%, 85%);
            --blau: hsl(220, 80%, 50%);
        }
img{
    max-width: 100%;
    display: block;
}
            body{
                font-family: 'Roboto Condensed';
                font-weight: 300;
                font-size: 1rem;
                line-height: 150%;
                letter-spacing: 0.025em;
                min-height: 100vh;
              display: flex;
              flex-direction: column;
}
        .wrap {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            gap: 1em;
        }
        header{
            text-align: right;
            padding-top: 2em;
        }
        header img{
            width: 100%;
            max-width: 30em;
            display: inline !important;
        } 
            nav{
                width: calc(100% + 1em);
            }
            nav ul, footer ul li{
                margin-right: 1em;
            }
        nav, .nav-2, .space{
            position: sticky;
            top: 0;
            padding-top: 1em;
            z-index: 24;
        }
        nav, .nav-2, .nav-3, .nav-4{
            background-color: #fff;
        }
        nav a, .nav-2 a, .nav-3 a, .nav-4 a{
            color: inherit;
            text-decoration: none;
        }
        nav a:hover, .nav-2 a:hover, .nav-3 a:hover, .nav-4 a:hover{
            color: var(--blau);
        }
        .nav-3 a:hover{
            font-weight: 300;
    letter-spacing: 0.03em;
        }
        nav, .nav-3{
            text-align: right;
        }
        .nav-3{
            background-image: linear-gradient(var(--grau)33%, white);
            padding: 1em;
        }
        .nav-4{
            background-image: linear-gradient(var(--mttlgrau)33%, white);
            padding: 1em;
        }
        .nav-3{
            font-weight: 400;
            color: white;
        }
        .space{
            background-color: #fff;
        }
        .menuliste, footer ul{
            list-style: none;
        }
.menuliste li, main ul li{
    margin-bottom: 0.5em;
}
p{
    margin: 0 0 1.5em 0;
}
.nav-3 li, .nav-4 li{
    line-height: 120%;
    margin-bottom: 1em;
}
main ul{
    margin-left: 1em;
}
        main img{
            width: 100%;
        }
        footer{
            text-align: right;
            margin-top: auto;
            font-size: 0.8rem;
            padding: 0.5em;
            color: var(--dklgrau);
        }
footer a{
    color: var(--dklgrau);
    text-decoration: none;
}
footer ul{
    display: flex;
    justify-content: flex-end;
}
h1, h2{
    font-size: 1em;
    font-weight: 700;
    margin-bottom: 1.5em
}
h1{
    margin-top: 1.5em;
}
h2, b{
    color: var(--dklgrau);
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 3em;
  right: 3em;
  z-index: 99;
  background-color: var(--grau);
  cursor: pointer;
  padding: 0.3em;
}
.text{
    min-height: 30em;
}
.text a{
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted;
}
.text a:hover{
    color: var(--blau);
    border-bottom: 1px solid var(--blau);
}
.text img{
    float:right;
    width: 33%;
    min-width: 10em;
    margin: 0 0 1em 1em;
}
.full-img{
    width: 100%!important;
    float:none!important;
    margin: 0 !important;
}
b, strong{
    font-weight: 700;
    color: #666;
}
.current{
    color:var(--blau)!important;
    font-weight: 300;
}
.nav-3 .current{
    letter-spacing: 0.03em;
}
main img:nth-child(1n + 2){
    margin-bottom: 2em;
}
.menuliste, h1, h2 {
    text-wrap: balance;
}
.small{
    font-size: 80%;
}
.caption{
    font-size: 80%;
    font-style: italic;
    text-align: right;
}
.linie{
    height: 1px;
    background-color: var(--dklgrau);
}
main img.hochformat{
    max-height: calc(100vh - 16em);
    width: auto;
}
main img.quadrat{
    max-width: 600px;
}

        @media all and (max-width:760px){
            header{
                padding: 1em;
            }
        .nav-3, .nav-4{
            background-image: none;
            background-color: var(--grau);
        }
        .wrap {
            grid-template-columns: 1fr 1fr;
        } 
            .space{
                display: none;
            } 
            header, main{
                grid-column: span 2;
            }
            header img{
                max-width: 1000em;
            }
            .nav-4{
                grid-column: 2;
                grid-row: 3;
            }
            .text{
                padding: 1em;
            }
            .menuliste li {
                line-height: 110%;
            }
#myBtn {
  bottom: 1em;
  right: 1em;
}
            footer ul{
                justify-content: flex-start;
                margin-left: 1em;
            }
            h1, h2, p{
                margin-left: 1em;
                margin-right: 1em;
            }
        }
@media all and (max-width:1600px){
    .verlauf-2{
    min-height: calc(100vh - 20em);        
    }
}
@media all and (min-width:1632px){
        .wrap {
            grid-template-columns: 1fr 800px 1fr;
        }
}