/* Grundlegende Formatierungen */
body {
  margin: 0;
  padding: 0;
  background-color: #b08968;
}

/*Formatierung Navigationsleiste*/
.navigation {
  border-radius: 4em 4em 4em 4em; /*Border Einstellungen von Transform Generator*/
-webkit-border-radius: 4em 4em 4em 4em;
-moz-border-radius: 4em 4em 4em 4em;
border: 0.5em double #DDB892;
height: 5em;
display: flex; /*Flexbox*/
background-color: #774923;
align-items: center;
justify-content:  space-around; /*Abstand der Elemente entlang der Hauptachse, gleichmäßiger Abstand zwischen den Verlinkungen*/
}

/* allgemeine Formatierung der Liste*/
.navigation li {
list-style-type: none; /*keine Dekoration, wie Aufzählungszeichen*/
}

/*Formatierung der einzelnen Verlinkungen*/
.navigation a {
padding: 15px;
display: inline-block;
color: #ede0d4;
text-decoration: none; /*keine Dekoration, wie Aufzählungszeichen*/
transition: outline 1s ease 0s;
font-size: 2em;
font-family: 'Times New Roman', Times, serif; 

}

/*Formatierungen der Verlinkungen bei Hovereffekt*/
.navigation a:hover, #akt_tab {
outline: 0;
border-radius: 2em 2em 2em 2em; /*Border Einstellungen von Transform Generator*/
-webkit-border-radius: 2em 2em 2em 2em;
-moz-border-radius: 2em 2em 2em 2em;
background-color: #DDB892;
}

nav a.active {
outline: 0;
border-radius: 2em 2em 2em 2em; /*Border Einstellungen von Transform Generator*/
-webkit-border-radius: 2em 2em 2em 2em;
-moz-border-radius: 2em 2em 2em 2em;
background-color: #DDB892; /* Aktive Seite markieren */
}

/*Formatierung Logo*/
.logo {
  -webkit-animation: rotate-vert-center 2s linear infinite both; /*Animation von Animista*/
	        animation: rotate-vert-center 2s linear infinite both;
}

@keyframes rotate-vert-center { /*Animation von Animista*/
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

.ü1 {
  text-align: center;
  letter-spacing: 0.2em;
  font-family: Cormorant Garamond;
  font-size: 10vw; /* Schriftgröße passt sich der Bildschirmgröße an */
  color: #ede0d4;
  margin-bottom: 0.5em;
  
}

.welle {
  display: flex;
  justify-content: center;
  margin-top: 0.5em;
}

.bild {
  height: 30em;
  max-width: 90%; 
  border-radius: 200px 200px 12px 12px;
  border: 0.5em solid #774923;
  margin-top: 1.5em;
  margin-bottom: -15em;
}

.container-bild {
  display: flex;
  justify-content: center;
}

/*Formatierungen der Flip-Karten*/
.card-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10vw; /*Abstand dazwischen gleichmäßig verteilen*/
}

.card-container {
  perspective: 1000px;
}

