/* ================================================
   NaturKind – Mobile & Tablet Responsive Styles
   Eingebunden als letztes <link> im <head>
================================================ */

/* ======= HAMBURGER BUTTON ======= */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: none; border: none;
  cursor: pointer; padding: 8px;
  border-radius: 10px;
  transition: background 0.2s;
  z-index: 1100;
}
.mobile-menu-btn:hover { background: rgba(139,94,60,0.08); }
.mobile-menu-btn span {
  display: block; width: 22px; height: 1.5px;
  background: #3a2a1f; border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
.mobile-menu-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-menu-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ======= MOBILE NAV OVERLAY ======= */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #fffdf8;
  z-index: 1050;
  flex-direction: column;
  padding: 110px 36px 48px;
  overflow-y: auto;
}
.mobile-nav-overlay.open { display: flex; }

.mobile-nav-overlay > ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.mobile-nav-overlay > ul > li > a {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem; font-weight: 400;
  color: #3a2a1f; letter-spacing: 0.02em;
  padding: 14px 0;
  border-bottom: 1px solid #e8ddd0;
  text-decoration: none;
  transition: color 0.2s;
}
.mobile-nav-overlay > ul > li > a:hover,
.mobile-nav-overlay > ul > li > a.active { color: #8b5e3c; }

.mobile-nav-sub {
  list-style: none; margin: 0; padding: 0 0 6px 16px;
}
.mobile-nav-sub li a {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 0.92rem; font-weight: 400;
  color: #7a6a60; letter-spacing: 0.04em;
  padding: 8px 0;
  border-bottom: 1px solid #f0e8de;
  text-decoration: none;
  transition: color 0.2s;
}
.mobile-nav-sub li a:hover { color: #8b5e3c; }

.mobile-nav-social {
  display: flex; gap: 22px; margin-top: 40px;
}
.mobile-nav-social a { color: #8b5e3c; display: flex; }
.mobile-nav-social svg { width: 22px; height: 22px; }

/* ======= TABLET  ≤ 900px ======= */
@media (max-width: 900px) {

  /* Header */
  header { padding: 0 20px !important; }
  nav { display: none !important; }
  .header-social { display: none !important; }
  .mobile-menu-btn { display: flex !important; }
  .header-logo img { height: 72px !important; }
  header.scrolled .header-logo img { height: 52px !important; }

  /* Hero */
  .hero { height: 220px !important; }
  .slideshow { height: 220px !important; }

  /* Section padding */
  .koop-intro, .koop-boxes, .augenhöhe-section, .spenden-section,
  .faq-section, .danke-section, .karriere-hero-text,
  section[style*="padding"] { }

  /* Grids → 1 Spalte */
  .boxes-grid,
  .spenden-grid,
  .augenhöhe-inner,
  .footer-grid,
  .traeger-grid,
  .info-grid,
  .news-grid,
  .events-grid,
  .kita-cards,
  .team-hintergrund-grid { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Split-Sections */
  .split-section { flex-direction: column !important; }
  .split-image { max-height: 260px !important; width: 100% !important; }

  /* Kooperationen Heading → Zeilenumbruch erlauben */
  .koop-intro h1 { white-space: normal !important; }

  /* Augenhöhe Bild */
  .augenhöhe-image { order: -1; }
  .img-placeholder { height: 260px !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ======= MOBIL  ≤ 640px ======= */
@media (max-width: 640px) {

  :root {
    --header-h: 72px !important;
    --header-h-small: 60px !important;
  }

  /* Header */
  header { height: 72px !important; }
  header.scrolled { height: 60px !important; }
  .header-logo img { height: 52px !important; }
  header.scrolled .header-logo img { height: 44px !important; }

  /* Hero */
  .hero { height: 190px !important; margin-top: 72px !important; }
  .slideshow { height: 190px !important; margin-top: 72px !important; }

  /* Section-Abstände */
  .koop-intro { padding: 56px 20px !important; }
  .koop-boxes { padding: 56px 20px !important; }
  .augenhöhe-section { padding: 56px 20px !important; }
  .spenden-section { padding: 56px 20px !important; }
  .faq-section { padding: 56px 20px 64px !important; }
  .danke-section { padding: 56px 20px !important; }

  /* Innere Container */
  .faq-inner, .augenhöhe-inner, .koop-boxes .inner,
  .danke-inner { padding: 0 !important; }

  /* Section-Titel */
  .section-title { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  .koop-intro h1 { font-size: clamp(1.5rem, 6.5vw, 2.2rem) !important; white-space: normal !important; }

  /* Karten */
  .koop-box { padding: 28px 22px !important; }
  .spenden-card { padding: 22px 18px !important; }
  .stelle-card .stelle-head { padding: 22px 20px !important; }
  .stelle-body { padding: 0 20px 22px !important; }
  .faq-question { padding: 16px 18px !important; }
  .faq-answer { padding: 0 18px !important; }
  .faq-item.open .faq-answer { padding: 0 18px 18px !important; }

  /* Footer → 1 Spalte */
  .footer-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  footer { padding: 36px 20px 0 !important; }
  .footer-col a { white-space: normal !important; }

  /* Floating CTA */
  .floating-cta a { font-size: 0.75rem !important; padding: 10px 18px !important; }
  .floating-cta { bottom: 18px !important; right: 18px !important; }
  .scroll-top { bottom: 80px !important; right: 18px !important; }

  /* Standort-Karten */
  .standort-cards,
  .kita-grid { flex-direction: column !important; align-items: center !important; }
  .standort-card { width: 100% !important; max-width: 400px !important; }

  /* Trägerinnen */
  .traeger-grid { grid-template-columns: 1fr !important; max-width: 320px !important; margin: 0 auto !important; }
  .traeger-card { max-width: 100% !important; }

  /* Team Hintergrund */
  .hintergrund-grid { flex-wrap: wrap !important; justify-content: center !important; gap: 24px !important; }

  /* Timeline */
  .timeline-dot { font-size: 0.7rem !important; width: 32px !important; height: 32px !important; min-width: 32px !important; }

  /* Logos */
  .logos-grid { gap: 16px !important; }
  .logo-item { min-width: 120px !important; padding: 14px 18px !important; }

  /* Instagram Grid */
  .instagram-grid { grid-template-columns: repeat(2,1fr) !important; }

  /* Nachhaltigkeit Cards */
  .nach-cards { grid-template-columns: 1fr !important; }

  /* Aktuelles */
  .news-grid { grid-template-columns: 1fr !important; }
  .events-list { padding: 0 !important; }

  /* Splits allgemein */
  .split-image { max-height: 220px !important; }
  .split-text { padding: 32px 0 !important; }
}