/* ---------------- Reset & Basis ---------------- */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Montserrat', sans-serif; scroll-behavior:smooth; }
body { line-height:1.6; color:#ffffff; background:#7a7b7c; }

/* Farben */
:root { --primary-color:#ffe6af; --accent-color:#ab8d3f; --secondary-color:#675526; --bg-dark:#2c3e50; }

/* Navigation */
nav { position:sticky; top:0; background:#897132; display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; box-shadow:0 2px 5px rgba(0,0,0,0.1); z-index:1000; gap:3rem; transition:all 0.3s; }
.logo img { height:40px; }
.nav-links { display:flex; gap:3rem; }
.nav-links a { text-decoration:none; color:var(--primary-color); font-weight:600; transition:color 0.3s; }
.nav-links a:hover { color:var(--accent-color); }

/* Hamburger */
.hamburger { display:none; flex-direction: column; justify-content: space-between; width:25px; height:20px; cursor:pointer; }
.hamburger span { display:block; height:3px; width:100%; background: var(--primary-color); border-radius:2px; }

/* Hero */
.hero { width:100vw; height:100vh; position:relative; display:flex; justify-content:center; align-items:center; text-align:center; color:white; overflow:hidden; padding:2rem; }
.hero-slideshow { position:absolute; inset:0; }
.hero-slideshow .slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1s ease-in-out; }
.hero-slideshow .slide.active { opacity:1; }
.hero::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.4); }
.hero-content { position:relative; z-index:1; max-width:800px; }
.circle, .hero-logo { grid-area: 1 / 1;}
.container-Logo { display:grid ;place-items: center; }
.hero-logo { display:block; margin:0 auto 1.5rem auto; width:100px; height:auto; z-index: 2;}
.circle { height: 130px; width: 130px; background-color: #94762a81; display:block; margin:0 auto 1.5rem auto; z-index: 1; border-radius: 50%;  }
.hero h1 { font-size:4rem; margin-bottom:1rem; }
.hero p { font-size:1.5rem; margin-bottom:2rem; }
.hero button { padding:1rem 2.5rem; border:none; background:var(--accent-color); color:white; cursor:pointer; transition:background 0.3s; }
.hero button:hover { background:var(--secondary-color); color:#333; }

/* Sections */
.section-container { max-width:1200px; margin:0 auto; padding:0 1rem; }
section { padding:6rem 0; }
.section-title { text-align:center; margin-bottom:3rem; font-size:2rem; color:var(--primary-color); }

/* Fade-In Animation */
.fade-in { opacity:0; transform:translateY(20px); transition: all 0.8s ease-in-out; }
.fade-in.show { opacity:1; transform:translateY(0); }

/* Features */
.features {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 5rem !important;
  flex-wrap: nowrap !important;
  margin: 3rem 0;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 140px;                /* feste Breite pro Item */
}

.feature-item .icon-wrapper {
  height: 80px;                /* feste Höhe für alle Icons-Bereiche */
  display: flex;
  align-items: center;         /* Icon vertikal mittig in der Box */
  justify-content: center;
  margin-bottom: 1rem;
}

.feature-item img {
  max-width: 60px;
  max-height: 60px;
  width: auto;
  height: auto;
}
/* Galerie */
.gallery-subtitle { font-size:1.3rem; color:var(--primary-color); margin:2rem 0 1rem; border-left:4px solid var(--accent-color); padding-left:0.5rem; }
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.gallery img, .gallery video { width:100%; height:250px; object-fit:cover; border-radius:8px; cursor:pointer; transition:transform 0.3s, box-shadow 0.3s; }
.gallery img:hover, .gallery video:hover { transform:scale(1.05); box-shadow:0 10px 20px rgba(0,0,0,0.2); }

/* Ausstattung */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2.5rem; }
.card { background:rgb(92, 92, 92); padding:2rem; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.1); transition:transform 0.3s; }
.card:hover { transform:translateY(-5px); }



/* Footer */
footer { text-align:center; padding:3rem; background:var(--bg-dark); color:rgb(170, 170, 170); }
.social-icons img { width:30px; margin:0 0.5rem; }

/* Lightbox */
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); justify-content:center; align-items:center; z-index:2000; }
.lightbox-inner { max-width:90%; max-height:80%; position:relative; }
.lightbox-img, .lightbox-video { display:none; max-width:100%; max-height:80vh; border-radius:10px; }
.lightbox .close { position:absolute; top:20px; right:30px; font-size:40px; color:white; cursor:pointer; }

/*  Responsive  */
@media (max-width:1024px) { .hero h1 { font-size:3rem; } .hero p { font-size:1.2rem; } .hero button { padding:0.8rem 2rem; font-size:1rem; } }
@media (max-width:768px) {
  .hamburger { display:flex; }
  .nav-links { display:none; flex-direction:column; align-items:center; gap:1rem; background:#7a7b7c; position:absolute; top:60px; left:0; width:100%; padding:1rem 0; box-shadow:0 2px 5px rgba(0,0,0,0.1); }
  .nav-links.active { display:flex; }
  nav { flex-direction:row; justify-content:space-between; padding:0.5rem 1rem; }
  .hero h1 { font-size:2.2rem; } .hero p { font-size:1rem; } .hero button { padding:0.6rem 1.5rem; font-size:0.9rem; }
  .gallery img, .gallery video { height:180px; }
  .cards { grid-template-columns:1fr; }
}
@media (max-width:480px) { .hero h1 { font-size:1.8rem; } .hero p { font-size:0.9rem; } .hero button { padding:0.5rem 1rem; font-size:0.8rem; } .gallery img, .gallery video { height:140px; } .features { gap:1rem; } }

.hero .button {
  padding:1rem 2.5rem;
  border:none;
  background:var(--accent-color);
  color:white;
  cursor:pointer;
  transition:background 0.3s;
  text-decoration:none;     /* wichtig: kein Unterstrich */
  display:inline-block;     /* damit Padding richtig wirkt */
  border-radius:4px;        /* optional: leicht abgerundet, sieht oft schöner aus */
}

.hero .button:hover {
  background:var(--secondary-color);
  color:#333;
}