/*Farben:
Rosa: #FAECE8
Blau: #114AFD 0048ff #0147FF */
html, body {
   font-family: 'Roboto Condensed', sans-serif;
   font-weight: 200;
   line-height: 120%;
   margin: 0;
   padding: 0;
   font-size: 22px;
   color: #114AFD;
   text-align: center;
   font-display: block;
   -webkit-font-smoothing: antialiased;
   scroll-behavior: smooth;
}
/* Hide scrollbar for Chrome, Safari and Opera */
body.big::-webkit-scrollbar {
   display: none;
}
* {
   box-sizing: border-box;
}
body {
   background-color: #FAECE8;
}
a, a:link, a:visited, a:hover, a:active, a:focus {
   color: #114AFD;
   text-decoration: none;
}
a:hover, a:active, a:focus {
   color: #114AFD;
   font-style: italic;
}
h1, h2, h3, h4, h5, h6 {
   font-weight: 200;
   margin-top: 0rem;
   margin-bottom: 0.5rem;
}
h2 {
   font-size: min(max(32px, 4vh), 40px);
}
h3 {
   font-size: 28px;
   line-height: 130%;
   font-weight: 30400;
}
strong {
   font-weight: bold;
   font-weight: 300;
}
i {
   font-style: italic
}
p {
	margin: auto;
   margin-bottom: 0.5rem;
      max-width: 90vw;
}
sup {
   font-size: 0.8rem;
}
header {
   width: 100vw;
   height: 20vh;
   position: fixed;
   z-index: 80;
   top: 0;
}
header .name {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   width: 60vw;
   left: 20vw;
   z-index: 300;
   height: 100%;
}
header h1 {
   display: none;
}
header img {
   width: 60vw;
   max-width: 270px;
   height: auto;
}
header img.nav {
   display: none;
}
a.hamburger-show, a.hamburger-close {
   height: 40px;
   width: 40px;
   display: block;
   top: 3vh;
   right: 3vh;
   background-image: url(img/hamburger.svg);
   background-position: top center;
   background-repeat: no-repeat;
   background-size: 120%;
   position: fixed;
   z-index: 600;
}
a.hamburger-close {
   display: none;
   background-image: url(img/hamburger.svg);
   background-position: bottom center;
}
header .navi {
   display: none;
   width: 100vw;
   height: 100vh;
   position: absolute;
   top: 0;
   right: 0;
   background-color: rgba(0, 72, 255, .7);
   color: #fff !important;
   z-index: 200;
}
nav {
   margin-top: 25vh;
   font-size: 2rem;
}
nav ul {
   margin-bottom: 3vh;
   font-size: 1.5rem;
}
nav ul.allg {
   margin-top: 3vh;
   font-size: 1.5rem;
}
nav a, nav a:link, nav a:visited, nav a:hover, nav a:active, nav a:focus {
   color: #fff;
   display: block;
   padding: 0.5rem 5vw;
   text-transform: uppercase;
}
nav li.selected a {
   font-style: italic;
}
@media only screen and (min-width: 1080px) {
   header .navi {
      width: 63vw;
   }
   nav {
      text-align: right;
   }
}
#wrapper {
   margin-top: 20vh;
   min-height: 100vh;
}
main {
   min-height: 90vh;
   width: 100%;
}
main.home {
   width: 100vw;
   display: flex;
   flex-direction: row;
   gap: 10vw;
   margin: auto;
   justify-content: space-between;
}
main.home a {
   width: 50vw;
   height: 70vh;
   display: block;
   text-transform: uppercase;
   font-size: 2rem;
   background-size: cover;
   background-repeat: no-repeat;
   margin-top: 5vh;
}
main.home a.link-z {
   text-align: right;
   background-image: url("inhalt/src/Bilder_resized/Monika-Grobel_Zeichnungen-l.jpg");
   background-position: 90% top;
}
main.home a.link-0 {
   text-align: left;
   background-image: url("inhalt/src/Bilder_resized/Monika-Grobel_Objekte-l.jpg");
   background-position: 3vw top;
   padding-top: 65vh;
}
main.werke {
   position: relative;
	top: 4vh;
}
main.werke #alle, .big main.werke #alle, main.werke #alle.category {
   width: 90vw;
   display: flex;
   flex-direction: column;
   gap: 2vh;
   row-gap: 3vh;
   margin: auto;
}
main.werke .teaser {
   height: auto;
   position: relative;
}
main.werke .teaser img, main.werke .big img {
   width: 100%;
   height: auto;
   background-color: #fff;
   position: relative;
   padding: 5%;
}
main.werke .teaser .teaser_title {
   position: absolute;
   top: -1.5vh;
   left: -1.5vw;
	font-weight: 200;
}
main.werke .teaser .teaser_title h2 {
   font-weight: 200;
   margin-top: 0;
   font-size: 4vh;
   font-size: min(max(32px, 4vh), 40px);
	text-transform: uppercase;
}
main.werke .category_title h2 {
   _display: none;
   position: absolute;
   width: 100vw;
   height: auto;
   text-align: center;
   left: 0;
   top: 1.5vh;
   z-index: 20;
   font-size: min(max(22px, 4vh), 26px);
   font-weight: 200;
   margin-top: -2vh;;
   font-size: 4vh;
   font-size: min(max(32px, 4vh), 40px);
	text-transform: uppercase;
}
.big main.werke .category_title {
   display: none;
}
.big main .caroussel {
   display: none;
}
.big main a {
   position: relative;
}
.big main .image {
   position: relative;
   width: auto;
   margin: auto;
}
.big main .info {
   position: absolute;
   bottom: 5vh;
   right: 5vw;
   text-align: left;
   font-size: 0.8rem;
   line-height: 120%;
   width: 17vw;
	font-weight: 300;
}
footer {
   padding: 3vh;
   margin-top: 5vh
}
footer a {
   font-size: 0.9rem;
   padding: 1vh 1vw;
}
@media only screen and (orientation: landscape) AND (min-width: 1000px) {
   main.home a {
      height: 80vw;
      background-size: contain;
   }
   main.home a.link-z {
      background-position: -5vw top;
   }
   main.home a.link-0 {
      padding-top: 0;
      margin-top: 5vh;
   }
   main.werke #alle {
      flex-direction: row;
      justify-content: center;
      gap: 4%;
      flex-wrap: wrap;
      padding-top: 5vh;
   }
   .big #wrapper {
      margin-top: 0;
      min-height: 85vh;
   }
   .big main.werke {
      min-height: 85vh;
      padding-top: 0;
      position: absolute;
   }
   main.werke .teaser {
      width: 46%;
      margin-bottom: 4vw;
   }
   main.werke .teaser:nth-child(3), main.werke .teaser:nth-child(4) {
      _width: 36%;
   }
   .sub main.werke #alle {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 1.25%;
      row-gap: 1.2vw;
   }
   .sub main.werke .teaser {
      width: 24%;
   }
   .big main.werke #alle {
      z-index: 50;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: left;
      margin: auto;
      width: auto;
   }
   .big div.big {
      width: 100vw;
      align-items: center;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      padding-top: 13vh;
   }
   .big main.werke .big img {
      max-height: 85vh;
      width: auto;
      display: inline-block;
      padding: 4vh;
   }
   .big main.werke a {
      width: 60vw;
   }
   .big main .image {
      width: fit-content;
   }
   .big main .info {
      right: -15.5vw;
   }
   .big main .caroussel {
      display: inherit;
      line-height: 100%;
      font-size: 300%;
   }
   .big main.werke .caroussel a {
      display: block;
      width: 20vw;
   }
   .big main .caroussel.next {}
}