.card {
  width: 16em;
  height: 16em;
  transform-style: preserve-3d;
  transition: transform 0.8s;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

/*Hovereffekt*/
.card:hover {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-family: Cormorant Garamond;
  border-radius: 2em 2em 2em 2em;
}

/*Formatierung der Vorderseite*/
.front {
  background-color: #DDB892;
  color: #ede0d4;
}

/*Formatierung der Rückseite*/
.back {
  background-color: #e6ccb2;
  color: #ede0d4;
  transform: rotateY(180deg);
}

/* Hintergrundboxen hinter den Karten */
.Hintergrundbox1 {
  margin-top: 18em;
    display: flex;
    justify-content: center;
    height: 25em;
    background-color: #7F5539;
    border-radius: 2em 2em 2em 2em;
    width: 100%; /* Box nimmt nun die gesamte Breite des Bildschirms ein */
    max-width: none; /* Keine Begrenzung der maximalen Breite */
    

}

/* Button Formatierung */
button {
  font-family: 'Times New Roman', Times, serif;
  width: 10vw;
  height: 10vh;
  font-size: 1em;
  color: #ede0d4;
  background-color: #7F5539;
  text-align: center;
  border: none;
  border-radius: 0.9em;
}

/* Button Hover-Effekte */
button:hover {
  background-color: #DDB892;
  cursor: pointer;
}

/* Text1 Formatierung */
.text1 {
  font-family: "ballet", cursive;
  font-size: 3em;
  letter-spacing: 0.5vw;
  font-weight: lighter;
  color: #ede0d4;
  margin: 3%;
}

/* Text2 Formatierung */
.text2 {
  font-family: Cormorant Garamond;
  font-size: 0.5em;
  font-weight: lighter;
  color: #ede0d4;
  letter-spacing: normal;
  display: flex;
  margin: 3%;
}

/* Hintergrundbox2 */
.Hintergrundbox2 {
  width: 63vw;
  height: 24em;
  background-color: #7F5539;
  margin: 5%;
  margin-top: 15em;
  display: flex;
  border-radius: 3em 3em 3em 3em;
}

/*Formatierung Bildband*/
.band {
  overflow: hidden;
  width: 100%;
  background: #b08968; /* optional: schwarzer Hintergrund */
  padding: 2em 0;
  margin-top: 9em;
}

/*Formatierung des Bildbandes*/
.bildband {
  display: flex;
  gap: 1em;
  animation: scroll 60s linear infinite; /*Animation des Bildbandes*/
  width: max-content; /*nur so breit wie der Inhalt*/
}

/*Formatierung Hovereffekt Bildband*/
.band:hover .bildband {
  animation-play-state: paused;
}

.item {
  flex: auto; /*automatische Breite in flex-Layout*/
  width: 300px;
  height: 225px;
  border-radius: 1em; /*abgerundete Ecken*/
  overflow: hidden;
  box-shadow: 0 4px 12px #DDB892; /*Schatten der einzelnen Bilder*/
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /*für eine Art smoothen Plop-Effekt*/
}

.item:hover {
  transform: scale(1.1); /*wird bei hover größer*/
}

.item img,
.item video {
  width: 100%;
  height: 100%;
  object-fit: cover; /*füllt das Element aus*/
  display: block; /*verhindert zusätzliche Abstände*/
  object-position: center 60%; /*legt fest, was man vom Bild sieht*/
}

/*Formatierung der Sicht des Bildes einzeln*/
.item img[src*="köck_shoppen_familie.jpg"] {
 object-position: center 35%;
}

.item img[src*="köck_shopping_parndorf.jpg"] {
  object-position: center 35%;
 }

/*Animation von einem Youtube Tutorial Bildband*/
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Angenehmes Scrollen */
html {
  scroll-behavior: smooth;
}

/*Zitat Formatierungen*/
.quote-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px; /*Abstand zwischen Linien und Zitat*/
  margin: 100px auto 6em;  /*Außenabstand oben/unten + zentriert*/
  max-width: 900px;
  padding: 0 20px; /*Innenabstand links/rechts*/
}

.quote {
  font-family: Cormorant Garamond;
  font-size: 1.5em;
  color: #ede0d4;
  text-align: center;
  margin: 0;
  line-height: 1.8;
  max-width: 600px;
}

/*Formatierungen Linie links + rechts*/
.quote-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #ede0d4, transparent);
  max-width: 120px; /*Maximale Länge der Linie*/
  opacity: 0.7;
}


/* Footer Formatierung */
footer {
  display: flex;
  position: absolute;
  top: 530vh;
  font-family: Cormorant Garamond;
  font-size: 1em;
  align-items: center;
  justify-content: center;
  color: #ede0d4;
  flex-direction: column; 
  background-color: #774923;
  height: 3em;
  border: 0.5em double #DDB892;
  width: 99.2%;
  border-radius: 4em 4em 4em 4em;
}

