@font-face {
  font-family: 'GalerieFont'; /* Hier den Namen für die Schriftart angeben */
  src: url('/fonts/Helvetica_Neue_Regular.otf') format('opentype'); /* Pfad zur .otf Datei angeben */
  /* Weitere Format-Optionen für verschiedene Browser hinzufügen */
}

.hp-titel {
	font-size: calc(1.0rem + 7vw);
	padding: 0.5rem 0.5rem 0.1rem 0.5rem;
}

/* Beispiel für die Verwendung der Schriftart im Titel */
h1 {
    font-size: calc(1.0rem + 7vw);
  /* Weitere Stil-Optionen für den Titel definieren */
}

h2 {
	font-size: calc(1.0rem + 3vw);
}


.description {
	font-size: calc(1.0rem + 2vw);
}	




.centered-content h2 {
	font-size: calc(2rem + 3vw);
	margin-bottom: calc(1rem + 1vw);
}

.titel-kommentar {
    font-size: calc(1rem + 0.9vw);
}

p {
	font-size: calc(1rem + 0.5vw);
	letter-spacing: 0.2rem;
}


.footer p {
	font-size: calc(0.7rem + 0.5vw);
	letter-spacing: 0.2rem;
    font-weight: 400;
	margin-left: 1rem;
	margin-right: 1rem;
}

.picture-titel{
	font-size: calc(1.6rem + .8vw);
}

.zurueck  {
	font-size: calc(1rem + 2vw)
}



/* Beispiel für die Verwendung der Schriftart in der Beschreibung */
h1, h2, p,.picture-titel, .zurueck, .galerie-titel, .hp-titel, .new_pic {
  font-family: 'GalerieFont', sans-serif;
  
}



h1, h2, .galerie-titel, .hp-titel {
  text-align: center;
}

.galerie-uebersicht {
    margin-top: 5rem;
}

.galerie-folder-picture {
    margin-bottom: 0.5rem;
    margin-top: 2rem;
}

.new_pic {
	text-align: center;
	margin-top: 0.5em;
	font-size: calc(1rem + 0.7vw);
	letter-spacing: 0.25em;
}


#gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  
  
}

.full-height {
	min-height: 100vh;
}


.image-frame {
	scroll-snap-align: center;
}


.custom-container {
	width: 80% !important;
	scroll-snap-type: x mandatory;
}


.folder {
  margin: 20px;
  text-align: center;
  cursor: pointer;
}

.galerie-folder-picture img {
  transition: transform 1s; /* Animation */
  width: calc(200px + 6vw);
  height: calc(200px + 6vw);
  object-fit: cover;
}

/* inhalt */
.centered-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.picture-titel {
	display: flex; 
	align-items: center;
	justify-content: center;
}

.zurueck {
  position: relative; /* oder fixed */
  bottom: -3vw;
  display: flex; 
  align-items: center;
  justify-content: center
}


/* gallery */

.image-container img {
	height: calc(20rem + 10vh);
}


.gallery-container {
  margin-left: calc(0.5rem + 2vw);
  margin-right: calc(0.5rem + 2vw);
  margin-top: calc(5rem + 6vh);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-top: 1em;
  padding-bottom: calc(1% + 3vh);
  
   /* Entferne Scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.gallery-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}


.gallery-container::-webkit-scrollbar-thumb {
  background: transparent;
}


.gallery-container::-webkit-scrollbar-track {
  background: transparent;
}


/* Bilder in der Gallery anpassen */
.image-container {
  margin-right: 20rem;
  margin-left: 20rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  scroll-snap-align: start;
  border: #050505 0.5rem solid;
  border-radius: 0.5rem;
  box-shadow: 8px 10px 5px silver;
  transition: transform 1s; /* Animation */
}

.image-container:hover {
  transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}



.sl-overlay {
  background-color: black;
}


.sl-counter, .sl-close, .sl-prev, .sl-next {
	color: white !important;
}


.sl-counter {
	font-size: 2rem  !important;
}


/* pfeile */
.left-arrow,
.right-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.left-arrow {
  left: 0;
}

.right-arrow {
  right: 0;
}


@media (pointer: coarse) {
  /* Styles für Geräte mit grobem Zeigegerät wie Touchscreen */
  .pfeil {
    display: none;
  }
}




.footer {
  margin-top: calc(2rem + 2vw);
  margin-bottom: calc(2rem + 2vw);
  display: flex; 
  align-items: center;
  justify-content: center
}


.password-container {
	font-family: 'GalerieFont', sans-serif;
	letter-spacing: 0.2rem;
	font-size: calc(1rem + 0.5vw);
	min-height: 20vh;
	display: flex;
	justify-content: center;
	aling-items: center;
	margin-top: calc(1rem + 1vw);
	margin-left: 5rem;
	margin-right: 5rem;
	margin-bottom: calc(1rem + 1vw);
}


#password {
	height: calc(1.5rem + 1vw);
	width: calc(15rem + 1vw);
	margin: 0.1rem 2rem 1rem 2rem;
}

#pw-button {
	height: calc(2rem + 1vw);
	width: calc(12rem + 1vw);
	margin: 1rem 2rem;
	font-size: calc(1rem + 0.5vw);
}


.btn {
	font-size: calc(2rem + 1vw);
    height: calc(8rem + 1vw);
    width: calc(2rem + 1vw);
}

.picture_placeholder {
	width:  calc(20rem + 10vh);
	border: 0;
	transition: off;
}


.impressum {
	margin-top: 10rem;
}

.impressum p {
font-size: calc(0.3rem + 1vh);
}


.datenschutz {
	margin: 1rem;
	
}