/* --- GLOBALE EINSTELLUNGEN --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { font-family: "Lato", sans-serif; font-weight: 300; line-height: 1.6; color: #333; background: #fff; }

/* --- NAVIGATION --- */
nav { background-color: #556b2f; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; display: flex; justify-content: center; }
nav ul { list-style: none; display: flex; width: 100%; justify-content: space-evenly; align-items: center; padding: 15px 0; }
nav ul li { flex: 1; text-align: center; }
nav ul li a { color: white; text-decoration: none; font-weight: bold; font-size: 16px; display: block; padding: 15px 5px; transition: background 0.3s; }
nav ul li a:hover { background-color: rgba(255, 255, 255, 0.1); }
.menu-icon { display: none; cursor: pointer; padding: 20px; flex-direction: column; gap: 5px; }
.menu-icon span { display: block; width: 25px; height: 3px; background-color: white; border-radius: 2px; }

/* --- HERO --- */
.hero { background-image: url("imagenes/Plantas.jpg"); background-size: cover; background-position: center; background-attachment: fixed; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; color: white; }
.overlay { background: rgba(0, 0, 0, 0.3); padding: 40px; border-radius: 10px; }
.lic-phil { font-size: 30px; font-weight: 500; margin-top: 12px; }

/* --- STICKY LAYOUT --- */
.spacer { height: 80px; }
section { padding: 80px 20px; max-width: 1000px; margin: auto; }
h2 { font-size: 2.2rem; font-weight: 400; color: #556b2f; margin-bottom: 30px; }

.barco-container, .about-container, .Leistungen-ring { display: flex; align-items: flex-start; gap: 40px; position: relative; }
.barco-container { flex-direction: row-reverse; }

.photo-barco, .about-photo, .HOJAMOJADA { position: -webkit-sticky; position: sticky; top: 120px; flex-shrink: 0; }
.photo-barco img, .about-photo img, .HOJAMOJADA img { border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: block; }
.texto-de-barco, .Leistungen-texto, .about-text-wrapper { flex: 1; }

/* --- LISTEN --- */
section ul { list-style-position: outside; padding-left: 35px; margin: 15px 0; }
section ul li { margin-bottom: 12px; padding-left: 8px; text-align: left; }
.Leistungen-ring { background-color: rgba(95, 123, 46, 0.1); padding: 40px; border-radius: 15px; }

/* --- KONTAKT & MAP --- */
.contact-box { background: #556b2f; color: #fff; padding: 40px; border-radius: 10px; width: 100%; }
.contact-box label { font-weight: bold; display: block; margin-bottom: 5px; }
.contact-box input, .contact-box textarea { width: 100%; padding: 12px; border-radius: 6px; border: none; margin-bottom: 15px; }
.contact-box button { background: #fff; color: #556b2f; padding: 12px; font-weight: bold; border: none; border-radius: 6px; cursor: pointer; width: 100%; transition: background 0.3s; }
.contact-box button:hover { background: #dce6cc; }

.map-container { display: flex; justify-content: center; margin: 40px auto; max-width: 1000px; padding: 0 20px; }
.map-container iframe { width: 100%; height: 450px; border-radius: 15px; border: 1px solid #ddd; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }

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

/* --- MOBILE --- */
@media (max-width: 850px) {
  .menu-icon { display: flex; z-index: 1001; }
  nav { justify-content: flex-end; }
  nav ul { display: none; flex-direction: column; position: absolute; top: 65px; left: 0; width: 100%; background: #556b2f; }
  nav ul.active { display: flex; }
  .barco-container, .about-container, .Leistungen-ring { flex-direction: column !important; align-items: center; }
  .photo-barco, .about-photo, .HOJAMOJADA { order: 2; position: static; margin-top: 30px; }
  .texto-de-barco, .about-text-wrapper, .Leistungen-texto { order: 1; }
  .photo-barco img:nth-child(3), .photo-barco div { display: none; }
}
footer { text-align: center; padding: 60px 20px; background: #f4f4f4; }