/* =======================================================
   📱 NEBO Mobile Styles – Responsive Design für Smartphones
   Wird NACH dem jeweiligen <style>-Block geladen und überschreibt
   Desktop-Werte auf kleinen Bildschirmen.
   ======================================================= */

/* --- Hamburger-Button (nur mobil sichtbar) --- */
.menu-toggle {
  display: none;
}

/* -------------------------------------------------------
   Breakpoint: max 768px (Tablets & Smartphones)
   ------------------------------------------------------- */
@media (max-width: 768px) {

  /* === HEADER === */
  header {
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
    gap: 4px !important;
    position: relative !important;
  }

  header > img {
    height: 55px !important;
  }

  /* Hamburger-Button einblenden */
  .menu-toggle {
    display: block !important;
    background: none;
    border: none;
    font-size: 1.7rem;
    color: #004080;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: auto;
    line-height: 1;
    order: 2;
  }

  /* Seitentitel im Header: von absolut zu statisch */
  .header-title {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    text-align: center !important;
    order: 5 !important;
    padding: 4px 0 2px !important;
  }

  .header-title h1 {
    font-size: 1rem !important;
  }

  /* Navigation: auf mobil standardmäßig versteckt */
  header nav {
    display: none !important;
    width: 100% !important;
    order: 10 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 10px 4px 6px !important;
    border-top: 1px solid #e0e0e0;
    gap: 0 !important;
  }

  /* Navigation: sichtbar wenn Hamburger geklickt */
  header nav.open {
    display: flex !important;
  }

  /* Nav-Inhalt-Wrapper (.de / .en) */
  header nav > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 6px;
  }

  /* Nav-Links auf mobil */
  header nav a {
    margin-left: 0 !important;
    padding: 6px 0 !important;
    font-size: 1rem !important;
    display: block;
    width: 100%;
  }

  /* Dropdown-Menü: immer sichtbar auf mobil */
  .dropdown {
    position: static !important;
    display: block !important;
    width: 100%;
  }

  .dropbtn {
    font-size: 1rem;
    margin-left: 0 !important;
    padding: 6px 0;
    width: 100%;
    text-align: left;
  }

  .dropdown-content {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-left: 12px;
    min-width: auto;
    border-radius: 0;
  }

  .dropdown-content a {
    padding: 5px 0 !important;
    font-size: 0.95rem;
  }

  /* Sprachflaggen */
  .lang-switch,
  .lang-switch-header {
    display: flex !important;
    margin-top: 6px !important;
    padding-right: 0 !important;
    justify-content: flex-start !important;
  }

  /* === WELLE === */
  .wave {
    margin-bottom: 0 !important;
    transform: scaleY(0.35) !important;
  }

  /* === SECTIONS === */
  section {
    padding: 15px 15px !important;
    margin-top: 0 !important;
  }

  #home {
    margin-top: 10px !important;
  }

  #services {
    padding: 30px 15px 50px !important;
    margin-top: 0 !important;
  }

  /* === HOME-BEREICH === */
  .home-container {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    text-align: center !important;
    gap: 20px !important;
  }

  .home-text {
    min-width: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .home-image {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .home-image img {
    width: 130px !important;
  }

  /* === ZWEI-SPALTEN → EINE SPALTE === */
  .two-columns {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* === KARTEN === */
  .cards {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* === GALERIE === */
  .gallery figure {
    flex: 1 1 calc(50% - 15px) !important;
    max-width: calc(50% - 15px) !important;
  }

  /* === VERKAUFTE GALERIE === */
  .sold-gallery {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* === BUTTONS === */
  .btn-primary {
    display: block !important;
    width: fit-content !important;
    margin-top: 10px !important;
  }

  /* === FOOTER === */
  footer {
    padding: 15px 12px !important;
    font-size: 0.9rem;
  }

  footer p {
    margin: 0;
    line-height: 1.8;
  }
}

  /* === OBJEKTBILDER (hagenbach, villingen): vertikal stapeln === */
  .objektbilder {
    flex-direction: column !important;
    align-items: center !important;
  }

  .objektbilder img {
    width: 90% !important;
  }

  /* === SERVICE-DETAIL: weniger Innenabstand === */
  .service-detail {
    padding: 15px 15px !important;
  }

  /* === IMMOBILIEN-PROJEKTSEKTIONEN === */
  #hagenbach,
  #villingen,
  #dubai {
    padding: 20px 15px !important;
    margin: 15px auto !important;
  }

  /* === SCHALTFLÄCHEN: untereinander === */
  .dubai-buttons a,
  .hagenbach-button a {
    display: block !important;
    margin: 8px auto !important;
    text-align: center;
    max-width: 260px;
  }
}

/* -------------------------------------------------------
   Breakpoint: max 480px (kleine Smartphones)
   ------------------------------------------------------- */
@media (max-width: 480px) {

  header > img {
    height: 45px !important;
  }

  .home-image img {
    width: 105px !important;
  }

  .gallery figure {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  h3 {
    font-size: 1.05rem;
  }
}