/* ============================================================
   Bausafe – Responsive Layer
   Geteiltes Stylesheet für alle Seiten. Wird NACH dem Inline-<style>
   geladen, daher gewinnen diese Regeln innerhalb der Media Queries.
   Rein additiv – Entfernen des <link>-Tags stellt den alten Zustand her.
   Breakpoints:  <= 900px (Tablet / Menü)   <= 600px (Smartphone)
   ============================================================ */

/* Burger-Button: standardmäßig ausgeblendet (Desktop) */
.nav-burger{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:9px;
  background:transparent;border:none;cursor:pointer;
  margin-left:auto;
}
.nav-burger span{
  display:block;height:2px;width:100%;
  background:var(--navy);border-radius:2px;
  transition:transform .25s var(--ease),opacity .2s var(--ease);
}
.nav.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.nav-open .nav-burger span:nth-child(2){opacity:0}
.nav.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

img,svg,video{max-width:100%}

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

  /* --- Navigation: Burger + Dropdown-Panel --- */
  .nav{padding:0 20px}
  .nav-burger{display:flex}
  .nav-links{
    position:absolute;top:68px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--white);
    border-bottom:1px solid var(--silver-lt);
    box-shadow:0 14px 28px rgba(15,28,46,.10);
    padding:10px 14px 16px;
    display:none;
  }
  .nav.nav-open .nav-links{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:13px 14px;font-size:15px;border-radius:6px}
  .nav-cta{margin-left:0!important;margin-top:6px;text-align:center;padding:13px 20px!important}

  /* --- Container-Padding reduzieren --- */
  .wrap,.trust-inner{padding-left:28px;padding-right:28px}

  /* --- Sektions-Abstände --- */
  .section,.section-dark,.kontakt-section,.standorte-strip{padding-top:64px;padding-bottom:64px}

  /* --- HERO --- */
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero::after{display:none}
  .hero-left{padding:48px 28px 24px;max-width:none}
  .hero-right{padding:0 28px 56px}
  .hero-lead{max-width:none}

  /* --- Zwei-Spalten-Layouts -> einspaltig --- */
  .usp-grid,.ueber-grid,.ag-intro,.mission-grid,.tech-grid,.team-grid,
  .kontakt-grid,.markt-grid,.behoerde-box,.standort-detail-grid,
  .map-standorte-grid,.ag-grid,.ag-grid-rev,.content-grid,.article-layout,
  .main-grid,.kontakt-block,.kontext-grid,.featured-card{
    grid-template-columns:1fr;
    gap:40px;
  }

  /* --- Drei-/Mehr-Spalten-Karten -> zwei --- */
  .leist-grid,.ref-grid,.ref-grid-small,.vor-ort-grid,.zusatz-grid,
  .article-grid,.related-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .img-grid-multi{grid-template-columns:1fr 1fr}

  /* --- Vier-Spalten -> zwei --- */
  .trust-inner{grid-template-columns:repeat(2,1fr);gap:14px}

  /* --- Standorte 6 -> 3 --- */
  .standorte-grid{grid-template-columns:repeat(3,1fr)}

  /* --- Footer 5 Spalten -> 2 --- */
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:32px 28px}

  /* --- Newsletter-Block stapeln --- */
  .newsletter{grid-template-columns:1fr;gap:24px;padding:32px 28px;margin-bottom:56px}

  /* --- Deutschlandkarte etwas kompakter --- */
  .de-map{height:400px}
}

/* ============================================================
   SMARTPHONE  ( <= 600px )
   ============================================================ */
@media (max-width:600px){

  .wrap,.trust-inner{padding-left:20px;padding-right:20px}
  .section,.section-dark,.kontakt-section,.standorte-strip{padding-top:48px;padding-bottom:48px}

  /* --- HERO --- */
  .hero-left{padding:40px 20px 20px}
  .hero-right{padding:0 20px 44px}
  .hero h1{font-size:clamp(30px,8vw,40px)}
  .hero-lead{font-size:15.5px;margin-bottom:32px}
  .hero-actions .btn{flex:1 1 auto;justify-content:center}
  .stat-cell{padding:18px 16px}
  .stat-num{font-size:30px}

  /* --- Alles einspaltig --- */
  .leist-grid,.ref-grid,.ref-grid-small,.vor-ort-grid,.zusatz-grid,
  .ag-grid,.ag-grid-rev,.img-grid-multi,
  .article-grid,.related-grid,.werte-grid{
    grid-template-columns:1fr;
  }

  /* --- Trust & Standorte: zwei Spalten bleiben lesbar --- */
  .trust-inner{grid-template-columns:1fr}
  .standorte-grid{grid-template-columns:repeat(2,1fr)}

  /* --- Footer gestapelt --- */
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:6px}

  /* --- Formular: Felder untereinander --- */
  .form-row{grid-template-columns:1fr}
  .contact-form{padding:24px 20px}
  /* iOS-Zoom beim Fokus verhindern (>=16px) */
  .form-group input,.form-group select,.form-group textarea{font-size:16px}

  /* --- Leistungs-Zeilen umbrechen lassen --- */
  .leistung-row{grid-template-columns:1fr;gap:8px}
  .cta-block,.bundesweit-card{grid-template-columns:1fr;gap:16px;text-align:left}

  /* --- Titel etwas zähmen --- */
  .sec-title{font-size:clamp(24px,6vw,32px)}

  .de-map{height:340px}

  /* --- horizontale Logo-Leiste etwas enger --- */
  .logo-item{padding:0 28px}
}