/* tribute-styles.css */
/* === Übergeordnetes-Layout ===*/

:root {
    --font-fam: 'Poppins', sans-serif;

    --font-color: rgb(231, 231, 231);
    --background-back: black;
    --header: rgba(40, 38, 40, 0.6);
    --background-box: rgb(30, 29, 29);
    --box-shadow-main: rgb(70, 69, 69);
    --border-main: grey;
    --color-faeden: #FFC857;
    --color-pfoten: #40E0D0;
    --color-aromen: #FF6347;

}


body {
    display: flex;
    flex-direction: column;
    align-items:center;
    width: 100%;
    font-family: var(--font-fam);
    padding: 0;
    background-color: var(--background-back);
    color: var(--font-color);
    
    margin: 0;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* === Alle Section Hauptteile (Boxen)===*/

.title {
  
  margin: 1vw 3vh;
  text-align:center;
  width: 80%;
  scroll-margin-top: 15vh; 
}

.content-section {
display: flex;
justify-content: center;
}

.hobby-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section {
    margin: 1vw 3vh;
    width: 80%;
    border-radius: 15px;
    padding: 30px;
    background-color: var(--background-box);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex: 1;
}

.einleitung {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
}

/* === Hauptteil Home===*/



.home-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    
}

.home h1 {
    font-weight: 100;
    font-size: clamp(18px, 2vw, 60px);

}

.icons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.icons img {
    height: 100px;
    display: block;

    /*Animation*/
    animation: bounce 1s infinite ease-in-out;
    animation-direction: normal;

}
.icons span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 110px;   /* optional */
  height: 110px;  /* optional */
}

/*Verzögerung für die Wellenbewegung*/
.icons span:nth-child(1) img {
    animation-delay: 0s;
}

.icons span:nth-child(2) img {
    animation-delay: 0.2s;
}

.icons span:nth-child(3) img {
    animation-delay: 0.4s;

}

.icons span:nth-child(4) img {
    animation-delay: 0.6s;

}

/*Animation " Keyframes: kombiniert Translate + Scale" mit Hilfe von AI erstellt*/
@keyframes bounce {

    0%,
    100% {
        transform: translate(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Einleitung */

.home h2 {
    text-align: center;
    font-size: clamp(16px, 1.5vw, 40px);
    font-weight: 100;
}

.home p {
    font-size: clamp(12px, 1vw, 30px);
    text-align: center;
    justify-content: center;
}

/* === Hautteil-Hobbies ===*/
.hobbies {
    display: flex;
    flex-direction:column;
    justify-content: center;
    box-sizing: border-box;
    padding: 30px 10px;
    }

/* === Hobby Boxen ===*/

.content-box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    }


.hobby-box.flip-card {
    display: flex;
    flex-direction:column;
    align-items: center;
    min-width: 300px;
    height: 200px;
    margin: 5px;
    position: relative;
}

.hobby-box a,
.hobby-box a:link,
.hobby-box a:visited {
    text-decoration: none;
}

.hobby-box .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: 0.6s;
    transform-style: preserve-3d;
}

.hobby-box.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

/* Klick/Tap-Zustand per Klasse (Hilfe mit AI)*/
.hobby-box .flip-card .flip-card-inner {
    transform-style: preserve-3d;
    transition: transform .6s;
}

@media (hover: hover) and (pointer: fine) {
  .hobby-box.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
}

.hobby-box .flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.hobby-box .flip-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
        border-radius: 30px 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
    background-color: var(--background-box);
    flex-direction: row;
    justify-content: space-around;
}


.hobby-box .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 1px 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
    background-color: var(--background-box);
    transform: rotateY(180deg);
    text-align: center;
    font-size: 1rem;
    
}


.hobby-box .btn-link {
    display: inline-block;
    margin-top: 1rem;
    padding: 10px 20px;
    border: none;
    background: transparent;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    outline: none;
    transition: transform 0.2s, background-color 0.2s;
}

.btn-link.faeden {
    color: var(--color-faeden);
}

.btn-link.pfoten {
    color: var(--color-pfoten);
}


.btn-link.aromen {
    color: var(--color-aromen);
}

.hobby-box h3 {
    font-size: clamp(20px, 1vw, 50px);
    margin: 2px 2px 2px 15px;
    font-weight: 100;
}


.hobby-box img {
    height: 130px;
}



/* === Einzelne Boxen ===*/



.flip-card-front.faeden,
.flip-card-back.faeden {
    border: 2px solid var(--color-faeden);
    box-shadow: 0 2px 5px var(--color-faeden);
}

.flip-card-front.pfoten,
.flip-card-back.pfoten {
    border: 2px solid var(--color-pfoten);
    box-shadow: 0 2px 5px var(--color-pfoten);
}

.flip-card-front.aromen,
.flip-card-back.aromen {
    border: 2px solid var(--color-aromen);
    box-shadow: 0 2px 5px var(--color-aromen);
}

.hobby-box .flip-card-front img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 30px 1px;
    z-index: 10;
}

.hobby-box .flip-card-back {
    z-index: 20;
}

.faeden a {
    color: var(--color-faeden);
}

.pfoten a {
    color: var(--color-pfoten);
}

.aromen a {
    color: var(--color-aromen);
}

.hobby-box .flip-card-back a:hover {
    text-decoration: underline;
}




/* === Hauptteil Kontaktformular ===*/
.kontakt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
}

.formcontainer {
     border: 2px solid var(--border-main);
     max-width: 900px;
     padding: 20px;
     border-radius: 20px 5px;
 }


 input {
     border: 1px solid var(--box-shadow-main);
     border-radius: 4px;
     background-color: white;
     padding: 10px;
     box-sizing: border-box;
     margin: 5px;



 }

 input:focus {
     border: 2px solid white;
     outline: none;
     box-shadow: 0 0 5px var(--box-shadow-main);
 }

 .form-row {
     display: flex;
     gap: 15px;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-items: flex-start;
     margin-bottom: 20px;
 }

 .form-group {
     display: flex;
     flex-direction: column;
     flex: 1;
     gap: 2px;
     margin-top: 15px;

 }

 textarea {
     width: 100%;
     height: 150px;
     padding: 10px;
     box-sizing: border-box;
     border: 1px solid var(--box-shadow-main);
     border-radius: 4px;
     background-color: white;
 }

 textarea:focus {
     border: 2px solid white;
     outline: none;
     box-shadow: 0 0 5px var(--box-shadow-main);
 }

 input[type=submit] {
     font-weight: bold;
     color: black;
 }

.submit a {
font-size: smaller;
}

label {
text-align: left;
}

input::placeholder, textarea::placeholder {
    color: black;
    font-size:medium;
    
}

.danke a {
    text-decoration: none;
    color: var(--font-main);
   
}

.danke a:hover {
    
    color: var(--font-main);
    
}



@media (max-width: 768px) {


    .dropdown-nav-cont {
        left: -70px;
        top: -50px;
    }



    .icons img {
        height: 70px;
    }
}

article .pic_vid video {
    max-width: 30vh;
}

@media (hover: hover) and (pointer: fine) {
    .hobby-box .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }
}


.cookie-popup {
  position: fixed;
  
  bottom: 150px;
  left: 20px;
  right: 20px;
  background-color: var(--background-light);
  padding: 15px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px var(--font-main);
  display: none;
  z-index: 30; 

    
 }

 .cookie-popup p {
    margin: 0;
    font-size: 14px;
 }

 .cookie-popup button {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: var(--background-mid);
    border: none;
    cursor: pointer;
 }