/* ==========================================================
   Karin Drexhage - responsive.css
   Version 0.3
   Responsive Anpassungen
========================================================== */

/* ---------- Große Tablets ---------- */
@media (max-width: 1100px){

  .hero-text{
    margin-left:5%;
    max-width:34rem;
  }

  .about{
    gap:2.5rem;
  }
}

/* ---------- Tablet Querformat ---------- */
@media (max-width: 900px){

  section{
    padding:5rem 0;
  }

  .about{
    flex-direction:column;
    align-items:flex-start;
  }

  .about-image,
  .about-text{
    width:100%;
  }

  .cards{
    grid-template-columns:1fr;
  }

  .hero{
    min-height:90vh;
  }

  .hero-image{
    object-position:60% center;
  }

  .hero-text{
    margin-left:3%;
    max-width:30rem;
  }

  nav ul{
    gap:1.2rem;
  }

}

/* ---------- Smartphone ---------- */
@media (max-width: 768px){

  #header .container{
    position:relative;
  }

  .menu-toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:42px;
    height:42px;
    background:none;
    border:none;
    cursor:pointer;
  }

  .menu-toggle span{
    display:block;
    height:2px;
    background:#36413c;
  }

  #header nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#f8f7f4;
    display:none;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
  }


  #header nav.open{
    display:block;
  }

  nav ul{
    flex-direction:column;
    gap:0;
    padding:1rem;
  }

  nav li{
    padding:.75rem 0;
    border-bottom:1px solid #dde3dc;
  }

  h1{
    font-size:clamp(2.5rem,8vw,3.5rem);
  }

  .hero{
    min-height:100svh;
  }

  .hero-image{
    object-position:68% center;
  }

  .hero-overlay{
    background:linear-gradient(
      90deg,
      rgba(20,28,24,.72) 0%,
      rgba(20,28,24,.55) 42%,
      rgba(20,28,24,.15) 78%,
      rgba(20,28,24,0) 100%);
  }

  .hero-text{
    margin:0;
    max-width:100%;
    padding-right:1rem;
  }

  .button{
    width:100%;
    text-align:center;
  }

}

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

  .container{
    width:min(94%,1180px);
  }

  section{
    padding:4rem 0;
  }

  h2{
    margin-bottom:1.25rem;
  }

  .card{
    padding:1.5rem;
  }

  .footer-content p{
    margin:0;
  }

  .footer-nav{
    position:static;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    background:none;
    box-shadow:none;
  }
}