html {scroll-behavior: smooth;}

@font-face {
  font-family: myfont;
  src: url(JosefinSans-Light.ttf);
}
* {
box-sizing: border-box;
margin: 0;
}

html, body    {  
    /*font-family: myfont;*/
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    min-height: 100vh;
    font-family: "Roboto";
    font-weight:100;
    font-size: 1rem;
    line-height:2rem;
    letter-spacing: 0.25rem;
    /*font-family: myfont, sans-serif;*/
    --schriftfarbe: rgb(40, 40, 40);
    --hintergrundfarbe: white; 
    --schriftfarbe-hover: black;
    margin: 0;
    scrollbar-gutter: stable;
}

header{
  position: absolute;
  width: 100%;
  float: right;
  padding: 0.5rem 0;
  color: var(--schriftfarbe);
  background-color: var(--hintergrundfarbe);
}

main {
  overflow: hidden;
  width: 100%;
  transition: margin-left .5s;
  margin-top: 60px;
}

.inside {
  display: flex;
  flex-flow: row nowrap; 
  justify-content:space-between;
  align-items: center;
  min-width: 300px;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 10px;
}

h1 {
    font-size: 1.5rem;
    font-weight:500;
    color: var(--schriftfarbe);
  }
  
h2 {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--schriftfarbe);
    margin: 1rem 0;
  }

p {
  color: var(--schriftfarbe);
  margin-bottom: 1rem;
}

.title{
  text-align: right;
}



  /*Navigation oben horizontal*/

.active {
    font-weight: bold;
    color: var(--schriftfarbe);
}


.sidebar {
  margin-top: 60px;
  padding-top: 20px;
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: var(--hintergrundfarbe);
  overflow-x: hidden;
  transition: 0.5s;

}

.sidebar a {
  padding: 1rem 1rem 1rem 1.5rem;
  text-decoration: none;
  color: var(--schriftfarbe);
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: black;
}

.hiddenmenu {
    height: 0px;
    overflow: hidden;
        transition: 0.3s;
}

.hiddenmenu a {
  padding: 1rem 1rem 1rem 3rem;
}

/* Hamburger Menu */

#nav-icon4 {
  float: left;
  width: 30px;  /* 60px*/
  height: 30px; /* 45px*/
  margin: 5px; /* 30px*/
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon4 span {
  display: block;
  position: absolute;
  height: 3px; /* 9px*/
  width: 100%;
  background: var(--schriftfarbe);
  border-radius: 3px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

/* Icon 4 */

#nav-icon4 {
}

#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 9px; /* 18px*/
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 18px;  /* 36px*/
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 18px;    /*39px*/
  left: 8px;    /* 8px*/
}

.text {
  padding-top: 2rem;
  /*margin: 80px 20px 20px 40px;*/
 /*margin: 200px 50px 400px 400px; -> für breites Display*/
 /*margin-left: auto;
 margin-right: auto;*/
}

.titelbild {
  display: flex;
  flex-flow: row nowrap; 
  justify-content:flex-end;
  align-items: center;
  min-width: 300px;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 10px;
    }

.titelbild img {
  max-width: 100%;
}

.bildergalerie {
/*margin: 80px 20px 20px 40px;*/
/*margin: 200px 50px 400px 400px; -> für breites Display*/
margin-top: 2rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 8rem;
}

.bildergalerie ul {
  display: flex;
  flex-flow: column nowrap;
  padding: 0;
}

li.bildrahmen {
display: flex;
list-style-type: none;
justify-content: center;
align-items: center;
text-align: center;
float: left;
width: 290px;
height: 290px;
/*border: 1px solid darkgray;*/
margin: 5px;
}

li.bildrahmen img {
display: block;
max-width: 250px;
max-height: 250px;
height: auto;
margin: auto;
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3), 1px 2px 12px rgba(0, 0, 0, 0.1);
   /* box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.1);*/
}

/*li.bildrahmen p {
display: table-cell;
font-size: 0.8em;
line-height: normal;
margin-bottom: inherit;
}*/

li.bildrahmen:hover {
border: 1px solid lightgray;
cursor: pointer;
}

.modal {
 display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 3; /* Sit on top */
  /*padding-top: 50px; /* Location of the box */
  /*padding-bottom: 50px;*/
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  /*overflow: auto; Enable scroll if needed */
  background-color: rgb(255,255,255); /* Fallback color */
  background-color: rgba(255,255,255,0.9); /* Black w/ opacity */
}

