/* 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.1rem;
    color: white;
    margin: 0;
    padding: 0;
    line-height: 150%;
    background-color: var(--lightbeige);
}
.wrap{
display: flex;
    flex-direction: column;
    align-content: space-between;
    min-height: 100vh;
}
header{
    padding: 1em 1em 0 3em;
    background-color: var(--blue);
}
header img{
    max-width: 24rem;
    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;
}
footer ul{
    list-style: none;
    display: flex;
    justify-content: flex-end;
    gap: 2em;
    margin: .2em 2em;
    flex-wrap: wrap;
    padding: 0;
}
footer{
    font-size: 75%;
}
main{
    padding: 3rem;
    background-color: var(--blue);
    flex:1;
}
h1, h2, h3{
    font-weight: 300;
    line-height: 120%;
}
a{
    color: var(--beige);
    text-decoration: none;
}
a:hover{
    color: #fff;
}
footer a{
    color: var(--blue);
}
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;
}
.button{    
        background-color: var(--beige);
        color: #000;
        padding: .5em 1em;
    border-radius: 2em;
    margin-bottom: 1em;
    margin-bottom: 1em;
  display: block;
}
.button:hover{
    background-color: var(--lightbeige);
    color: #000;
}
    .galerie {
  display: grid;
  gap: 4em 2em;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

        .galerie div, .galerie div{
            width: 100%;
        }
        .galerie div img, .galerie div img{
            width: 100%;
            box-shadow: 3px 3px 15px 3px rgba(0,0,0,0.4);
        }

          .lupe img:hover, .lupe-2 img:hover {
  transition: 0.5s all ease-out;
  transform: scale(1.05);
              overflow: hidden;
}
.lupe h3:hover, .lupe p:hover, .lupe-2 h3:hover, .lupe-2 p:hover{
    color: #fff;
}
.lupe:hover p{
    border-bottom: 1px solid #fff;
}
.lupe-2:hover h3{
    border-bottom: 1px solid #fff;
}
        .galerie div p, .galerie div p {
            margin: 0.3em 0 0 0;
            text-wrap: balance;
}
        .galerie div h3, .galerie div h3{
            font-weight: 300;
            font-size: 1.5em;
            margin: 0em 0 1em 0
        }

        .brettchen{
            border-radius: 4%; 
        }

.passepartout {
  border: 4px solid;
  border-color: #c3c3c3 #f0ede3 #f0ede3 #c3c3c3;
}

.magnet{
  position: relative;
  display: inline-block;
  border-radius: 2%;
  overflow: hidden;
}

.magnet img{
  display:block;
    border-radius: 2%;
}

/* dein gewünschter Innen-Schatten oben drauf */
.magnet::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: inset -6px -6px 8px rgba(0,0,0,.36),
  inset  4px   4px  8px rgba(255,255,255,.5);
}

.galerie .m-hochformat{
    width: 75%;
}
.galerie .m-quadrat{
    width: 85%;
}
.galerie .k-hochformat{
    width: 70%;
}
.galerie .p-hochformat{
    width: 90%;
}

        .art-nr{
            
        }

          em{
              font-style: normal;
              border: 1px solid #fff;
              padding: 0 .4em;
              line-height: 2.6em;
              font-size: .9em;
          }

          .link-arrow::after, .button::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.2em;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.link-arrow:hover::after {
  transform: translateX(0.3em) rotate(-45deg);
}

@media all and (max-width: 850px){
    main{
        padding: 1em;
    }
    header{
        padding: 1em 1em 0 1em;
    }
}
@media all and (max-width: 490px){
    .button{
        display: block;
        background-color: var(--beige);
        color: var(--blue);
        padding-left: .5em;
        margin: 1em 0;
    }    
    .on-off{
        display: none;
    }
}
@media all and (min-width:1500px){
    main {
        padding: 3em 8em;
    }
    
header{
    padding: 1em 1em 0 8em;
    background-color: var(--blue);
}
}