/* =========================================
   ETERNAL ROSE - ANITA BESLAGIC
   style.css (Optimierte Version)
========================================= */

/* ==========================
   RESET
========================== */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

body{
  font-family: 'Montserrat', sans-serif;
  background: #141414;
  color: white;
  line-height: 1.8;
  overflow-x: hidden;
}

/* ==========================
   STERNENHIMMEL
========================== */
#stars{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.star{
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  opacity: .8;
  animation: twinkle infinite alternate;
  will-change: opacity; /* Optimiert die Performance */
}

@keyframes twinkle{
  0%{ opacity: .2; }
  100%{ opacity: 1; }
}

/* ==========================
   FALLENDE ENGELSFEDERN (ECHT)
========================== */
#petals {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9998;
}

.petal {
  position: absolute;
  top: -60px; /* Etwas höher starten, da Bilder größer sein können */
  display: block;
  height: auto; /* Behält das Seitenverhältnis der Grafik bei */
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3)); /* Gibt den Federn ein sanftes Leuchten */
  animation: featherFall linear infinite;
  will-change: transform;
}

/* Der schaukelnde, taumelnde Flug einer echten Feder */
@keyframes featherFall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  25% {
    transform: translateY(25vh) translateX(45px) rotate(35deg);
  }
  50% {
    transform: translateY(50vh) translateX(-35px) rotate(-25deg);
  }
  75% {
    transform: translateY(75vh) translateX(40px) rotate(20deg);
  }
  100% {
    transform: translateY(105vh) translateX(0) rotate(5deg);
  }
}

/* ==========================
   SCROLL TO TOP BUTTON
========================== */
#topBtn{
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 55px;
  height: 55px;
  border: none;
  border-radius: 50%;
  background: #E8C2A6;
  color: black;
  font-size: 20px;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 0 20px rgba(232,194,166,.4);
  transition: .4s;
}

#topBtn:hover{
  transform: translateY(-5px);
}

/* ==========================
   HEADER
========================== */
header{
  height: 100vh;
  background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.8)), url("bilder/hero-anita.webp");
  background-size: cover;
  background-position: center;
  position: relative;
}

/* ==========================
   NAVIGATION
========================== */
nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 80px;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  z-index: 1000;
}

.logo {
  font-family: "Cormorant Garamond";
  font-size: 30px; /* Leicht reduziert für besseren Platzfluss */
  color: #E8C2A6;
  white-space: nowrap !important;
  display: inline-block;
}

.nav-links{
  display: flex;
  gap: 40px;
  list-style: none;
}

nav a{
  text-decoration: none;
  color: white;
  transition: .3s;
}

nav a:hover, nav a.active{
  color: #E8C2A6;
}

/* ==========================
   HERO
========================== */
.hero{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.hero-content{
  max-width: 900px;
}

h1{
  font-size: 80px;
  font-weight: 300;
  font-family: "Cormorant Garamond";
  margin-bottom: 20px;
}

h2{
  font-size: 55px;
  font-family: "Cormorant Garamond";
  color: #E8C2A6;
  margin-bottom: 20px;
}

.hero p{
  font-size: 22px;
  max-width: 800px;
  margin: auto;
}

/* ==========================
   BUTTONS
========================== */
.button{
  display: inline-block;
  margin-top: 40px;
  padding: 18px 45px;
  border-radius: 50px;
  border: 1px solid #E8C2A6;
  color: white;
  text-decoration: none;
  transition: .4s;
}

.button:hover{
  background: #E8C2A6;
  color: black;
}

/* ==========================
   SEKTIONEN
========================== */
section{
  padding: 120px 10%;
  position: relative;
  z-index: 5;
}

.container{
  max-width: 1000px;
  margin: auto;
  text-align: center;
}

/* ==========================
   TIMELINE
========================== */
.timeline{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 60px;
}

/* ==========================
   KARTEN
========================== */
.card{
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(232,194,166,.2);
  border-radius: 30px;
  padding: 40px;
  transition: .5s;
}

.card:hover{
  transform: translateY(-10px);
  border-color: #E8C2A6;
}

.card h3{
  font-size: 35px;
  font-family: "Cormorant Garamond";
  color: #E8C2A6;
  margin-bottom: 20px;
}

/* ==========================
   ZITAT
========================== */
.quote-section{
  text-align: center;
}

.quote-box{
  max-width: 900px;
  margin: auto;
  padding: 60px;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(232,194,166,.2);
  border-radius: 40px;
}

.quote-box p{
  font-size: 22px;
  font-style: italic;
}

/* ==========================
   FADE IN
========================== */
.fade{
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade.visible{
  opacity: 1;
  transform: translateY(0);
}

/* ==========================
   GALERIE
========================== */
.gallery-section{
  padding: 150px 10%;
  text-align: center;
}

.gallery-subtitle{
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 80px;
}

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.gallery-item{
  overflow: hidden;
  border-radius: 30px;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(232,194,166,.2);
  transition: .5s;
  cursor: pointer;
}

.gallery-item:hover{
  transform: translateY(-10px);
  border-color: #E8C2A6;
}

.gallery-item img{
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  transition: .8s;
}

.gallery-item:hover img{
  transform: scale(1.08);
}

/* ==========================
   GALERIE GRID
========================== */


.album-section {
    text-align: center;
    padding: 80px 20px;
}

.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 50px auto;
}

.album-item {
    position: relative;
    display: block;
    text-decoration: none;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    transition: transform 0.4s ease;
}

.album-item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.album-item:hover img {
    transform: scale(1.08);
}

.album-item:hover {
    transform: translateY(-6px);
}

.album-title {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: #E8C2A6;
    font-size: 18px;
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 1px;
}

/* ==========================
   LIGHTBOX
========================== */
#lightbox{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(10px);
}

