/* ===============================
   MVZ POLYMEDICS — COMPLETE CSS
   2025‑05‑14
   ===============================*/

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

/***** 2. ROOT *****/
body{
  font-family:'Montserrat',sans-serif;
  line-height:1.6;
  color:#1A1A1A;
  background:#fff;
  scroll-behavior:smooth;
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/***** 3. HEADER *****/
header{
  background:#fff;
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid #e5e5e5;
  padding:1rem 0;
}
header .container{display:flex;align-items:center;justify-content:space-between}

.menu-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer}
.menu-toggle span,.hamburger{color:#1A1A1A}

.logo-wrap{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-decoration:none}
.logo{width:clamp(80px,12vw,160px);height:auto}
.logo-tagline{font-size:clamp(.75rem,2.2vw,1rem);color:#1A1A1A;line-height:1.2;text-align:center}

.nav-menu{display:none;flex-direction:column;position:absolute;top:60px;left:0;width:100%;background:#fff;border-top:1px solid #e5e5e5;padding:1rem}
.nav-menu.active{display:flex}
.nav-menu a{color:#1A1A1A;padding:.5rem 0;text-decoration:none;text-align:center}
.nav-menu a:hover{color:#00809d}

.header-right{display:flex;align-items:center;gap:1rem}
.social-icon{font-size:1.2rem;color:#1A1A1A;text-decoration:none}
.social-icon:hover{color:#00809d}

.cta-button{background:#00809d;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;text-decoration:none;transition:.2s}
.cta-button:hover{background:#006479}

/***** 4. HERO *****/
.hero{position:relative;width:100vw;left:50%;margin-left:-50vw;overflow:hidden}
.hero .container{padding:0;max-width:none}
.hero .hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.65)}


/***** 5. SECTION HEADINGS *****/
h2{font-size:2rem;text-align:center;margin-bottom:2rem;color:#1A1A1A}

/***** 6. LEISTUNGEN (CARDS) *****/
#leistungen{padding:4rem 0;background:#fafafa}
.cards-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:#f5f5f5;border-radius:8px;padding:2rem;display:flex;flex-direction:column;box-shadow:0 2px 6px rgba(0,0,0,.05);transition:transform .2s}
.card:hover{transform:translateY(-4px)}
.card h3{display:flex;gap:.5rem;align-items:center;font-size:1.25rem;margin-bottom:1rem;color:#1A1A1A}
.card p{font-size:.95rem}

/***** 7. GALLERY *****/
#gallery{padding:4rem 0;background:#fff}
.gallery-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.gallery-grid img{width:100%;height:200px;object-fit:cover;border-radius:8px}

/***** 8. CONTACT *****/
#contact{padding:4rem 0;background:#fafafa}
.contact-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.contact-grid>*{min-width:0}
#contact form{display:flex;flex-direction:column;gap:1rem}
#contact input,#contact textarea{padding:.75rem;border:1px solid #ccc;border-radius:4px;background:#fff;color:#1A1A1A;width:100%;max-width:100%}
#contact label{font-size:.9rem;color:#1A1A1A}
#contact button{background:#00809d;color:#fff;padding:.75rem;border:none;border-radius:4px;cursor:pointer;width:100%;max-width:100%}
#contact button:hover{background:#006479}
.contact-info h3{color:#1A1A1A}

/***** 9. MAP RESPONSIVE *****/
.map-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.map-responsive iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/***** 10. LEGAL & FOOTER *****/
section[id^="imp"],section[id^="daten"],section[id^="terms"]{padding:2rem 0;background:#fff}
footer{background:#fff;border-top:1px solid #e5e5e5;padding:1.5rem 0;text-align:center}
footer p,footer a{color:#1A1A1A}
footer a{text-decoration:none;margin:0 .5rem}
footer a:hover{color:#00809d}

/***** 11. ANIMATIONS *****/
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out}
.fade-in.visible{opacity:1;transform:translateY(0)}

/***** 12. RESPONSIVE TWEAKS *****/
@media(max-width:768px){
  .gallery-grid img{height:150px}
  .logo{width:clamp(60px,18vw,120px)}
  h2{font-size:1.6rem}
}

@media(max-width:480px){
  .logo-tagline{display:none}
  .container{padding-left:12px;padding-right:12px}
}

@media (max-width: 768px) {
  .map-responsive {
    padding-bottom: 80%; /* Adjust height for mobile */
  }
  .map-responsive video {
    height: 100%;
    width: 100%;
  }
}

/* ---------- Cookie notice (фиксированный и красивый) ---------- */
#cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255,255,255,0.98); /* почти прозрачно-белый */
  color: #1A1A1A;
  padding: 1rem 2rem;
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
  z-index: 9999;
}

#cookie-notice a {
  color: #00809d;
  text-decoration: underline;
}

#cookie-notice button {
  background: #00809d;
  color: #fff;
  border: none;
  padding: 0.5rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

#cookie-notice button:hover {
  background: #006b87;
}

.checkbox-label {
  display: flex;
  align-items: center;
  justify-content: center;      /* 🔹 ставим всё по центру */
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: #1A1A1A;
  text-align: center;
  width: 100%;                  /* 🔹 растягиваем на всю ширину родителя */
  margin-bottom: 1.5rem;
}

.checkbox-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: #00809d; /* для красивой заливки */
  cursor: pointer;
}

.checkbox-label a {
  color: #00809d;
  text-decoration: underline;
}

.checkbox-label a:hover {
  text-decoration: none;
}