/* ###### */
/* Basis  */
/* ###### */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
  list-style: none;
  outline: none;
  border: none;
  scroll-behavior: smooth;
}

:root {
  --bg: #fde3cf;
  --bar_box: #ec6426;
  --accent: #f8A91f;
  --accent_two: white;
  --accent_link: white;
  --text_one: black;
  --button: #333;  
}

body {
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text_one);
  margin-top: 0;
  padding-top: 0;
}

section {
  text-align: center;
}

img {
    width: 100%;
}

p, span {
  display: block;
  max-width: 500px; 
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
  margin: 1rem auto;
}

.clear, .clear10, .clear20, .clear40 {
  clear: both;
  font-size: 0;
  line-height: 0;
}

.clear {height: 0;}
.clear10 {height: 10px;}
.clear20 {height: 20px;}
.clear40 {height: 40px;}

.main-content {
  padding: 20px;
}

/* ################# */
/* Scroll-Up Button  */
/* ################# */
#scroll-up.btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1.5rem;
  line-height: 40px;
  text-align: center;
  background-color: var(--button);  
  color: var(--accent_two);
  border-radius: 5px;
  border: 2px solid var(--accent);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  z-index: 1100;
}

#scroll-up.btn:hover {
  background-color: var(--accent);  
  color: var(--text_one);
  transform: translateY(-2px);  
}

.tooltip-text {
  display: none;
  position: absolute;
  top: -190%;
  left: -203px;
  background-color: var(--button);
  color: var(--accent_two);
  padding: 5px;
  border-radius: 5px;
  border: 2px solid var(--accent);
  font-size: 0.9rem;
  white-space: normal;
  word-wrap: break-word;
  max-width: 200px;
}

#scroll-up.btn:hover .tooltip-text {
  display: block;
}

/* ################### */
/* Nav-Bar und Footer  */
/* ################### */
.check {
  display: none;
}

.bar {
  width: 100%;
  height: 27%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--bg);
}

.top-bar {
  width: 1920px;
  height: fit-content;
  padding: 10px;
  background: var(--bar_box);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: poppins;
}

.top-bar label {
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 15px;
  font-weight: 500;
  padding: 5px;
  border-radius: 8mm;
  max-width: 32px;
  overflow: hidden;
  transition: max-width 0.35s ease-out, padding 0.35s ease-out, background 0.35s ease-out;
}

.top-bar label span {
  margin-right: 10px;
}
  
.top-bar label:hover, 
.top-bar label:focus-within { /* Erweitert den Effekt auf Tastatur-Fokus */
  background: var(--accent);
  max-width: 150px;  
  padding: 10px 10px; 
}

.check:nth-child(1):checked ~ .bar .top-bar label:nth-child(1),
.check:nth-child(2):checked ~ .bar .top-bar label:nth-child(2),
.check:nth-child(3):checked ~ .bar .top-bar label:nth-child(3),
.check:nth-child(4):checked ~ .bar .top-bar label:nth-child(4) {
  background: var(--accent);
  max-width: 150px;
  padding: 10px 10px;
}
    
.bar2 {
  width: 100%;
  height: auto; 
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--bg);
  position: relative;
  bottom: 0;
  left: 0;
}

.bottom-bar {
  width: 100%; 
  width: 1920px; 
  height: fit-content;
  padding: 10px;
  background: var(--bar_box);
  display: flex;
  flex-direction: column; /* Stapelt die Container untereinander */
  align-items: center;
  gap: 10px;              /* Abstand zwischen oben und unten */
  font-family: poppins;
}

.footer-row-top {
  width: 100%;
  display: flex;
  justify-content: center;
}

.footer-row-bottom {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px; /* Abstand zwischen Impressum und Datenschutz */
}

.bottom-bar label {
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 15px;
  font-weight: 500;
  padding: 5px;
  border-radius: 8mm;
  max-width: 44px;
  overflow: hidden;
  transition: max-width 0.35s ease-out, padding 0.35s ease-out, background 0.35s ease-out;
  cursor: pointer;
}

.bottom-bar label img {
  margin-right: 10px;
  flex-shrink: 0; /* Verhindert, dass das Icon gequetscht wird */
}