#lightbox.active{
  display: flex;
}

#lightboxImg{
  max-width: 90%;
  max-height: 90%;
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(232,194,166,.3);
  animation: zoomIn .5s;
}

#closeBtn{
  position: absolute;
  top: 30px;
  right: 50px;
  font-size: 60px;
  color: white;
  cursor: pointer;
  transition: .3s;
}

#closeBtn:hover{
  color: #E8C2A6;
}

@keyframes zoomIn{
  from{ transform: scale(.8); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}

/* ==========================
   LIGHTBOX PFEILE
========================== */

#prevBtn,
#nextBtn{

position:absolute;

top:50%;

transform:translateY(-50%);

font-size:60px;

color:white;

cursor:pointer;

padding:20px;

transition:.3s;

user-select:none;

z-index:10000;

}

#prevBtn{

left:40px;

}

#nextBtn{

right:40px;

}

#prevBtn:hover,
#nextBtn:hover{

color:#E8C2A6;

}


/* Smartphone */

@media(max-width:768px){

#prevBtn,
#nextBtn{

font-size:40px;

padding:10px;

}

#prevBtn{

left:15px;

}

#nextBtn{

right:15px;

}

}

/* ==========================
   VIDEO HERO
========================== */
.video-hero{
  padding-top: 180px;
  text-align: center;
}

/* ==========================
   VIDEOS
========================== */
.video-section{
  padding: 80px 10%;
  display: grid;
  /* Optimierung: Schützt schmalere Bildschirme vor dem Herausragen */
  grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr)); 
  gap: 50px;
}

.video-card{
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(232,194,166,.2);
  border-radius: 30px;
  padding: 30px;
  transition: .5s;
}

.video-card:hover{
  transform: translateY(-10px);
  border-color: #E8C2A6;
}

.video-card h2{
  margin-bottom: 25px;
}

.video-card video{
  width: 100%;
  border-radius: 20px;
  margin-bottom: 25px;
}

.video-card p{
  line-height: 1.8;
}

/* ==========================
   MUSIK BUTTON
========================== */
#musicBtn{
  position: fixed;
  left: 30px;
  bottom: 30px;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(20px);
  color: #E8C2A6;
  font-size: 26px;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 0 20px rgba(232,194,166,.25);
  transition: .4s;
}

#musicBtn:hover{
  transform: scale(1.1);
  background: rgba(255,255,255,.15);
}

/* ==========================
   PREMIUM FOOTER
========================== */
footer{
  padding: 100px 10%;
  background: #111;
  border-top: 1px solid rgba(232,194,166,.15);
}

.footer-content{
  text-align: center
}

.footer-links a,
.footer-links a:visited {
  color: #fff; /* gewünschte Farbe */
  text-decoration: none;
}

/* ==========================
   COOKIE BANNER
========================== */


/* Overlay Hintergrund (optional leichtes Dimmen) */
.cookie-overlay {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;

    animation: fadeIn 0.5s ease;
}

/* Karte */
.cookie-card {
    width: 280px;
    background: rgba(17, 17, 17, 0.95);
    color: #fff;
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);

    font-family: 'Montserrat', sans-serif;
}

/* Titel */
.cookie-card h3 {
    margin: 0 0 8px 0;
    color: #E8C2A6;
}

/* Text */
.cookie-card p {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
}

/* Button */
.cookie-card button {
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;

    background: #E8C2A6;
    color: #111;
    font-weight: 500;
}

.cookie-card button:hover {
    opacity: 0.9;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================
   NEUE SPRACH-POSITIONIERUNG (GARANTIERT SICHTBAR)
========================== */

/* Sorgt dafür, dass die Navigation alle drei Elemente sauber nebeneinander anordnet */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.lang-switcher-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(232, 194, 166, 0.2);
    padding: 6px 12px;
    border-radius: 20px;
    white-space: nowrap; /* Verhindert das Umbrechen der Flaggen */
}

.lang-switcher-nav .lang-btn {
    color: white !important; /* Erzwingt die weiße Farbe */
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.lang-switcher-nav .lang-btn:hover,
.lang-switcher-nav .lang-btn.active {
    color: #E8C2A6 !important; /* Goldton bei Aktivierung */
}

.lang-switcher-nav .lang-divider {
    color: rgba(255, 255, 255, 0.3);
    font-size: 10px;
    user-select: none;
}

/* Smartphone-Anpassung */
@media (max-width: 768px) {
    .lang-switcher-nav {
        position: absolute;
        right: 80px; /* Platziert die Flaggen links neben den Hamburger-Button */
        top: 50%;
        transform: translateY(-50%);
    }
}