/* ============================================
   style.css — Komplette, korrigierte Version
   ============================================ */

/* 1. Global Reset & Box-Sizing */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 2. Grundlegendes Seitenlayout */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background: #fff;
  color: #333;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 3. Variablen */
:root {
  --gap: 16px;
}

/* 4. Hero-Sektion */
header.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url('../img/bg_desktop.jpg') center/cover no-repeat;
}
@media (max-width: 768px) {
  .modal-main .modal-img {
    max-height: 50vh;
    object-fit: contain;
  }
  .modal-content {
    overflow-y: hidden;
  }
}
header.hero .logo {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:350px;
  max-width: 75%;
}

/* 5. Sektionen (About, Banner, Flex-Container) */
.section {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

#about h1{
  text-transform:uppercase;
   letter-spacing:1px;
    font-size:2.1rem;
    margin-bottom:2rem;
    line-height:2.75rem;
}

#about h3{
  text-transform:uppercase;
}



#banner {

  color: #fff;
  text-align: center;
  padding: 40px 20px;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}
.flex-container .item {
  flex: 1 1 calc(33.333% - 40px);
  background-color: #f9f9f9;

  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;

  border-radius: 8px;


}
@media (max-width: 768px) {
  .flex-container .item {
    flex: 1 1 100%;
  }
}

/* 6. Footer */
footer {
  background-color: #222;
  color: #fff;
  text-align: center;
  padding: 20px;
}

/* 7. Galerie als CSS Columns (Masonry) */
.gallery-masonry {
  column-count: 3;
  column-gap: var(--gap);
  padding: 0 var(--gap);
}
@media (max-width: 500px) {
  .gallery-masonry {
    column-count: 2; /* jetzt untereinander auf Mobile */
  }
}
.gallery-masonry img {
  width: 100%;
  display: block;
  margin-bottom: var(--gap);
  border-radius: 1px;
  cursor: pointer;
}

/* 8. Modal & Lightbox Default */
.modal,
.lightbox {
  display: none;
}
.hidden {
  display: none !important;
}

/* 9. Modal & Lightbox sichtbar */
.modal.visible,
.lightbox.visible {
  display: flex;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(220,220,220,0.4);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter:blur(10px);
}

/* 10. Basis-Layout Modal (mobil-first) */
.modal-content {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 24px;

  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;

 box-shadow: rgba(50, 50, 93, 0.25) 0px 10px 20px -2px, rgba(0, 0, 0, 0.3) 0px 9px 12px -3px;

}

/* 11. Schließen-Button (oben-rechts im Kreis) */
.modal-close {
  position: absolute;
  top: 22px;
  right: 30px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* 12. Wrapper für Bild + Thumbnails + Info */
.modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

/* 13. Media-Group: Bild + Thumbnails untereinander */
.media-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 2;
  max-height: 100%;

}



/* 14. Hauptbild (an Breite anpassen, max Höhe) */
.modal-main {
  position: relative;
  display:flex;
}
.modal-main .modal-img {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 4px;
}
.lightbox-btn {
  position: absolute;
  top: 35px;
  left: 35px;
  background: none;
  border: none;
  color: #3498db;
  cursor: pointer;
 z-index:2000;
}

/* 15. Thumbnails direkt unter dem Hauptbild */
.modal-thumbs {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
  overflow-x: auto;
}
.modal-thumbs img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .2s;
}
.modal-thumbs img:hover {
  transform: scale(1.0);
}

/* 16. Info-Panel (Titel, Serie, Text & Meta-Box) */
.modal-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.modal-info h3 {
  margin: 0;
  font-size: 1.6rem;
  color: #333;
}
.modal-info .series {
  margin: 0;
  color: #666;
  font-style: italic;
}
.modal-info .desc {
  margin: 0;
  line-height: 1.4;
}

.modal-info {
  margin-top: 2rem;


}

.modal-info .meta {
  background: #8d5066;
  padding: 12px;
  border-radius: 6px;
  list-style: none;
  font-weight:bold;
  padding:2rem;
  color:white;
 box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  justify-content:flex-end;
  
}
.modal-info .meta li {
  margin-bottom: 8px;
}