footer a {
  color: #ede0d4;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}



/* Media Queries für kleinere Bildschirme */
@media (max-width: 768px) {
  .ü1 {
    font-size: 12vw; /*etwas größer für bessere Lesbarkeit auf kleinen Geräten*/
    margin: 0.5em;
  }

  .card-wrapper {
    gap: 2em; /*weniger Abstand*/
    flex-direction: column;
    align-items: center;
  }

  .card {
    width: 80vw;
    height: 80vw;
  }

  .bild {
    height: auto;
    width: 90vw;
    border-width: 0.4em;
  }

  button {
    width: 70%;
    height: auto;
    font-size: 1em;
    margin: 1em 0;
  }

  .Hintergrundbox1,
  .Hintergrundbox2 {
    width: 95%;
    height: auto;
    flex-direction: column;
    align-items: center;
    padding: 2em 1em;
  }

  .text1 {
    font-size: 2em;
    text-align: center;
  }

  .text2 {
    font-size: 1em;
    text-align: center;
    flex-direction: column;
  }

  footer {
    font-size: 0.9em;
    height: auto;
    padding: 1em;
    position: relative;
    top: auto;
    width: 100%;
  }
}

  /*zurück-nach-oben-Button Formatierung*/
  .zurück-nach-oben {
    position: fixed;
    bottom: 2vh;
    right: 1vw;
    width: 3em;
    height: 3em;
    background-color: #774923;
    color: #ede0d4;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  /*zurück-nach-oben-Button Hoverformatierung*/
  .zurück-nach-oben:hover {
    background-color: #DDB892;
  }

  /*angenehmes nach oben scrollen*/
  html {
    scroll-behavior: smooth;
  }

/*Media Queries für verschiedene Bildschirmgrößen*/

/*Für kleine Geräte (Handys)*/
@media (max-width: 480px) {
  .ü1 {
    font-size: 12vw;
    margin: 0.5em;
  }

  .card-wrapper {
    gap: 2em;
    flex-direction: column;
    align-items: center;
  }

  .card {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .bild {
    height: auto;
    width: 90vw;
    border-width: 0.4em;
    display: block;
    margin: 0 auto;
  }

  button {
    width: 70%;
    height: auto;
    font-size: 1em;
    margin: 1em 0;
  }

  .Hintergrundbox1,
  .Hintergrundbox2 {
    width: 95%;
    height: auto;
    flex-direction: column;
    align-items: center;
    padding: 2em 1em;
  }

  .text1 {
    font-size: 2em;
    text-align: center;
  }

  .text2 {
    font-size: 1em;
    text-align: center;
    flex-direction: column;
  }

  footer {
    font-size: 0.9em;
    height: auto;
    padding: 1em;
    position: relative;
    top: auto;
    width: 100%;
  }

  .navigation {
    flex-direction: column;
    align-items: center;
    height: auto;
    border-radius: 2em;
    padding: 0.5em;
  }

  .navigation a {
    font-size: 1.2em;
    padding: 0.5em;
  }
}


/*Für größere Smartphones*/
@media (max-width: 768px) {
  .ü1 {
    font-size: 9vw;
  }

  .card-wrapper {
    gap: 3em;
    flex-wrap: wrap;
    justify-content: center;
  }

  .card {
    width: 80%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .bild {
    height: auto;
    width: 85vw;
    border-width: 0.4em;
    display: block;
    margin: 0 auto;
  }

  button {
    width: 60%;
    height: auto;
    font-size: 1em;
  }

  .Hintergrundbox1,
  .Hintergrundbox2 {
    width: 90%;
    height: auto;
  }

  footer {
    position: relative;
    top: auto;
    width: 100%;
  }

  .navigation {
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 1em;
  }

  .navigation a {
    font-size: 1.5em;
    padding: 0.5em;
  }
}


/*Für Tablets*/
@media (max-width: 1024px) {
  .ü1 {
    font-size: 7.5vw;
  }

  .card-wrapper {
    gap: 4em;
    flex-wrap: wrap;
    justify-content: center;
  }

  .card {
    width: 15em;
    height: 15em;
  }

  .bild {
    height: auto;
    width: 80vw;
  }

  button {
    width: 40vw;
    height: auto;
  }

  .Hintergrundbox1,
  .Hintergrundbox2 {
    width: 85%;
    height: auto;
  }

  footer {
    position: relative;
    top: auto;
    width: 100%;
  }
}


/*Für größere Tablets/Laptops*/
@media (max-width: 1200px) {
  .ü1 {
    font-size: 6vw;
  }

  .card-wrapper {
    gap: 5em;
  }

  .card {
    width: 16em;
    height: 16em;
  }

  .bild {
    height: auto;
    width: 70vw;
  }

  button {
    width: 30vw;
  }

  .Hintergrundbox1,
  .Hintergrundbox2 {
    width: 80%;
  }

  footer {
    position: relative;
    top: auto;
    width: 100%;
  }
}