/* hind-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: 'Hind';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/hind-v16-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* hind-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: 'Hind';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/hind-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* hind-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: 'Hind';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/hind-v16-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
  --blue: hsl(200, 96%, 20%);
  --beige: hsl(45, 50%, 80%);
  --lightbeige: hsl(45, 50%, 92%);
  --darkbeige: hsl(45, 24%, 60%);
    --shadow: 0 0 24px hsla(0, 0%, 0%, .8);
    --lightshadow: 0 0 24px hsla(0, 0%, 0%, .3);
}

body { 
    font-family: 'Hind', sans-serif;
  font-style: normal;
  font-weight: 300;
    font-size: 1.3rem;
    color: white;
    margin: 0;
    padding: 1rem;
    line-height: 1.8em;
    background-color: var(--lightbeige);
}
.wrap{
    max-width: 80rem;
    margin: auto;
    box-shadow: var(--lightshadow);
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 2rem);
}
header{
    padding: 2rem 2rem .5rem 2rem;
    background-color: var(--blue);
}
header img{
    max-width: 32rem;
    width: 100%;
}
section{
    padding: 1.5em 0;
}
nav, footer{
    background-color: white;
    color: var(--blue);
    border-bottom: 4px solid var(--beige);
    border-top: 4px solid var(--beige);
    hyphens: none;
}
nav ul, footer ul{
    list-style: none;
    display: flex;
    justify-content: flex-end;
    gap: 2em;
    margin: .5em 2em;
    flex-wrap: wrap;
    padding: 0;
}
footer{
    font-size: 75%;
    margin-top: auto;
}
main{
    padding: 2rem;
    background-color: var(--blue);
    flex:1;
}
.bild-rechts{
    float: right;
    width: clamp(200px, 40%, 400px);
    box-shadow: var(--shadow); 
    margin: 1.5em 0 2.5em 1em;
}
.querformat{
width: clamp(200px, 40%, 900px);    
}
.bild-rechts, .bild-links{
    border: 1px solid var(--darkbeige);
}
.PP-Logo{
    float: right;
    width: clamp(200px, 50%, 400px);
    margin: 1.5em 0 2.5em 1em;
}
h1, h2{
    font-weight: 300;
}
a{
    color: white;
    text-decoration: none;
}
a:hover{
    color: var(--beige);
}
nav a, footer a{
    color: var(--blue);
}
nav a:hover, footer a:hover{
    color: var(--beige);
}
.nowrap{
    white-space: nowrap;
}
strong{
    font-weight: 700;
}
.socialmedia img{
    box-shadow: none;
    width: 3em;
    display: inline;
    margin-right: 2em;
}
.bottom-line{
    border-bottom: 4px solid var(--beige);
}
.top-line{
    border-top: 4px solid var(--beige);
    clear: both;
}
.button{    
        background-color: var(--beige);
        color: var(--blue);
        padding: 0 .5em;
    border-radius: 2em;
}
.button:hover{
    background-color: white;
}
@media all and (max-width: 888px){
    main{
        padding: .75em;
    }
}
@media all and (max-width: 490px){
    .bild-rechts{
        display: none;
    }
    .button{
        display: block;
        background-color: var(--beige);
        color: var(--blue);
        padding-left: .5em;
        margin: 1em 0;
    }    
    .on-off{
        display: none;
    }
    body{
        padding: 0;
    }
    nav ul{
        flex-direction: column;
        text-align: right;
    }
    .PP-Logo{
        float: none;
        width: clamp(100px, 100%, 280px);
        margin-bottom: 0;
    }
}