@media (min-width: 801px) {
  nav.mobile-nav {
      display: none;
  }

  .mobile-menu-container {
      display:none;
  }

  header nav ul {
      display: flex;
  }

  header nav .logo{
      display: block;
  }

}
    
    
    @media (max-width: 800px) {

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }   

  /*        outline: 1px dashed rgb(255, 0, 187);  */

  /*============BODY============*/

button {
  font-family: inherit;
}



  

  /*============HEADER+MENU============*/


  .wrapper-záhlaví-zápatí{
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;          /* Kontejner – důležité pro pozicování dětí */
      width: 90vw;
    height: 6.5rem;
    margin: 0 2rem;                  /* zarovnání na střed */
    padding: 1rem 0;             /* prostor kolem obsahu */
  }
  
.kontakt header {
  height: 6.5rem;
}

header {
  height: 6.5rem;
}



  header nav ul {
      display: none;
  }

  header nav .logo{
      display: none;
  }


  nav.mobile-nav {
      display: flex;
      align-items: flex-start;
  }

  .mobile-nav .logo-small {
    position: absolute;       /* musí být absolutní pro top/right */
    top: 1.5rem;
    left: 0rem;              /* odsazení od pravého okraje wrapperu */
    height: 3rem;
    width: auto;
    margin: 0 0;
    padding: 0 0;
  }

  .mobile-nav .logo-small img {
    width: 100%;
    height: 3rem;
    display: block;
  }

  .menu-icon{
    position: absolute;       /* musí být absolutní pro top/right */
    top: 1.5rem;
    right: 0rem;              /* odsazení od pravého okraje wrapperu */
    height: 3rem;
    width: 3rem;
    margin: 0;
    padding: 0;
  }

  .menu-icon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .mobile-menu-container {
    position: fixed;
    justify-content: flex-start;
    height: 100vh;
    width: 100%;
    left: 100%; /*tohle schová menu, když je zavřené*/
top: 6.5rem;
    background: #19191d;
    display: flex;
    align-items: center;
    z-index: 9999;
    transition: all 400ms ease;
  }

  .mobile-menu-container.active {
  left: 0;
  }

  .mobile-menu-container .close-icon {
  position: fixed;
  top:1.5rem;
  right: 2rem;
    height: 3rem;
    width: 3rem;
      opacity: 0; 
      pointer-events: none;
      transition: all 400ms ease;
  }

  .mobile-menu-container.active .close-icon{
    opacity: 1;
    pointer-events: auto;
  }

.mobile-menu-container a {
  font-size: 2rem;
font-family: "Hanken Grotesk", sans-serif;
}

 .mobile-menu-container ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  justify-content: flex-start;
    list-style: none;
    width: 100%;
    text-align: center;
  }

  .mobile-menu-container li {
display: block;
    width: 100%;
    padding: 1rem 0;
  }

  .mobile-menu-container .dropbtn {
    position: relative;
    width: 100%;
    text-align: center;
    background: none;
    border: none;
    color: var(--offwhite-colour);
    cursor: pointer;
    padding: 0rem 2rem;
    font-size: 2rem;
    line-height: 3rem;
  }

  .mobile-menu-container .dropdown-icon {
    position: absolute;
 margin-left: -3rem;
    pointer-events: none;
  }

  /* Dropdown obsah – animované rozbalení */
  .mobile-menu-container .dropdown-content-mobile {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .mobile-menu-container .dropdown-content-mobile.active {
    max-height: 100%;
    opacity: 1;
  }

  /* Obecný text v menu */
.mobile-menu-container a,
.mobile-menu-container .dropbtn,
.mobile-menu-container .dropdown-content-mobile a,
.mobile-menu-container .dropdown-label {
  font-size: 1.8rem;
  line-height: 3rem;
  text-align: center;
  color: var(--offwhite-colour);
  text-decoration: none;
      margin: 0.5rem 0;
}

  /* Zvýraznění aktivního odkazu */
  .mobile-menu-container a.menu-link-opened,
  .mobile-menu-container a.active {
    font-weight: 800;
    text-decoration: none;
  }


.btn-objednej-se{
  padding: 0.5rem 2rem;
  margin: 0;
  font-weight: 600;
  border: 0.3rem solid transparent;
}
  

.mobile-menu-container .dropbtn {
  font-family: "Hanken Grotesk", sans-serif; /* nebo to, co používáš jinde */
}


  /*============PAGE-ABOUT-ME============*/

  .wrapper-článek {
    width: 100%;
    max-width: 100vw;
    display: flex;
    justify-content: center;
  

  /* Sekce O-MNĚ */
  .O-MNĚ {
    width: 90vw;
    align-items: center;
    display: flex;    
    flex-direction: column;  
    margin: 0 auto;
    padding: 0;
  }

  /* Levá část – obrázek */
  .O-MNĚ .left {
    width: 90vw;
    height: fit-content;
    overflow: hidden;
    margin-top: 0;
    border-radius: 12px;
  }

  .O-MNĚ .left img {
    width: 90vw;
    aspect-ratio: 5 / 3;
    border-radius: 1rem;
  }

  /* Pravá část – text */
  .O-MNĚ .right {
    width: 90vw;
    line-height: 1;
  }

  .O-MNĚ .right h1 {
    font-size: 5rem;
    margin-top: -3.5rem;
    margin-bottom: 2rem;
    margin-left: 1rem;
  }

  .O-MNĚ .right p {
    margin-bottom: 1.5rem;
    line-height: 1.2;
  }
  }






  /*============FOOTER============*/




















  /*============KRUHY V POZADÍ=============*/

  .bg-deco1{
    top: 16vh; /* how far from the top */
    left: -50rem; /* sticks out from the left side */
    width: 70rem;
  }

  .bg-deco2{
    top: -5vh; /* how far from the top */
    right: -115vw; /* sticks out from the left side */
    width: 70rem;
  }





  /*============KONEC============*/
  

    }