.modal-content {
  display: flex;
  flex-flow: column nowrap; 
  justify-content:space-between;
  align-items: end;
  height: 90%;
  padding: 50px 10px 20px;
}

.flex-item {
}

.flex-item:nth-of-type(1) {
  height: 85%;
}

/*.flex-item:nth-of-type(2) {
  background-color: chartreuse;
  height: 60px;
}*/

.flex-item:nth-of-type(2) {
  height: 40px;
  padding: 5px;
}

.image {
  max-width: 100%;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3), 1px 2px 12px rgba(0, 0, 0, 0.1);
  margin: 0 0 10px 0;
}

.imgtext {
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: var(--schriftfarbe);
    text-align: right;
    margin: 0;
}

.modal-nav {
    list-style-type: none;
    margin: 0;

}
.modal-nav li{
    float: right;
    display: inline-block;
    margin: 0 0 0 1.5rem;
}

.close {
    color: var(--schriftfarbe);
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 1rem 0 1rem;
}

.prev, .next{
    color: var(--schriftfarbe);
    font-size: 1.5rem;
    font-weight: bold;
    margin-left: 1rem;
}

.close:hover, .prev:hover, .next:hover,
.close:focus, .prev:focus, .next:focus {
  color: var(--schriftfarbe-hover);
  text-decoration: none;
  cursor: pointer;
}

.details {
	position: fixed;
	right: 20%;
	top: 10%;
	background-color: var(--hintergrundfarbe);
	border: 0.1em solid #3983ab;
    box-shadow: 10px 10px 5px grey;
	border-radius: 8px;
	padding: 1em 1em .2em;
	width: 45em;
	height: 50em;
	overflow: auto;
	display: none;
}

.details img {
	max-width: 45em;
    max-height: 45em;
}

.details:target {
	display: block;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    text-align: center;
    vertical-align: middle;
    height: 500px;
    width: 500px;
    border: 3px solid green;
}

.center p{
    vertical-align: bottom;
    border: 3px solid red;  
}
    
.footer {
    position: relative;
    padding: 0.5rem;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--hintergrundfarbe);
    text-align: center;
}

.footer a, .footer p {
    text-decoration: none;
    font-size: 0.75rem;
    padding: 0 1rem;
    margin: 0;
    color: var(--schriftfarbe);
}


.footer a:hover {
    color: var(--schriftfarbe-hover);
}

.instagram-logo {
  width: 2rem; /* Größe des Logos anpassen */
  height: auto;
}
    
/* Nach-oben-Pfeil*/
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* Der Pfeil ist standardmäßig ausgeblendet */
    text-decoration: none;
    color: dimgray;
    padding: 5px;
    text-align: center;
    cursor: pointer;
    font-size: 24px; /* Größe des Pfeils */
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Leichter Schatten */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }

#back-to-top:hover {
    color: black; /* Schwarz beim Hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Schatten verstärken */
}
  
/* Viewport umschalten bei 768px und 1280px 
Schriftgrößen 16px - 1rem, 18px - 1.125rem - 768px, 20px - 1.25rem - 1280px*/
@media screen and (min-width: 1280px){
    

    h1 {
    font-size: 2rem;
    }
    
    h1 br {
      display: none;
    }

  .sidebar {
    min-width: 300px;  
    width: 20%;  
    }

    .sidebar a {
    font-size: 1.25rem;
    padding: 1rem 1rem 1rem 0rem;
    margin-left: 40%;
    }

    .hiddenmenu a {
      padding: 1rem 1rem 1rem 2rem;
    }

    header {
      position: fixed;
      padding-left: 200px; 
    }
    
    main {
      padding-left: 200px;
    }

    #nav-icon4 {
        /*display:none;*/
        width: 0;
    }
    
    .bildergalerie ul {
      display: flex;
      flex-flow: row wrap;
    }

    .close {
      color: var(--schriftfarbe);
      font-size: 28px;
      font-weight: bold;
      margin: 0px 10px 0px 15px;
  }

  .modal-content {
    min-width: 300px;
    max-width: 1220px;
    height: 100%;
    padding: 20px 70px 20px;
  }

  .image {
    float: right;
    max-height: 100%;
  }

  .imgtext {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--schriftfarbe);
    text-align: right;
}
    .prev, .next{
      color: var(--schriftfarbe);
      font-size: 28px;
      font-weight: bold;
  }

  #back-to-top {
    display: none;
  }

  .modal {
    padding-left: 200px;
  }
}