.bottom-bar label:hover {
  background: var(--accent);
  max-width: 200px;  
  padding: 10px 15px;
}

/* Die untere Bar dauerhaft markieren */
.bottom-bar label.footer-active {
  background: var(--accent);
  max-width: 200px;         
  padding: 10px 15px;       
}

/* ################## */
/* Videos und Bilder  */
/* ################## */
.box-container-team, .box-container-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0rem auto;
  border: solid 6px var(--accent);
  text-align: center;
  overflow: hidden;
  height: auto;
}

.box-container-team { max-width: 600px; }
.box-container-logo { max-width: 400px; }

.box-img-team img, 
.box-img-logo img {
  width: 100%;
  height: auto;
  display: block; 
  object-fit: contain;
}

.centerbild {
  max-width: 600px;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.centerbildhoch {
  max-width: 600px;      
  width: 100%;           
  object-fit: cover;       /* Verhindert, dass das Bild verzerrt wird */
  margin: auto;
  display: block;          /* Wichtig, damit 'margin: auto' greift */
  padding: 0 20px 10px 20px; 
}

.img-hover-zoom {
  position: relative;  
  overflow: hidden;
  cursor: pointer;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.img-hover-zoom img {
  transition: transform .5s ease;
  width: 100%;
}

.img-hover-zoom:hover img {
  transform: scale(1.2);
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: var(--accent_two) ;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease, border 0.3s ease;
  pointer-events: none;
  z-index: 2; 
  border: 4px solid var(--accent); 
  border-radius: 50%; 
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3); 
  line-height: 1; /* Wichtig, um sicherzustellen, dass der Text in der Mitte bleibt */
}

.img-hover-zoom:hover .play-btn {
  opacity: 1; /* Macht den Button sichtbar */
  border-color: var(--accent);
}

.hint-text {
  position: absolute;
  bottom: 15%; 
  left: 50%;
  transform: translateX(-50%);  
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  width: 90%;
  z-index: 3;
  
  /* Lesbarkeit */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.4);
  padding: 5px 10px;
  border-radius: 4px;
  
  pointer-events: none; /* Klick geht durch zum Video-Container */
  transition: opacity 0.3s ease;
}

  /* Text beim Hover leicht verstärken oder abschwächen */
.img-hover-zoom:hover .hint-text {
  background: rgba(0, 0, 0, 0.6);
}

.insta-section-embed {
    display: block;
    width: fit-content; /* Sektion ist nur so breit wie das Bild */
}

.carousel-container {
  position: relative; 
  width: 100%;          
  max-width: 300px;    
  margin: 35px auto 0px auto;  overflow: hidden;
  border: solid 4px var(--accent);
}

.carousel-wrapper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  height: auto;     
  background-color: #f0f0f0;
}

.carousel-item img {
  width: 100%;
  height: auto;
  display: block;
  /* 'cover' sorgt dafür, dass das Hochformat voll ausgefüllt wird */
  object-fit: initial; 
  cursor: zoom-in;
}

.carousel-wrapper::-webkit-scrollbar { display: none; }

.carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 15px 10px;
  cursor: pointer;
  z-index: 10;
  border-radius: 3px;
}

.arrow.prev { left: 15px; }
.arrow.next { right: 15px; }

#lightbox-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease;
}

#lightbox-img {
  max-width: 90%;
  max-height: 85%;
  object-fit: contain;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  cursor: pointer;
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  color: white;
  border: none;
  font-size: 60px;
  cursor: pointer;
  padding: 20px;
  transition: color 0.3s;
}

.lightbox-arrow:hover { color: #ccc; }
.prev-l { left: 5%; }
.next-l { right: 5%; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Verhindert, dass die Bilder gestaucht werden */
.carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* ############## */
/* Media Queries  */
/* ############## */
@media screen and (max-width: 998px) {
  .section {
    padding: 50px 4%;
  }

  .centered h2 {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 680px) {
  .centered h2 {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 481px) {
  .btn {
    font-size: 1rem;
    width: 60%;
    padding: 10px 10px;
  }

  .centered h2 {
    font-size: 0.9rem;
  }
}