@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Smythe&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100&display=swap');

* { /* allgemeine Einstellungen */
  box-sizing: border-box; /*inkludiert bei der Erstellung der Elemente direkt eine Grenze */
  margin:0;
  padding: 0;
  scroll-behavior: smooth;
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  display: fixed;
  }

body::-webkit-scrollbar {
  display: none;
  }

html, body {
  max-width: 100%;
  overflow-x: hidden;
  }

body {
  background: #000000;
  }

.navbar {
  background:  #000000;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #1f729b, #000001);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #1f729b, #000001); /* IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  font-size: 2vw;
  position: sticky;
  top: 0;
  z-index: 999;
  }

.navbar__container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10v;
  flex-direction: row;
  z-index: 1;
  width: 100vw;
  margin: auto auto;
  }

#navbar__logo {
  background: #ffffff;  
  background-size: 100%;
  background-clip: text;
  -webkit-background-clip: text; /* Hintergrund des Logos ist transparent*/
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  user-select: none;
  margin: 1vw auto;
  }

img.logo{
  width: 15vw;
  }

#seitentitel {
  font-family: 'Outfit', sans-serif;
  font-size: 1 rem;
  margin:0 0;
  margin-top: 1.5vw;
  user-select: none;
  }

.scroll {
  align-items: center;
  justify-content: center;
  }

.gallery {
  align-items: top;
  justify-content: center;
  display: flex;
  width: 100vw;
  margin-top: 0.125vw;
  margin-bottom: 0.125vw;
  }

.gallery__column {
  display: flex;
  flex-direction: column;
  width: 33.333333vw;
  }

.card-container{
  background-color: transparent;
  height: 33.333333vw;
  perspective: 800px;
  padding: 0.125vw 0.125vw;
  }

.card{
  position: relative;
  width: 100%;
  height: 100%;                                                 
  transition: all 2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* cubic-bezier ist der Animationsstil (legt 4 punkte fest; 2 für die Kurve und 2 für das Objekt */
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  }

.card.flip {
  transform: rotateY(180deg);
  transform-style: preserve-3d; /* behandelt die Karte mit Vorder- und Rückseite als ein 3D-Objekt */
  transition: all 2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  }

.back {
  background-color: #000000;
  text-align: center;
  padding: 1vw;
  font-family: 'Outfit', sans-serif;
  font-size: 1.8vw;
  transform: rotateY(180deg);
  }

.face{
  background: radial-gradient(circle,#082735 20% , #000000);
  overflow: hidden;
  display: flex;
  justify-content: center;
  }

.face, .back{
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;  /* Ausblenden der verdeckten Seite */
  }

.face, .back p {
  padding: 2vw 4vw;
  }
  
.face, .back h2 {
  padding: 4vw 4vw;
  }

.back{
  font-family: 'Raleway', sans-serif;
  font-size: 1vw;
  text-align: center;
  }

.gallery__image {
  max-height: 100%;
  transition: .3s;
  }
      
.card:hover .gallery__caption{
  opacity: 1;
  }

.card:hover .caption {
  opacity: 1;
}

.gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 4vw 2vw 2vw;
  width: 100vw;
  opacity: 0;
  background: linear-gradient(0deg, #000000 0%, #ffffff00 100%);
  transition: .3s;
  margin: auto;
  }

.caption {
  position: absolute;
  bottom: 5%;
  font-family: 'Raleway', sans-serif;
  font-size: 1.5vw;
  color: #ffffff;
  opacity: 0;
}

.Impressum-Hintergrund {
  background:  #02012b;
  background: -webkit-linear-gradient(to left, #000000, #1f729b);
  background: linear-gradient(to left, #000000, #1f729b);
  z-index: 1;
  height: fit-content;
  width: 100vw;
  }

.Impressum-Container {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1vw;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  display: grid;
  width: 100vw;
  text-align: left;
  padding: 2vw 2vw
  }

.Titel {
  grid-column: 1;
  grid-row: 1;
  }
  
.Inhaber {
  grid-column: 1;
  grid-row: 2;
  }
  
.Kontakt {
  grid-column: 2;
  grid-row: 2;
  }
  
.Verantwortlich {
  grid-column: 3;
  grid-row: 2;
  }
  
.Datenschutzerklaerung {
  grid-column: 4;
  grid-row: 2;
  }

a:link {
  color: #ff7a0e;
  }

/* visited link */
  a:visited {
  color: #07fd39;
  }

/* mouse over link */
  a:hover {
  color: #00ffff;
  }

/* selected link */
  a:active {
  color: #ffffff;
  }