/* 17. Desktop-Layout Anpassung ab 768px */
@media (min-width: 1100px) {
  .modal-content {
    flex-direction: row;
    gap: 24px;
    max-width:1600px;
    padding: 40px;
    
  }
  .modal-body {
    flex-direction: row;

  }
  .media-group { flex: 2; }
  .modal-info  { flex: 1; justify-content: space-between; background-color:#f3f3f3; padding:2rem; border-radius:12px;}
}

/* 18. Elegante Lightbox-Buttons */
.lightbox .lb-close,
.lightbox .lb-prev,
.lightbox .lb-next {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  font-size: 1.5rem;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
}
.lightbox .lb-close {
  top: 16px; right: 16px;
}
.lightbox .lb-prev {
  top: 50%; left: 16px;
  transform: translateY(-50%);
}
.lightbox .lb-next {
  top: 50%; right: 16px;
  transform: translateY(-50%);
}
.lightbox.visible .lb-close,
.lightbox.visible .lb-prev,
.lightbox.visible .lb-next {
  display: flex;
}
@media (max-width: 1100px) {
  .modal-content {
    overflow-y: auto;
    max-height: 90vh;
  }
  .modal-main .modal-img {
    max-height: 50vh;
    object-fit: contain;
  }


.modal-img {
    margin-top:5rem;
  }


  .modal-thumbs,
  .modal-info {
    flex-shrink: 0;
  }

  .modal-info  {  justify-content: space-between; background-color:#f3f3f3; padding:2rem; border-radius:12px;}

  .modal-thumbs img
{
	margin-bottom:2rem;
  }


.modal-thumbs {justify-content: space-around;}


}







.desc-toggle {
  background: none;
  border: none;
  color: #3498db;
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
  margin-top: 8px;
}

.desc-toggle:focus {
  outline: none;
  text-decoration: underline;
}


#about {

padding:3rem;

border-radius:20px;

}

.gallery-masonry img {

  box-shadow: rgba(50, 50, 93, 0.10) 0px 6px 12px -2px, rgba(0, 0, 0, 0.12) 0px 3px 7px -3px;

}

#spacing {
  margin-top: 11rem;
  margin-bottom: 11rem;


}



/* 4a. Banner mit vollem Hintergrundbild */
#banner {
  /* Hintergrundbild einfügen */
  background-image: url('../img/banner__.png');
  /* keine Wiederholung, zentriert */
  background-repeat: no-repeat;
  background-position: center center;
  /* immer Container komplett ausfüllen */
  background-size: cover;
  /* volle Breite */
  width: 100%;
  /* Höhe an den Inhalt anpassen – 
     wenn Du z.B. immer 300px Höhe möchtest, ersetze auto durch 300px; 
     alternativ height: 100vh für gesamte Viewport-Höhe */
  height: 100%;
  /* Optional: etwas Padding oben/unten, damit Text nicht direkt am Rand klebt */
  padding: 320px 20px;
  /* Entferne gegebenenfalls das vorherige background-color */
  color: #fff;           /* Textfarbe ggf. anpassen */
  text-align: center;

}


.media-group {display:flex; justify-content: space-around;}


label {font-weight:bold; opacity:0.45;}


.itemDes {

display:flex;
background-color:#191941; color:white; padding:1.2rem; border-radius:8px; align-items: center;  justify-content: space-between;

}


.itemDes button {
	background-color:#000000; padding:10px 30px; border-radius:30px;  border:none;

  box-shadow: rgba(50, 50, 93, 0.10) 0px 6px 12px -2px, rgba(0, 0, 0, 0.12) 0px 3px 7px -3px;
}

.itemDes:hover {
display:flex;
background-color:black; color:white; 

}

.item {opacity:0.75;  transition: opacity .8s;}
.item img{object-fit:cover; width:100%;}
.item:hover {opacity:1.0;   box-shadow: rgba(50, 50, 93, 0.30) 0px 20px 20px -2px, rgba(0, 0, 0, 0.22) 0px 20px 20px -3px;}
}